Jqueryクローン（）が模様で動作しないようです

Question

私のチームの複雑な設計プロセスを簡略化しようとしています。簡単に言えば、私たちのサーバは、Backbone.jsアプリケーション用のJSTテンプレートの代わりにDOMノードを使用できるように、隠れたテンプレートセクションをシングルページアプリケーションに挿入します。私は、jqueryの.clone（）メソッドが特定の属性を好まないことを発見しました。

私は$('.mainBillboard').clone()を使用する場合は、この：私は、画像タグのsrc='{{ image_url }}'属性の類似の挙動を見てきました

<div id="mainBillboard" style=""> 

：

<div style="background-image: url({{ banner_url }})" id="mainBillboard"> 

...が、この中にクローニングされます。

「スタイル」から「e」を取り除くと、jqueryはそのままDOM要素をそのままクローンします。私は現在のニーズに対してこれを回避する方法を見つけましたが、なぜjqueryがこれらの属性を完全に削除するのか不思議です。これは何らかの攻撃防御（アンチXSSなど）ですか？

Answer 1

私はあなたのテストにFirefoxを使用していると思います。

<div id="outerContainer"> 
    <div style="background-image: url({{ banner_url }})" id="mainBillboard">asdfasdf</div> 
</div> 

と、この：

console.log($('#outerContainer').html()); 
console.log($('#outerContainer').clone().html()); 

デモ：私はこれを使用するとSafariやChromeでhttp://jsfiddle.net/ambiguous/YEPjL/

を私は、Firefox、第二いずれかを使用する場合、私は両方に同じ出力を得るが、空のstyle属性があります。 HTMLは次のようになりますただし、：

<div id="outerContainer"> 
    <div style="background-image: url(does-not-exist)" id="mainBillboard">asdfasdf</div> 
</div> 

その後、私はどこでも同じ出力を得ます。

デモ：http://jsfiddle.net/ambiguous/XukCa/

問題はFirefoxがあるので{{ banner_url }}が、それはHTMLを解析しようとしながら、明らかにそれを取り除く、有効なURLではないということです。あなたのHTMLが隠された<div>の中にあっても、表示されているいくつかのHTMLと同じように、ブラウザは引き続き解析して検証する必要があります。

HTMLにテンプレートを埋め込む通常の方法は、ブラウザがそれらを解釈しようとしないようにするために、<script>要素を使用することです。 （ご希望の場合は<script type="text/template">）テンプレートごとに

<script type="text/html" id="tmpl-mainBillboard"> 
    <div style="background-image: url({{ banner_url }})" id="mainBillboard">asdfasdf</div> 
</script> 
<script type="text/html" id="tmpl-somethingElse"> 
    <!-- another template... --> 
</script> 

だから、1 <script type="text/html">、その後、あなたは$('#tmpl-mainBillboard').html()でコンテンツを取得し、解析のためのテンプレートエンジンにその出力を渡すことができる：私はあなたがこのような構造に切り替えることをお勧めします。

デモ：http://jsfiddle.net/ambiguous/cZzW9/

最後のデモは、Firefox、クロム、およびSafariで<script>チャンクのために同じ出力を生成すること。