如何使用 CSP 在 JS 中包含服务器变量？答案

【问题标题】：How can I include server variables in JS with CSP?如何使用 CSP 在 JS 中包含服务器变量？
【发布时间】：2015-08-23 16:25:07
【问题描述】：

在我的应用中，我有一些服务器变量：

{{# serverVars }}
    <script>
        window.serverVars = {{{ . }}};
    </script>
{{/ serverVars }}

这用于将 window.serverVars.countryCode 设置为由服务器使用 geoIP 确定的 countryCode。

现在在 CSP 中，这被认为是 unsafe-inline，这通常很糟糕。那么最好的方法是什么：

使用 CSP 将动态服务器变量添加到客户端 JavaScript 的最佳方法是什么？

【问题讨论】：

【解决方案1】：

我见过一些人使用 scripts 和 types 浏览器不会执行，然后从受信任的 JavaScript 中获取并解析它们。例如，在 HTML 中：

<script id="config" type="application/x-configuration">
    {"environment": "production", ...}
</script>

然后在你的 JavaScript 文件中：

var config = JSON.parse(document.getElementById('config').textContent);

如果您愿意，也可以将其作为 data 属性，例如：

<!DOCTYPE html>
<html lang="en" data-config="{&quot;environment&quot;: &quot;production&quot;, ...}">
    ...

然后再次在您的 JavaScript 中获取它：

var config = JSON.parse(document.documentElement.dataset.config);

【讨论】：

即使它是type="application/x-configuration"，那是否仍被视为内联脚本？
@mikemaccana：我承认我对 CSP 不是很熟悉，但我不明白为什么会出现问题。最糟糕的 CSP 会做什么，阻止执行？它不像一开始就会被执行。如果它不起作用，还有带有data-* 属性的第二种解决方案。
确实如此。测试解决方案 1 工作正常 - 似乎不考虑不可执行类型 unsafe-inline
只要确保这些 json 块中的数据被正确转义！这是一篇关于这种技术的好博文：mathiasbynens.be/notes/json-dom-csp

【解决方案2】：

除了@icktoofay 的出色回答，我想指出一些CSP 库，例如Yahoo 的Express CSP 有一个useScriptNonce，它会为scripts 动态生成nonce。

【讨论】：