CODEWITHSUNDEEP
javascripthtmlcsscontent-security-policy
M. Guerrero
M. Guerrero

Reputation: 95

Refused to load scripts because it violates the following Content Security Policy directive

All of the scripts that come externally have this error:

Refused to load the script 'https://code.jquery.com/jquery-3.4.1.slim.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://xxxx.com https://ajax.googleapis.com 'sha256-V8KVL4e3S2PwNnwHfycBcJMRnRhyyPiEpdxcGNLxzvk='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I search for this error, but all the solutions have a 'unsafe-eval' 'unsafe-inline.

From my understanding, I need to write a meta tag. Something like this:

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

I removed the unsafe-inline and unsafe-eval, but the issue still persists. Any idea?

This is what's in my header:

<head>
    <link rel="icon" href="img/am.png">
    <meta charset="utf-8">
    <!-- Required meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,700i" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <title>Title</title>

</head>

Before my closing body tags, I have more included scripts

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

It's a total of four scripts that are being blocked. One in the header(frontawesome) and the other scripts before the closing body tag.

Upvotes: 6

Views: 31654

Answers (2)

granty
granty

Reputation: 8496

script-src 'self' https://xxxx.com https://ajax.googleapis.com 'sha256-V8KVL4e3S2PwNnwHfycBcJMRnRhyyPiEpdxcGNLxzvk='

means that your CMS (or server) already issues Content Security Policy some way:

  • PHP header() function
  • .htaccess file
  • < meta http-equiv="Content-Security-Policy")
  • web-server config (low probability)

you need to find where it's done (In CMS it should be plugin to manage headers). Then add to the script-src directive:

  • EITHER host-sources (less secure if CDNs with public upload):

    https://use.fontawesome.com https://code.jquery.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com

  • OR single quoted hashes from integrity attributes of your scripts (more secure):

    'sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n' 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo' 'sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6' 'sha384-0AJY8UERsBUKdWcyF3o2kisLKeIo6G4Tbd8Y6fbyw6qYmn4WBuqcvxokp8m2UzSD'

  • OR mixed:

    'sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n' 'sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo' 'sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6' https://use.fontawesome.com

in the second option you have to add integrity= attribute to script in the head section:

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"
integrity="sha384-0AJY8UERsBUKdWcyF3o2kisLKeIo6G4Tbd8Y6fbyw6qYmn4WBuqcvxokp8m2UzSD"
  crossorigin="anonymous"></script>

Updated: The third option (mixed rule) was added in case it is impractical to change below script in the <head> sect (integrity attr addition):

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Upvotes: 1

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3455

You probably have a CSP response header set in addition to your meta tag CSP. Multiple CSPs will only make it more strict as anything has to pass both CSPs. You will need to modify the header CSP and add code.jquery.com to script-src.

Upvotes: 0

Related Questions