126

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

<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 に格納する代わりの方法を探しているわけではありません。それが、私が抱えている特定の問題に対する最善の解決策であると既に判断しています。私はちょうどそれを行うための最良の方法を探しています.

4

7 に答える 7

85

オリジナルの方法が一番だと思います。HTML5 仕様では、この使用法にも対処しています。

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

ここを読む: http://dev.w3.org/html5/spec/Overview.html#the-script-element

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

于 2012-02-16T23:23:36.613 に答える
22

一般的な方向性として、代わりに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'));
于 2012-02-16T23:03:56.987 に答える
15

スクリプト タグに 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>

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

于 2014-03-04T23:47:12.463 に答える
6

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

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

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

于 2012-02-16T23:13:39.070 に答える
5

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>

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

于 2019-05-25T22:40:39.390 に答える
1

私のお勧めは、JSON データを外部.jsonファイルに保持し、Ajax を介してそれらのファイルを取得することです。CSS と JavaScript コードを Web ページ (インライン) に配置しないのに、なぜ JSON を使用するのでしょうか?

于 2012-02-16T23:16:53.127 に答える