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

Question

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

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

这用于设置，例如，window.serverVars.countryCode 由服务器使用 geoIP 确定的国家/地区代码。

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

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

Answer 1

我看到有些人使用浏览器不会执行的 script 和 type，然后从受信任的 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);

Answer 2

除了@icktoofay 的出色回答之外，我想指出一些 CSP 库，例如 Yahoo 的 Express CSP 有一个 useScriptNonce 可以为 scripts 动态生成随机数。

How can I include server variables in JS with CSP?