使用内容安全策略将服务器数据传递到客户端脚本

Question

通过在 Web 服务器 ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ) 上设置内容安全策略标头，任何内联脚本都会被现代浏览器阻止。建议将所有 javascript 放在 .js 文件中，并配置策略以授权托管这些 .js 文件的域。

很好，但我的问题是我们如何将数据从服务器端应用程序传递到客户端脚本？

例如，如果我想调用一个以服务器端值作为输入的 js 函数，我仍然必须在被阻止的页面主体中调用该函数，如下面的代码（MVC.Net Razor View）。

<body>
...
<input type="button" value="Test" onclick="DoSomething('@ViewData["SomeValue"]');" />
...
</body>

我找到了一些在脚本 src 属性查询字符串中传递数据的方法（http://feather.elektrum.org/book/src.html），但我不确定这是最好的解决方案。我特别担心 src 查询字符串中变量的缓存问题。有更好的方法吗？

Answer 1

由于在第一个请求中包含初始数据是非常常见的，因此这里有一个简单的方法。当您需要的只是数据时，不需要实际的脚本。

<script type="application/json" id="data">{"foo": "bar"}</script>

然后在你的 JavaScript 文件中

var data = JSON.parse(document.querySelector('#data').innerHTML);
alert(data.foo);