jQuery: Refused to apply inline style because it violates the following Content Security Policy directive

Question

I am going through this GitHub project play-silhouette-slick-seed that is an example of Silhouette (an authentication library for Play Framework in Scala). I want to integrate it in my own project but while running this example project locally, I get the following errors in Chrome console:

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

I googled this error and read about Content Security Policy that we must follow when writing HTML pages. It says we need to specify trusted sources in page headers to save our site from XSS and other malicious attacks. I am new to Play Framework, I am able to resolve the CDN related error by serving static libraries like bootstrap.min.css locally instead of using CDN URLs but I don't know how to fix the inline style error that I am getting in jquery.min.js(few last lines of my error).

Can anyone please help me out in resolving this?

Answer 1

You can add exceptions to your security policy by putting a line like this in your application.conf:

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

The above whitelists inlined Clef and jQuery scripts.

---

Also, have a look at this configuration which also includes exceptions for Google APIs and 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

Maybe you have to add the css/JS files sources in your playframework project. https://www.playframework.com/documentation/2.4.x/CorsFilter