Question

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

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

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

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

unsafe-inline

script-src

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

Answer 1

我看到有些人使用script s type s浏览器将无法执行，然后从受信任的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库，例如雅虎的Express CSP有一个useScriptNonce，它将动态生成scripts的随机数。