拒绝加载脚本，因为它违反了以下内容安全策略指令：“style-src 'self' 'unsafe-inline'答案

【问题标题】：Refused to load the script because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'拒绝加载脚本，因为它违反了以下内容安全策略指令：“style-src 'self' 'unsafe-inline'
【发布时间】：2016-04-23 12:04:46
【问题描述】：

当我的代码在发布模式下运行时，我正在使用 MVC6 (asp.net 5) 并尝试从 CDN 位置加载脚本，但由于某种原因，脚本永远不会加载。

我已经读到你需要在你的 HTML 文件中添加一个元标记，我已经这样做了，就像这样。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; style-src 'self' https://ajax.aspnetcdn.com; font-src 'self' http://netdna.bootstrapcdn.com" />

在我的 Index.cshtml 上，我有这个。

<environment names="Staging,Production">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"
        asp-fallback-src="~/lib/angular/angular.min.js"
        asp-fallback-test="window.angular">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"
        asp-fallback-src="~/lib/angular-ui-router/release/angular-ui-router.js"
        asp-fallback-test="window.angular && window.angularUiRouter">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.min.js"
        asp-fallback-src="~/lib/angular-local-storage/dist/angular-local-storage.js"
        asp-fallback-test="window.angular && window.localStorage">
    </script>

但它们从不加载。我已经尝试使用 IISExpress 和 DNX Web 命令运行代码。

我有this 帖子，这就是我创建 META 标记的方式，但不确定为什么它不起作用。我在 Chrome 中试过这个，在控制台下，我只是得到这样的错误

【问题讨论】：

我在这里遇到了类似的问题。你能修好你的吗？
我遇到了同样的问题
@Gillardo 已经快 4 年了！你有没有找到解决这个问题的方法？
就我而言，我试图在控制台中将 jQuery 加载到网站的网页中，当我将 crossorigin 属性添加到 script 元素时，我的问题得到了解决。 crossorigin="anonymous"

标签： javascript c# html asp.net asp.net-mvc

【解决方案1】：

将以下内容放在网页标题部分：

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com ">

有关内容安全政策的更多详细信息，您可以阅读here 和here。

【讨论】：

不，那也失败了
请阅读我在答案中发布的两个链接 - 也许在您的情况下，您应该在最后添加更多网站地址以允许从它们加载 javascript。实际上，正如我从您的屏幕截图中看到的那样 - 您绝对应该在那里添加所有外部网站。
不，无论我在标题中输入什么，似乎都会出错。也许这是asp.net5或角度的问题。我什至无法加载 fontawesome 图片，我已经添加了img-src 'self' * data: ;
这对我有帮助 - 请记住，您还必须输入正确的协议 - 所以如果是 OP https://cdnjs.cloudflare.com

【解决方案2】：

在我的例子中，这个策略是通过SecurityHeadersAttribute 设置的（这个属性是在 AccountController 和其他一些设置的）。

基本上，这会在headers 中添加覆盖您的meta 标记的默认策略。因此，您需要更改此策略或从 Controller 中删除该属性。

【讨论】：

【解决方案3】：

如果您想解决此问题，请在您的 application.conf 文件中添加以下内容。

play.filters.disabled += "play.filters.headers.SecurityHeadersFilter"

【讨论】：

【解决方案4】：

在 Accepted answer 上添加，我包含了使我的脚本无法加载的 script-src-elem。

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com; script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' http://cdnjs.cloudflare.com ">

【讨论】：

【解决方案5】：

马尼坎丹 C 为什么要打扰 CDN？你真的需要吗？它是什么类型的应用程序/网站？您是否正在处理无法在本地存储文件的 GB/TB 数据？这些静态文件负载很重吗？我已经在您的标记中注意到，如果无法点击 CDN，您有一个备份源。

asp-fallback-src="~/lib/angular/angular.min.js"

因此，如果您的项目很小、本地站点或负载不重，那么在我看来，您真的不需要 CDN。我认为它只会像现在这样给你带来更多问题。作为解决方案，我会删除元标记。

我一直致力于并继续维护多个 MVC-MVC5 应用程序，其中一些应用程序中有 CDN，但主要是为了确保如果我们的本地文件由于某种原因不可用，CDN 会受到影响，尽管您确实需要谨慎对待 CDN 受到损害，这是 CDN 并非 100% 可行的另一个原因。我们从来没有像您发布的那样出现任何控制台错误，我们也从未在我们的视图中放置 META 标签。不要相信你读到的一切。如果您只有静态文件，那么 CDN 是有意义的。要记住的重要规则是，如果您的 html 中有内联代码或代码的任何动态部分，则 CDN 会被多次调用，因此将其用作主要资源是没有意义的。

【讨论】：