将 JavaScript 数据块 (JSON) 插入 HTML 页面

Question

我需要在我的 HTML 页面中包含一个 JavaScript 对象 (JSON)。
在服务器上呈现页面 HTML 的同时呈现 JSON。使用 AJAX 调用不检索数据。 我可以想到两种方法，并寻求反馈和建议。
将 JavaScript (JSON) blob 与页面一起传递的良好做法是什么？

选项 1

HTML：

<script type='text/javascript'>
    var model = { <JSON> };
</script>

.js:

function doSomething() { <use this.model here> }

选项 2

HTML：

<script type='text/javascript'>
    loadModel({<JSON>});
</script>

.js（包含在 html 文件的顶部）：

var model = null;
function loadModel(model) { this.model = model; }
function doSomething() { <use this.model here> }

变体 JSON 可以存储在单独的 .js 文件中，而不是在 HTML 中包含 JSON。有没有 cmets 这样做？

选项 1 让您可以在任何地方包含 .js 文件，并且将其包含在页面底部使其渲染速度更快（好事），但由于 JavaScript 在页面上渲染模型，这使其成为一个有争议的问题。仍然不依赖于 .js 包含的位置，使其不易出错。
R# 也（合理地）抱怨模型未初始化。

选项 2 感觉更好（一方面它更好地封装了细节），但在调用 loadModel 之前必须包含 .js。

我已经看到并做过两种方式，但没有注意到一种方式比另一种方式有任何显着优势。

服务器平台应该是无关紧要的，但它是 IIS 7.5/ASP.NET MVC 3/Razor

Answer 1

忘记你的两个建议 - 两者都极易受到 XSS 攻击。切勿将不受信任的文本放入脚本标记中。

改为使用owasp recommendation。

将您的（HTML 编码的）JSON 粘贴到 DOM 中，如下所示：

<div id="init_data" hidden>
    <%= html_escape(data.to_json) %>
</div>

然后像这样在 JavaScript 中读取它：

// external js file
var dataElement = document.getElementById('init_data');
// decode and parse the content of the div
var initData = JSON.parse(dataElement.textContent);

Answer 2

选项二的开销会稍微多一些。因为你有一个函数调用的开销，以及一个额外的变量（你的参数），它将被分配和释放。

正如你所说，任何一种方式都没有什么优势/劣势。

Answer 3

你会使用 jQuery 吗？然后，您可以使用 DOM 就绪事件，而不是在 HTML 中包含 javascript。

编辑：

嗯，在这种情况下，您可以在生成页面时将 JSON 包含在隐藏元素中。然后在 DOM 就绪事件中，您可以使用 jQuery 从页面中读取和解析它。

另一种选择可能是使用 HTML 5 数据属性并将数据包含在其中之一中。

如果是我，我可能会使用 ajax 调用，因为它更容易而且看起来更简洁。