CODEWITHSUNDEEP
javascriptplayframeworkcontent-security-policy
Chris Carrington
Chris Carrington

Reputation: 21

What is causing "Refused to load the script... because it violates the following Content Security Policy directive..." with my configuration?

My project is using Scala Play Framework 2.8.19. My configuration for the Content Security Policy filter is as follows:

play.filters.csp {
  directives {
    default-src = "'self'"
    img-src = "'self' *.fbcdn.net *.twimg.com *.googleusercontent.com *.xingassets.com vk.com *.yimg.com secure.gravatar.com chart.googleapis.com *.fbsbx.com api.qrserver.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 = ${play.filters.csp.directives.script-src} "'self' cdnjs.cloudflare.com"
    connect-src = "'self' twitter.com *.xing.com"
  }
}

If I disable the CSP filter, I'm able to load the script. With it enabled, I get the following error in Chrome:

Refused to load the script 'http://localhost:9000/static/js/main.291e8d2b.js' because it violates the following Content Security Policy directive: "script-src 'nonce-m7r6oxzmy1TvABLGWrCMAA==' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http: 'self' cdnjs.cloudflare.com". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

At first, the script-src was:

    script-src = ${play.filters.csp.directives.script-src} "cdnjs.cloudflare.com"

... but I tried adding 'self' - not really knowing what I'm doing:

    script-src = ${play.filters.csp.directives.script-src} "'self' cdnjs.cloudflare.com"

Upvotes: 0

Views: 468

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3455

Please read https://content-security-policy.com/strict-dynamic/. Adding 'strict-dynamic' to you policy disables http: https: 'self' 'unsafe-inline' and 'unsafe-eval'. This is added in the filter for backward compatibility for browsers that don't understand 'strict-dynamic'.

You will either have to build your own script-src directive without the provided filter, or make your referenced code adhere to 'strict-dynamic' by providing the correct nonce value.

Upvotes: 0

Related Questions