2014-04-28 5 views
2

장고의 템플릿 언어를 사용하여 일부 JavaScript 변수를 템플릿으로 만들 수 있기를 원합니다. 내가 가지고있는 상황은 다음과 같습니다. foo은 자바 스크립트 문자열로 변환하려는 사용자 정의 데이터 (신뢰할 수없는 데이터 읽기)의 파이썬 문자열입니다.Django의 escapejs 필터 및 XSS

<!doctype html> 
<html> 
    <head> 
     <script> 
      bar = '{{ foo|escapejs }}';   
     </script> 
    </head> 
    <body> 
    </body> 
</html> 

것은이 같은 escapejs는 XSS 공격에 취약하여 제대로 Django's documentation을 읽고 있어요 경우.

저는 HTML5의 data-* 속성을 사용하여 잠재적 인 해결책을 생각했습니다. 이것에 덜 성가신/표준 방법이 있는지

<!doctype html> 
<html> 
    <head> 
     <script> 
      window.onload = function() { 
       bar = document.getElementById('data').getAttribute('data-bar'); 
      }; 
     </script> 
    </head> 
    <body> 
     <div id="data" style="display:none;" data-bar="{{ foo }}"></div> 
    </body> 
</html> 

그러나, 나는 궁금하네요.

+0

은'{%의 autoescape의 %}' 꼬리표? http://docs.djangoproject.com/en/dev/ref/templates/builtins/#autoescape – xyres

+1

@weasel OP가 필요로하는 JavaScript에서 사용하기위한 16 진수 엔티티 인코딩이 아닌 HTML 이스케이프 처리를하는 것처럼 보입니다. – SilverlightFox

+1

나는 동의한다, rectangletangle. 이것은 설명서에서 명확하지 않습니다. 어쩌면 자바 스크립트에서 사용하기보다는 HTML로 직접 표현할 수도 있습니다. [이 게시물] (http://security.stackexchange.com/a/34116/8340)은 'escapejs'가 JavaScript를 인코딩하는 올바른 방법이라고 제안합니다. – SilverlightFox

답변

4

escapejs의 출력 JS 내기 HTML 텍스트 또는 JS 내기 HTML이 인용-속성 값의 중첩 문맥에서 사용 안전하다. JS-inside-HTML-unquoted-attribute-value에서 사용하기에 안전하지는 않습니다 (그러나 인용 부호가 붙지 않은 HTML 속성의 경우 escape도 없으므로 언제나 인용 부호가 사용됩니다).

모든 HTML 특수 문자를 JavaScript 문자열 리터럴 \u (HTML 특수 문자가 포함되지 않은 이스케이프)에서 이스케이프 처리해야하므로 정상입니다. _base_js_escapes (django.utils.html)을 참조하십시오. 또한 출력물을 '안전'으로 표시하므로 거짓말이 아니길 바랄 것입니다.

이 확인 될을 생각하고 미래 장고 버전 숙박 OK에 보장되어 있는지 여부를 당신이 지적 문서 주어, 불분명 여부. 이것이 단순히 HTML로 이스케이프 (escaping)하는 잘못된 형식이라고 말할 수 있습니다. 이스케이프 처리가 일반 HTML에서는 안전하지 않은 반면, 원치 않는 백 슬래시가있는 잘못된 출력은 확실히 발생하지 않습니다. 그것. 운이 좋았 니?

나는 이와 같은 HTML5의 data- * 속성을 사용하는 잠재적 인 해결책을 생각해 보았습니다.

나는 항상이 방법을 항상 사용합니다. JS로 템플리트를 작성하는 것은 잘못하기 쉽고 인라인 JS를 사용하는 것은 약간 지저분하며 앞으로 Content-Security-Policy를 배치 할 수 없게됩니다.

전체적으로 동일한 잘 알려진 HTML 자동 이스케이프 처리를 사용하여 HTML 데이터에 모든 페이지 데이터를 넣고 JS가 DOM에서 해당 태그를 검색하도록하는 것이 훨씬 좋습니다. 물론 문자열이 아닌 구조화 된 데이터를 포함하려는 경우 JSON 인코딩 할 수 있습니다.

은 (난 당신이 <body>에 속성을 첨부 할 수 있습니다 또는 다른 어떤 요소가 해당 데이터에 연결되어 ...하지만 수동 보이지 않는 DIV 귀찮게하지 않을 것입니다.)

+0

고마워요. 많은 정보를 얻었으니, 저는'data- * '접근법을 사용할 것입니다.저는 코드를 검토하는 유일한 사람입니다. 그래서주의의 측면에서 잘못하는 것이 가장 좋습니다. 어색함이 그렇게 큰 거래가 아니기 때문에 이것이 필요한 코드의 작은 부분 일뿐입니다. – rectangletangle