javascript - 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

我用谷歌搜索了这个错误并阅读了关于 Content Security Policy 的信息这是我们在编写 HTML 页面时必须遵循的。它说我们需要在页面标题中指定可信来源，以保护我们的网站免受 XSS 和其他恶意攻击。我是 Play Framework 的新手，我可以通过在本地提供 bootstrap.min.css 等静态库而不是使用 CDN URL 来解决与 CDN 相关的错误，但我不知道如何修复内联我在 jquery.min.js 中遇到的样式错误(我的错误的最后几行)。

谁能帮我解决这个问题？

Answer 1

您可以通过在您的 application.conf 中添加如下一行来为您的安全策略添加异常(exception):

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

上述白名单内联 Clef 和 jQuery 脚本。

---

另外，看看 this configuration其中还包括 Google API 和 CloudFlare 的异常(exception)情况:

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"