jQuery：拒绝应用内联样式，因为它违反了以下内容安全策略指令

Question

我正在浏览这个GitHub项目play-silhouette-slick-seed ，这是Silhouette （Scala中的Play Framework的身份验证库）的一个例子。 我想将它集成到我自己的项目中，但在本地运行此示例项目时，我在Chrome控制台中收到以下错误：

Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Roboto|Montserrat:400,700|Open+Sans:400,300,600' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:14 Refused to load the stylesheet 'http://cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:111 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ROFVp_6SjJ96CfhCv_AHojQynKmlFmtBaCEXJv7S5Pw='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:113 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ROFVp_6SjJ96CfhCv_AHojQynKmlFmtBaCEXJv7S5Pw='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:115 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ROFVp_6SjJ96CfhCv_AHojQynKmlFmtBaCEXJv7S5Pw='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:117 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ROFVp_6SjJ96CfhCv_AHojQynKmlFmtBaCEXJv7S5Pw='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:119 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ROFVp_6SjJ96CfhCv_AHojQynKmlFmtBaCEXJv7S5Pw='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:121 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ROFVp_6SjJ96CfhCv_AHojQynKmlFmtBaCEXJv7S5Pw='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:1 Refused to load the script 'https://clef.io/v3/clef.js' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:136 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Y9Ig29TVi6thv5LkSGm4AJlOdWZ9HjZkdQ4nS0jpB5M='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

signIn:137 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-2yffux8Me_mUR5B9ESFicOYDJXrNC924Qr8m-iNolik='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

jquery-1.7.2.min.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-j0bVhc2Wj58RJgvcJPevapx5zlVLw6ns6eYzK_hcA04='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous function) @ jquery-1.7.2.min.js:1
jquery-1.7.2.min.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-u0QaYH0by4HvPJu8fIyF61T06TcExJ0dJ8URDvR5mxs='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous function) @ jquery-1.7.2.min.js:1
jquery-1.7.2.min.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-YIbq9-G1c3GTU4biQ5gJZjGatfr3bn3TKuJrLdBMgQI='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous function) @ jquery-1.7.2.min.js:1
jquery-1.7.2.min.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-BK8FE6438-8lVSkJQqZ7JN0EkkJJLHEyA92A5HQgo4M='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous function) @ jquery-1.7.2.min.js:1

我搜索了这个错误并阅读了编写HTML页面时必须遵循的内容安全策略 。 它说我们需要在页眉中指定受信任的来源，以保护我们的网站免受XSS和其他恶意攻击。 我是Play Framework的新手，我能够通过在本地提供bootstrap.min.css类的静态库而不是使用CDN URL来解决与CDN相关的错误，但我不知道如何修复我所获得的内联样式错误jquery.min.js （我错误的最后一行）。

任何人都可以帮我解决这个问题吗？

Answer 1

您可以通过在application.conf添加这样的行来为安全策略添加例外：

play.filters.headers.contentSecurityPolicy = "script-src 'self' 'unsafe-inline' clef.io jquery.min.js;"

上面的白名单内联了Clef和jQuery脚本。

---

另外，请查看此配置 ，其中还包括Google API和CloudFlare的例外情况：

play.filters.headers.contentSecurityPolicy = "default-src 'self'; img-src 'self' fbcdn-profile-a.akamaihd.net *.twimg.com *.googleusercontent.com *.xingassets.com vk.com *.yimg.com secure.gravatar.com; style-src 'self' 'unsafe-inline' cdnjs.cloudflare.com maxcdn.bootstrapcdn.com cdn.jsdelivr.net fonts.googleapis.com; font-src 'self' fonts.gstatic.com fonts.googleapis.com cdnjs.cloudflare.com; script-src 'self' clef.io; connect-src 'self' twitter.com *.xing.com; frame-src clef.io"

Answer 2

也许您必须在playframework项目中添加css / JS文件源。 https://www.playframework.com/documentation/2.4.x/CorsFilter

Answer 3

用apache：

有解决方案：

要启用内联执行：

使用关键字'unsafe-inline'

要么

哈希（ 'sha256-o16sCTZRxtPgUgZTyuPtO/h0ljXAzHAc+UugGRl/zuo=' ），

要么

一个随机数（ 'nonce-...' ）

最好的选择是使用哈希。

如果哈希与哈希匹配，则允许执行特定的脚本或样式。 不适用于javascript：URI。 例如： sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng=将允许alert('Hello, world.');