because it violates the following Content Security Policy directive

user_16703162 0
Viewed 2311

I am in a plain html file.

I have three cdn's in my application and one static server file:

 <!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="/static/js/main.js"></script>

And I am getting the following errors:

  localhost/:35 Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' https://localhost:* 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

localhost/:1 Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.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.

localhost/:1 Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

localhost/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.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.

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

localhost/:1 Refused to load the script 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.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.

localhost/:1 Refused to load the script 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://localhost:* 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

After scratching my head and using SO:

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

But it also didn't work.

Sorry if I am being stupid. I touched frontend development after a decade. What's the issue?

content-security-policy meta-tags html javascript
1 Answers

First let's break the problem down: You have 7 errors. The first is a style-src violation of your CSP and the rest are your 3 external scripts violation 2 different script-src directives each. Consequently there are 2 or more CSPs at play. You can define them in a meta tag as you have shown, but it could also be defined in a response header. You will need to locate all CSPs and modify them to fix your issues, as content need to pass every single CSP provided.

Your policy allows styles and scripts to load from the origin server and localhost and as inline script and style. You will need to allow the specific host names for your external sources as well, e.g. you'll need to add https://code.jquery.com or just code.jquery.com to script-src to allow loading scripts from that host.

user_92393110
Related