<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&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.
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