javascript - 如何将 JavaScript 对象导出为 JavaScript？

Question

我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。

目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。该对象很简单——其中只有字符串/整数/数组(因此，它支持 JSON)。我想将对象 x “嵌入”到正在生成的 HTML 中，以供将在浏览器上运行的 JavaScript 代码使用。所以代码:

console.log(x);

将在服务器端和浏览器端转储完全相同的数据。例如 - 假设我要将一些额外的配置/数据传递给在浏览器上运行的 JavaScript。

明显的解决方案:

1. 编码为 JSON 并作为 AJAX/Websocket 发送不是这个问题的一部分，因为我们必须将对象嵌入到 HTML 中。我不想要额外的 HTTP 请求 - 所有内容都应该一次性传递。

2. 编码为 JSON 并简单地附加到变量最初听起来不错，但涉及一些额外的转义步骤。

3. 以这种方式使用 util.inspect() 对我有用:

   var toHtml = 'var x = ' + util.inspect(theXonServer, {depth:9}) + ';';

但我不确定它是否“优雅”(并且安全且容易出错......)

有更好的建议吗？这样做的标准方法？

Answer 1

传递数据的错误方式

通常会得到一些建议，将一些 JSON 字符串化并将其转储到 <script> 中标签。 这是个糟糕的建议。不要这样做。

了解为什么这是个坏主意很重要。

当您对 JavaScript 进行字符串构建时，您将面临各种语言怪癖，您绝对需要了解这些怪癖以确保没有问题。

其中一个怪癖是在 <script> 中元素，第一次出现 </script>将关闭 <script>元素。它在字符串中并不重要，脚本将被关闭，该点之后的其余内容将被视为 HTML。

HTML 转义不起作用，因为 JS 不喜欢 HTML 实体。

开头可能是这样的:

<script>
    window.xss = <%= JSON HERE %>
</script>

可以变成:

<script>
    window.xss = {"username":"Robert Hackerman</script><script src='nefarious.js'></script>"}
</script>

不要冒险。

传递数据的正确方式...

...当页面呈现时

防止任何脚本执行的更安全的方法是通过 [data-*]属性。您必须对内容进行 HTML 转义，但这在属性中是可以的。我正在使用 <script>元素，因为它暗示脚本将使用数据。

什么会开始:

<script data-foo="<%= HTML ENCODED JSON HERE %>" src="yourscript.js"></script>

会变成:

<script data-foo="{&quot;username&quot;:&quot;Robert Hackerman&lt;/script&gt;&lt;script src=&apos;nefarious.js&apos;&gt;&lt;/script&gt;&quot;}" src="yourscript.js"></script>

如果您想访问该数据，您可以只访问属性值，或使用 dataset api (if your target browsers support it) :

var fooElement = document.querySelector('[data-foo]');
var rawData = fooElement.dataset.foo;
// or
var rawData = fooElement.getAttribute('data-foo');
var data = JSON.parse(rawData);
console.log(data);

...页面呈现后

如果页面已经加载，而您想访问一些数据，只需使用 AJAX 请求即可。您将能够安全地读取 JSON 数据源，该数据源可以通过 JSON.parse 进行管道传输以访问数据对象。