5

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/popper.js@1.16.0/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.

Melanie Palen
  • 2,645
  • 6
  • 31
  • 50
M. Guerrero
  • 85
  • 1
  • 1
  • 6

2 Answers2

1

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>
granty
  • 7,234
  • 1
  • 14
  • 21
  • Hello, thanks for the response. I have access to the htaccess file. How do I add the script-src directive? Do I just copy and paste `` in the file? – M. Guerrero Sep 20 '20 at 06:16
  • You have already connect in HTML code, in the section. But it's used without integrity= attribute. Script should have this attribute to be allowed via 'sha384-hash-value', just edit HTML-code. Otherwise, this script can only be allowed by hostname https:/ /use.fontawesome.com. You have to find where your CMS does issue CSP header and modify script-src there. – granty Sep 20 '20 at 13:38
0

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.

Halvor Sakshaug
  • 2,583
  • 1
  • 6
  • 9
  • I don't have any CSP response in the header or any meta tag CSP. I updated my question to show what's in my header and how I load the scrips. – M. Guerrero Sep 16 '20 at 15:24
  • You should include the response headers, you can find them in the network tab in developer tools. It should look like this: https://developer.mozilla.org/en-US/docs/Glossary/Response_header – Halvor Sakshaug Sep 16 '20 at 15:54
  • When I look at the network tab, the scrips says **Referrer Policy: no-referrer-when-downgrade**. Where do I add the response header? – M. Guerrero Sep 20 '20 at 06:29
  • Referrer Policy is an unrelated header. If there are any Content-Security-Policy headers in relevant responses you should add them to your question. – Halvor Sakshaug Sep 21 '20 at 07:07
  • @M. Guerrero, [here](https://stackoverflow.com/questions/64060894/trouble-with-content-security-policy/64068629#64068629) is tutorial how so see CSP HTTP response header. – granty Feb 06 '21 at 17:18