DOMに任意のJSONを埋め込むためのベストプラクティス？

次のように、DOMに任意のJSONを埋め込むことを考えています。

<script type="application/json" id="stuff">
    {
        "unicorns": "awesome",
        "abc": [1, 2, 3]
    }
</script>

これは、JavaScriptテンプレートエンジンで後で使用するために、任意のHTMLテンプレートをDOMに格納する方法に似ています。この場合、後でJSONを取得して次のように解析できます。

var stuff = JSON.parse(document.getElementById('stuff').innerHTML);

これは機能しますが、最善の方法ですか？これはベストプラクティスや標準に違反していますか？

注：私は、JSONをDOMに保存する代わりの方法を探していません。特定の問題に対する最善の解決策であるとすでに判断しています。私はそれを行うための最良の方法を探しています。

あなたのオリジナルの方法が最高だと思います。HTML5仕様はこの用途にも対応しています。

「（スクリプトではなく）データブロックを含めるために使用する場合、データはインラインで埋め込む必要があり、データの形式はtype属性を使用して指定する必要があり、src属性を指定してはならず、script要素の内容を指定する必要があります。使用するフォーマットに定義された要件に準拠する。」

こちらをお読みください：http : //dev.w3.org/html5/spec/Overview.html#the-script-element

あなたはまさにそれをしました。愛してはいけないことは何ですか？属性データで必要な文字エンコードはありません。必要に応じてフォーマットできます。それは表現力豊かであり、使用目的は明確です。それはハックのようには感じられません（たとえば、CSSを使用して "carrier"要素を非表示にするように）。それは完全に有効です。

一般的な方向性として、代わりにHTML5データ属性を使用してみます。有効なJSONを入力するのを止めるものは何もありません。例えば：

<div id="mydiv" data-unicorns='{"unicorns":"awesome", "abc":[1,2,3]}' class="hidden"></div>

jQueryを使用している場合は、次のように簡単に取得できます。

var stuff = JSON.parse($('#mydiv').attr('data-unicorns'));

jsonをスクリプトタグに埋め込むこの方法には、潜在的なセキュリティ上の問題があります。jsonデータがユーザー入力から発信されたと仮定すると、事実上スクリプトタグから抜け出し、domへの直接注入を可能にするデータメンバーを作成することが可能です。こちらをご覧ください：

http://jsfiddle.net/YmhZv/1/

これが注射です

<script type="application/json" id="stuff">
{
    "unicorns": "awesome",
    "abc": [1, 2, 3],
    "badentry": "blah </script><div id='baddiv'>I should not exist.</div><script type="application/json" id='stuff'> ",
}
</script>

エスケープ/エンコードを回避する方法はありません。

OWASPのXSS防止チートシートのルール＃3.1を参照してください。

このJSONをHTMLに含めたいとします。

{
    "html": "<script>alert(\"XSS!\");</script>"
}

<div>HTMLで非表示を作成します。次に、安全でないエンティティ（＆、<、>、 "、 '、および/など）をエンコードしてJSONをエスケープし、要素内に配置します。

<div id="init_data" style="display:none">
        {&#34;html&#34;:&#34;&lt;script&gt;alert(\&#34;XSS!\&#34;);&lt;/script&gt;&#34;}
</div>

これtextContentで、JavaScriptを使用して要素のを読み取り、解析することで、要素にアクセスできます。

var text = document.querySelector('#init_data').textContent;
var json = JSON.parse(text);
console.log(json); // {html: "<script>alert("XSS!");</script>"}

関数コールバック（JSONPの一種）を使用して、JSONをインラインスクリプトに挿入することをお勧めします。

<script>
someCallback({
    "unicorns": "awesome",
    "abc": [1, 2, 3]
});
</script>

実行中のスクリプトがドキュメントの後にロードされている場合、おそらく追加の識別子引数を使用して、これをどこかに保存できます。 someCallback("stuff", { ... });

私の推奨は、JSONデータを外部.jsonファイルに保持し、それらのファイルをAjax経由で取得することです。CSSおよびJavaScriptコードをWebページ（インライン）に配置しないので、なぜJSONを使用するのですか？

HTML5には、機械で読み取り可能なデータを保持するための<data>要素が含まれています。より安全な方法<script type="application/json">として、JSONデータvalueをその要素の属性内に含めることができます。

const jsonData = document.querySelector('.json-data');
const data = JSON.parse(jsonData.value);

console.log(data)

<data class="json-data" value='
  {
    "unicorns": "awesome",
    "abc": [1, 2, 3],
    "careful": "to escape &#39; quotes"
  }
'></data>

この場合、値を二重引用符で囲むことを選択'した"場合は、すべての単一引用符をまたはで置き換える必要があります。それ以外の場合、他の回答のようなリスクXSS攻撃が示唆しています。