2016-08-25 10 views
0

は、私の問題を複製hereを移動し、対応するセクションにこのコードを貼り付けてくださいするには、次のDustJSエンティティを通常の文字に戻すのを止めるにはどうしたらいいですか?

ダストテンプレート:

{title|s} 

データ:あなたは、次の出力が表示されます

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

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

私のエンティティが通常の文字に戻って変換されるので、それは間違った動作です。その結果、alertが実行されます。

テンプレートに挿入する値をJSを介してHTMLエスケープするかどうかを制御したいのですが、ですから、Dust JSはスマートな操作をしてはいけません。ちょうど私が望む内容でテンプレートをフィードしてください。それをどうすれば実現できますか?

答えて

1

|sは、ライブラリによって実行される追加のエスケープルーチンを抑制するように思われます。エスケープされたHTMLとしてデータを入力しているので、それはあなたが与えたものとまったく同じです。ブラウザは<script>alert('yo');</script>としてそれをレンダリングしているが、舞台裏で、それはまだ&lt;script&gt;alert('yo');&lt;/script&gt;ない警告だ、あなたの文字列が既にエスケープされてから実行されます。

var data = { 
 
    "title": "&lt;script&gt;alert('yo');&lt;/script&gt;" 
 
}; 
 

 
//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をフィルタを説明するのより良い仕事をするようです公式の文書よりも。彼の例には、使用しているフラグに応じて警告がいつ実行されるかを示すエスケープされていない文字列があります。

+0

あなたはそうです...テンプレートに渡す前にjQuery.text()を実行したことに気付きました。私が間違っていたことをデモで聞いたフィドルです:https://jsfiddle.net/op2nvsc7/ – Karol

関連する問題