엔티티를 일반 문자로 변환하는 DustJS를 어떻게 멈출 수 있습니까?

Question

은 내 문제를 복제 here를 이동하고 해당 섹션에이 코드를 붙여 넣으려면 :

먼지 템플릿 :

{title|s} 

데이터 : 당신은 다음과 같은 출력을 볼 수

{ 
    "title": "<script>alert('yo');</script>" 
} 

:

<script>alert('yo');</script> 

내 엔터티가 정상적인 문자로 다시 변환되므로 잘못된 동작입니다. alert이 실행됩니다.

내 템플릿에 삽입하는 값이 JS를 통해 HTML 이스케이프 처리되는지 여부를 제어하려고합니다. 따라서 Dust JS는 지능적인 작업을 수행해서는 안되며 정확하게 원하는 내용으로 템플릿을 피드해야합니다. 어떻게하면 될까요?

Answer 1

|s은 라이브러리가 수행하는 추가 이스케이프 루틴을 보류하는 것으로 보입니다. 데이터를 이미 이스케이프 처리 된 HTML 형식으로 입력하고 있으므로 입력 한 내용이 그대로 출력됩니다. 브라우저는 <script>alert('yo');</script>로 렌더링하지만, 뒤에서는 여전히 문자열이 이미 탈출되어 있기 때문에 어떤 경고가 실행되지 않습니다 <script>alert('yo');</script>입니다 :

var data = { 
 
    "title": "<script>alert('yo');</script>" 
 
}; 
 

 
//innerHTML version 
 
var src = document.getElementById('template-s').textContent; 
 
var compiled = dust.compile(src, 'output-s'); 
 

 
dust.loadSource(compiled); 
 

 
dust.render('output-s', data, function(err, out) { 
 
    document.getElementById('output-s').innerHTML = out; 
 
}); 
 

 
// textContent version 
 

 
src = document.getElementById('template-s-textContent').textContent; 
 
compiled = dust.compile(src, 'output-s-textContent'); 
 

 
dust.loadSource(compiled); 
 

 
dust.render('output-s-textContent', data, function(err, out) { 
 
    document.getElementById('output-s-textContent').textContent = out; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.7.3/dust-full.js"></script> 
 
<script type="text/dust" id="template-s">Output {title|s}</script> 
 
<script type="text/dust" id="template-s-textContent">Output {title|s}</script> 
 

 
<h3>Flag: |s set as innerHTML</h3> 
 
<div id="output-s"></div> 
 
<h3>Flag: |s set as textContent</h3> 
 
<div id="output-s-textContent"></div>

This article이 필터를 설명하는 더 나은 일을 할 것 같다 공식 문서보다. 그의 예에는 사용하는 깃발에 따라 경고가 실행되는시기를 보여주는 이스케이프 처리되지 않은 문자열이 있습니다.