web-dev-qa-db-ja.com

jsのhtmlの正しいエコー？

同僚と私は、JavaScriptコード内でHTMLをエコーする方法について話していました。具体的には、次のような状況です。

new Element('div', {
    html: '{long string of HTML goes here!}'
}.inject($('content'));

この状況では短いスニペットがうまく機能するようですが、大量のデータをエコーする場合はどうでしょうか。その場合、行は非常に長くなり、デバッグが困難になります（誰が水平方向にスクロールするためです！？）。

問題は、その長さに加えて、使用されているすべての引用符をエスケープする必要があるという事実にもあります。特に、JavaScriptコードがサーバー側からエコーされている場合、引用符の1つが「使い果たされる」ことになります。それ自体。

1つの解決策は、HTMLコードの長い行を分割することです。

new Element('div', {
    html:   '{long string of HTML goes here!}' +
            '{some more HTML goes here}' +
            '{and even more...}'
}.inject($('content'));

提供される別のソリューションには、addslashes（）のサーバー側インクルードが含まれます。インクルードするすべてのHTMLをphp変数で定義し、必要なときにエコーすることも可能だと思いますが、

<?php
    $html = addslashes('{html content}');
?>

new Element('div', {
    html: '<?=$html?>'
}.inject($('content'));

コードの可読性、効率、セキュリティの観点から、どの方法が最適ですか？

phpjavascripthtml
7
Julian H. Lam

Addlashesメソッドは信頼できません。代わりに、次のようにします。

_new Element('div', {
    html: <?= htmlspecialchars(json_encode($html)) ?>
}.inject($('content'));
_

addlashes（）は、SQLを使用するためにテキストをエスケープする、頭の痛い非推奨メソッドです。 Javascript用ではありません。それがJSONの目的です。 PHPデータ（単純な変数、オブジェクト、配列など））を、構文的に正しいJavascriptであることが保証されているものに変換します。

HTMLに埋め込まれたJSON（またはJavaScript）は、HTMLに対して適切にエスケープする必要があります。これがhtmlspecialchars()でラップされている理由です。 JSONは[〜＃〜]ない[〜＃〜] _<_、_>_、_&_などをエンコードすることを考慮してください。引用符で囲まれたJSON文字列。

ただし、HTMLの1つのブロックをJSに挿入しているだけなので、

_<div id="seekrithiddenhtml" style="display: none">
<?= $html ?>
</div>
_

その後、JavaScriptで簡単なクローンを作成できます。

7
Marc B

コードとコンテンツを分離する方が常に良いと思います。ソースへのリテラルページコピーの挿入を回避できる場合は、常にそうしてください。その大きな利点の1つは、ページコピーを含むファイルへのコピーエディターのアクセスを制限できることです。つまり、編集者が仕事をしたり、コードをいじったりすることはありません。そうは言っても、ページコピーをファイルに保存するのは良い方法ではないと思います。コピー操作用のUIを簡単に作成できるように、可能な限りデータベースをお勧めします。次に、ソースでの参照は、一貫性があり、抽象的で、動的です。

1
AlienWebguy