We Keep Coding

CSP violation despite using the correct meta tag

Below is the meta tag that I've included in the header in order to bypass CSP and allow the 'axios' cdn script:
block append head
meta(http-equiv="Content-Security-Policy", content=" script-src 'self' https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.2/axios.min.js")
However, I get the following error
Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.2/axios.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.

Browser refuses to execute inline script

I'm running vue3 app using vite.
I want to add this script <script src="https://js.stripe.com/v3"></script> to my index.html; in order to handle payments with Stripe.
But I face these error in console:
VM262:5 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-GEy81O1cBXMUtzNmiNgydJFrTMOlLkoqKvaHpNDLcrA='), or a nonce ('nonce-...') is required to enable inline execution.
I did some couple of researches and with the help of official documentation; find out that we need to add meta tag that allows this action:
<meta
http-equiv="Content-Security-Policy"
content="connect-src 'self' https://api.stripe.com ws://127.0.0.1:3000; frame-src 'self' https://js.stripe.com https://hooks.stripe.com; script-src 'self' https://js.stripe.com 'unsafe-inline'"
/>
But nothing changes...
First of all, why CSP is enabled in my project (Because I didn't see same problem in Stripe videos in Youtube) and then how can I fix that?
Thanks

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'" when page refreshed

I have a Node/React app and get this error when I refresh the page in my production build, for all routes apart from "/", and a blank page is shown.
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'". Either the
'unsafe-inline' keyword, a hash
('sha256-eE1k/Cs1U0Li9/ihPPQ7jKIGDvR8fYw65VJw+txfifw='), or a nonce
('nonce-...') is required to enable inline execution.
Page refreshing functions normally in my local build.
I have seen a similar issue here:
Inline script because it violates the following Content Security Policy directive: "script-src 'self'"
and so have tried the INLINE_RUNTIME_CHUNK=false, which made no difference, and when I tried to add the cross-env, I got a CORS error. I don't really understand why cross-env helps or why it could be causing my requests to be blocked by CORS.
Does anyone have any advice? Or let me know if you need more information about my setup.
Thanks!

Chrome extension error when adding script tags to html

My problem is, when developing a chrome extension, I am getting error;
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self' blob:
filesystem: chrome-extension-resource:". Either the 'unsafe-inline'
keyword, a hash
('sha256-+BWoieEB23JsqONQi994gklHUNPq5RCtit+I45ejZPU='), or a nonce
('nonce-...') is required to enable inline execution.
When I try to add to the html.
What can I do?

Google Analytics Content Security Policy

I have the Content Security Policy:
default-src 'none';
style-src 'self';
script-src 'self' https://www.google-analytics.com;
img-src 'self' https://www.google-analytics.com;
connect-src 'self';
On my page I have put the inline GA code into an async script:
<script src="/javascript/ga.js" async></script>
This causes a CSP error:
Refused to load the script 'data:application/javascript;base64,KGZ1bmN0aW9uKCkgewoJLy8gaHR0cHM6Ly9kZXZl…07Cgl9OwoJZ2EucmVtb3ZlID0gbm9vcGZuOwoJd2luZG93W2dhTmFtZV0gPSBnYTsKfSkoKTs=' because it violates the following Content Security Policy directive: "script-src 'self' https://www.google-analytics.com".
Is there any way to serve this script from a JS file, and if not how would I need to change the CSP?

Google Analytics is CSP-compatible. The base64-encoded data: blob OP is seeing is being injected by the uBlock Origin extension. To verify, disable it/try incognito. IIRC, this is due to an "experimental/unbreak" setting in the extension.
Please resist the temptation to whitelist data: in script-src. That would make the policy completely useless for XSS mitigation, since an attacker could just inject <script src="data:text/javascript,alert(1)"></script> to execute Javascript.

Please see Michele Spagnuolo's answer and upvote.
This is caused by uBlock Origin and it is because data URLs are not whitelisted:
script-src data:;
There is no point in doing this as this could leave your application vulnerable should untrusted data be used as URLs anywhere within your application, or if the attacker can inject tags that use such URLs. This of course depends on the injection point and which characters are allowed.
Of course you should be whitelisting any user entered URLs (e.g. make sure they start with http:// or https://), however as CSP is defence-in-depth measure you probably don't want to weaken it too much.
The upshot is that you're weakening your CSP by doing this in order to prevent a CSP report or error from being triggered.