Cannot reference javascript file from html file

Question

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Generic title</title>
<link rel="stylesheet" href="./stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/css/pikaday.min.css">
</head>

Error in browser:

127.0.0.1/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I have the same issue referencing my own javascript files. I'm using express for my backend. I am trying to avoid using 'unsafe-inline' 'unsafe-eval'. If I disable the CSP from helmet it functions fine, but again I would like to avoid this.

Please don't show error-messages in images. Edit your question and add the messages as text. — kometen, Dec 12 '21 at 17:30
Does this answer your question? [Refused to load the script because it violates the following Content Security Policy directive](https://stackoverflow.com/questions/31211359/refused-to-load-the-script-because-it-violates-the-following-content-security-po) — Andrew Morton, Dec 12 '21 at 17:38
@AndrewMorton using 'unsafe-inline' 'unsafe-eval' is, at least according to what I've scene online, a very unsafe solution. I was hoping there was a better way to fix my error — DiMino, Dec 12 '21 at 17:42
@DiMino I suggest that you ignore the accepted answer and look at the other answers there. Of course, downloading code that you haven't thoroughly inspected from a source that you don't control is always risky, e.g. [Malicious NPM packages are part of a malware “barrage” hitting repositories](https://arstechnica.com/information-technology/2021/12/malicious-packages-sneaked-into-npm-repository-stole-discord-tokens/). — Andrew Morton, Dec 12 '21 at 17:46
@AndrewMorton I am using helmet for CSP so i guess I could disable it there? I mean it kind of defeats the purpose of me using it, so there is no way to fix it then? — DiMino, Dec 12 '21 at 17:51
@DiMino Something that results in a header of something like `content-security-policy: default-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net/npm/ https://cdnjs.cloudflare.com/ajax/libs/` would seem to be appropriate, but I am not an expert on this. — Andrew Morton, Dec 12 '21 at 18:05
@AndrewMorton Oh so it would only allow it from that singular source not all of them? And then I could keep helmet active as well? — DiMino, Dec 12 '21 at 18:07
@DiMino I predict that you will soon become more knowledgeable in this area than me... ;) [MDN: Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy). Favour the most restrictive options that work, such as "script-src" over "unsafe-eval". — Andrew Morton, Dec 12 '21 at 18:12
As @AndrewMorton pointed out [documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) is a thing, thank you for the help — DiMino, Dec 12 '21 at 18:21
The solution is obvious: Download those scripts and have your own webserver serve them. Don't compromise your CSP for this useless little convenience. — connexo, Dec 12 '21 at 18:26

score 0 · Answer 1 · answered Dec 12 '21 at 18:29

I had helmet incorrectly configured, I was blocking the sources I was attempting to reference in the html tag. Doing something like

app.use(
  helmet.contentSecurityPolicy({
    directives: {
    defaultSrc: ["'self'"],
    scriptSrc: scriptSources,
    scriptSrcElem: scriptSources,
    styleSrc: styleSources,
    connectSrc: connectSources,
    }
  })
);

instead where the constants have my sources defined in them allows me to safely use external javascript files without compromising my sites security

Cannot reference javascript file from html file

1 Answers1