We Keep Coding

Why CSP header block jQuery on dev server, but work on localhost?

Hello we try to implement CSP header to our Angular application and I faced a problem with jQuery. CSP blocked jquery because it executes inline script, which is not allowed by my rules, 'unsafe-inline' in script-src not added. But on localhost everything works fine, on dev server not. Why its happend ? And how can I allow to work jquery scripts without 'unsafe-inline'. Script file loaded from same origin not from cdn.
Error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'nonce-11111' https://*.website.com http://cdn.heapanalytics.com". Either the 'unsafe-inline' keyword, a hash ('sha256-wW7QqtXdIoLePBBqZfs1uttj5IW0GdlgNOmzyyPk7Xg='), or a nonce ('nonce-...') is required to enable inline execution.
Code with error:
function b(e, t, n) {
var r, i, o = (n = n || E).createElement("script");
if (o.text = e,
t)
for (r in c)
(i = t[r] || t.getAttribute && t.getAttribute(r)) && o.setAttribute(r, i);
n.head.appendChild(o).parentNode.removeChild(o) // this line
}
CSP rules:
<meta
http-equiv="Content-Security-Policy"
content="
default-src 'self' https://*.website.com https://s3.amazonaws.com/bucket/ https://bucket.s3.amazonaws.com/;
script-src 'self' 'unsafe-eval' 'nonce-11111' https://*.website.com http://cdn.heapanalytics.com;
style-src 'self' 'unsafe-inline' https://*.website.com;
font-src 'self' https://*.website.com;
img-src 'self' https://*.website.com https://s3.amazonaws.com/bucket/ https://heapanalytics.com data:;"
/>
Nonce used for script in root html for analitics. I tried hash, but it's also not work.

It is because .createElement("script") tries to create script (unsafe inline) which doesn't have nonce neither hash. You might be looking for CSP - Strict dynamic which specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script. (source: MDN)
You also asked "Why its happend?"
It's very hard to tell what and why a particular call is made without a code sample, but you could find out more information in this question: jQuery 3.1.1 violation of CSP directive

Content Security Policy: 'self' is blocking other included sources

I have these two inline script tags:
<script async defer src="https://apis.google.com/js/api.js"></script>
<script async defer src="https://accounts.google.com/gsi/client"></script>
note: I tried specifying both the host only (https://apis.google.com) and the full URL.
And I added the following CSP header:
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://apis.google.com/js/api.js https://accounts.google.com/gsi/client">
This is supposed to allow me to include scripts from the origin and said two sources. However, I still receive the following error:

The problem is most likely that there are now two or more policies active. They can be defined in both meta tags and as response headers. Any content needs to pass all policies, and adding another policy can only make it stricter. One policy is "script-src 'self'" while your policy is "script-src 'self' https://apis.google.com/js/api.js https://accounts.google.com/gsi/client". Combined they will be equal to the first one. You need to figure out where the other policy is set and modify or disable it. It could be set by a framework, webserver, proxy, load balancer etc...

How to add the Content Security Policy to load external JS files from CDN in ExpressJS?

In ExpressJS, the HTML file is loaded as follows,
app.use(express.static(__dirname + '/src/templates/'));
And in the HTML, this is my meta tag with Content Security Policy,
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdnjs.cloudflare.com 'unsafe-inline' 'unsafe-eval' fonts.gstatic.com fonts.googleapis.com kit.fontawesome.com; img-src 'self' data:; object-src 'none'; require-trusted-types-for 'script'; script-src 'self' cdnjs.cloudflare.com">
I'm trying to load the following JS files from external sources,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a4ff515084.js" crossorigin="anonymous"></script>
but I've specified them in the CSP meta tag, but still, I'm getting the following error and the external JS files are not getting loaded.
and I can see some issues,
Any help on this would be greatly appreciated.

You have 2 Content Security Policies at the same time:
the first one through <meta http-equiv="Content-Security-Policy" content="...">
the second one is published by Helmet 4 (it has default CSP enabled).
Directive rules from multiple CSPs are combine with logical "AND" therefore more restrictive CSP is acts.
Use Helmet to configure CSP HTTP header (preferred way), or use meta tag, bot not both at the same time.

Custom script injection

Can I inject custom JS in Microsoft Teams? When I tried injecting it says
Refused to load the script 'xxxxxxxxxx.js' because it violates the following Content Security Policy directive: "script-src *.protection.outlook.com 'nonce-yaXPKdhE1aa/JhA/PFsoyw==' 'report-sample' 'self' 'unsafe-eval' 'unsafe-inline' blob: *.office.net *.office365.us *.cms.rt.microsoft.com *.delve.office.com *.teams.microsoft.com *.onenote.com *.presence.skype.com *.streaming.mediaservices.windows.net *.trouter.io ajax.aspnetcdn.com amp.azure.net.
Of course, It's a genuine error. My question is that is there any ethical, legal way to inject even if it requires permission from the admin. In short, Is there any right way to do it?

How to change Content Security Policy directive to allow for addThis widget?

I am making a site that uses webpack.
I am about to launch it and I want to put on addThis share widget. I am adding the addThis code in the index.html right before closing body tag as advised by addThis. Like this:
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-
###MY_NUMBERS###"></script>
</body>
this generates the following error in chrome-inspect console:
Refused to load the script
'http://s7.addthis.com/js/300/addthis_widget.js' because it violates
the following Content Security Policy directive: "script-src 'self'".
I have read up a little on it and it does not seem to work to seperate addThis to another js-file and save that locally to load it to DOM.
I tried add this to my manifest.json:
"content_security_policy": "script-src 'self' http://s7.addthis.com/js/300/addthis_widget.js; object-src 'self'"
No success. Is there a way to override CSP settings to allow for addThis-widget?

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'
'unsafe-eval' https://*.addthis.com https://addthis.com;child-src 'self' 'unsafe-
inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; object-src 'self'
'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; script-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com; img-src
'self' 'unsafe-inline' 'unsafe-eval' https://*.addthis.com https://addthis.com;">
Adding this to your header will allow the addthis widget to load. Might not be secure, which will defeat the purpose of Content-Security-Policies...

I always set my CSP through the .htaccess if it's available.
Here are some good tips: https://content-security-policy.com/
You're basically there, but unsure how it works with manifest.json.
Try similar in .htaccess:
Header set Content-Security-Policy "default-src 'none'; script-src 'self' http://*.addthis.com
Some things to be aware of with .htaccess files: https://www.digitalocean.com/community/tutorials/how-to-use-the-htaccess-file
Also, using a CSP, you will need to specifiy all the external sources you use basically.
It's worth looking into CSPs in more detail and being aware of all the various sources of images, fonts, etc etc. you use.
Any problems, let me know and I'll expanded further.