Javascript 使用内容安全策略将服务器数据传递给客户端脚本_Javascript_Content Security Policy

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

javascript

Javascript 使用内容安全策略将服务器数据传递给客户端脚本,javascript,content-security-policy,Javascript,Content Security Policy,通过在web服务器（）上设置内容安全策略头，任何内联脚本都会被现代浏览器阻止。建议将所有javascript放在.js文件中，并配置策略以授权托管这些.js文件的域很好，但我的问题是，我们应该如何将数据从服务器端应用程序传递到客户端脚本例如，如果我想调用一个以服务器端值作为输入的js函数，我仍然必须在被阻止的页面主体中调用下面的代码（MVC.Net Razor View）这样的函数 <body> ... <input type="button" value="Test" o

通过在web服务器（）上设置内容安全策略头，任何内联脚本都会被现代浏览器阻止。建议将所有javascript放在.js文件中，并配置策略以授权托管这些.js文件的域

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

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

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


...
...

我在脚本src属性querystring（）中找到了一些传递数据的方法，但我不确定这是否是最好的解决方案。

我特别担心src querystring中变量的缓存问题。有更好的方法吗？

您需要让JavaScript调用服务器上的一个端点（例如REST API），返回它所需的数据，而不是让服务器输出动态插入值的内联JavaScript。限制仅限于内联脚本；您仍然可以在运行时使用XMLHttpRequest从服务器获取任意数据

或者，您可以提供一个动态生成的js文件，该文件的工作方式与内联脚本类似，但可以单独执行。这是一种可能，但有点像黑客，没有真正的优势。

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

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

“任何内联脚本都会被现代浏览器阻止”从未听说过。@Seblor:See edit`例如，如果我想调用一个以服务器端值作为输入的js函数，我仍然必须调用被阻止的页面正文中的函数。`不确定你在这里想做什么。客户端请求“数据”并接收“数据”，并且在调用数据后可以自由调用任何函数。您的场景与JSONP相同吗？我对JSONP了解不多，我只想向javascript函数传递一个参数，该参数的值来自服务器端代码。例如，MVC.Net视图需要将ViewData[“anyValue”]传递给javascript函数callI，我也想到了这一点，但我担心对服务器的额外http请求可能会影响性能，这在现代web应用程序中非常常见，另外，这是你唯一的选择——不管怎样，如果你不能在线获取数据，你必须通过服务器调用来获取数据。这似乎是一个非常好且干净的解决方案，我迄今为止做的几个测试都很好，thanks@Jonathan请注意，我将textContent更改为innerHTMLDoesn这不是打开攻击面吗？我自己使用这个解决方案。但是，为了提高安全性而阻止内联JavaScript而改用内联JSON，感觉有点不对。或者，可以在服务器上为每次JSON传输创建一个JSON文件，并让浏览器加载带有脚本标记的文件。但这并不是很优雅。

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