We Keep Coding

Content Security Policy violation on external Js Script

sorry for bad description. I have an app that works fine on localhost and test server. On the machine that has connection to test server when I try to access the app via server's IP and port I can access the app too. But with a rerouting that points to my apps test server IP and port I get below 2 errors in a script that I use from a different host. Test server doesn't has outside connection allowed but related script host has been allowed. I have tried adding CSP headers to ISS but it didn't work. How can I resolve this issue or how can I get more details about it. Any help would appreciated. Thank you.
1st error:
Refused to create a worker from
'blob:https://redirecteddomain.com/04891805-36bb-45f7-a4e9-7cb58f25a3bf'
because it violates the following Content Security Policy directive:
"default-src https: data: 'unsafe-inline' 'unsafe-eval'". Note that
'worker-src' was not explicitly set, so 'default-src' is used as a
fallback.
2nd error:
Uncaught DOMException: Failed to construct 'Worker': Access to the
script at
'blob:https://redirecteddomain.com/04891805-36bb-45f7-a4e9-7cb58f25a3bf'
is denied by the document's Content Security Policy.
Script that got the error:
<script src="https://scriptsource.com/script.php?lang=en"></script>
Due to privacy issues domain names are replaced.
Update: So I have tried to download and use the script locally and there were couple of API calls in the javascript file and it gave the same error again.
Update-2: I have checked through the script file and found the lines that are causing the issue, I have added "default-src 'self' 'unsafe-inline'; worker-src blob:;" meta header but still get the same error
const e=window.URL||window.webkitURL,n=new
Blob(['importScripts("'+Dt.faceworker+"?v="+t.replace(/\./g,"")+'");'],
{type:"application/javascript"}),o=e.createObjectURL(n);
Wt=new Worker(o)

The CSP on your page doesn't allow "blob:". Adding another CSP in a meta tag can only impose restrictions, it can't change the other CSP that is likely there and served in a response header. You will likely need to modify the original CSP adding blob: to default-src or worker-src.

Refused to load the image 'http://localhost:8080/favicon.ico' because it violates

I'm working on a Javascript App food2fork. But I get an error when AJAX call API promise fulfilled and render the results (Recipes). But when I click one of them it moves to the next page and say
Cannot GET /47746
and give an error on the console
Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback".
How to get rid of this kind of error?

This is because a Content Security Policy (CSP) header is set somewhere in your application.
Content Security Policy (CSP) is an added layer of security that helps
to detect and mitigate certain types of attacks, including Cross Site
Scripting (XSS) and data injection attacks./.../
A CSP compatible browser will then only execute scripts loaded in
source files received from those allowlisted domains, ignoring all
other script (including inline scripts and event-handling HTML
attributes).
As an ultimate form of protection, sites that want to never allow
scripts to be executed can opt to globally disallow script execution. [edit: hence the "default-src 'none'" policy]
More on CSP: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
You can create a CSP with online tools, like
https://report-uri.com/home/generate
https://www.cspisawesome.com
A CSP with "default-src 'none'" means that nothing can be displayed/run on your domain - you have to "whitelist" the services/content that you allow (default-src is a fallback for other resource types that do not have policies of their own, so you have it set like none, then you have to add sources that are explicitly allowed).
A policy is described using a series of policy directives, each of
which describes the policy for a certain resource type or policy area.
WHAT YOU CAN DO
In your case, you may need a policy something like:
"default-src 'none'; img-src 'self'".
I'm pretty sure though, that as you go forward you'll need more rules, so check out the sources and the online CSP generators, so you won't have a hard time.
OR you may
Remove the CSP (not advised - it's a security measure)
For development purposes, you may set Content-Security-Policy-Report-Only (this way the CSP does not stop your content to be displayed/run, but shows "what would have been done, if not set to only to report the problems". Don't forget to handle this in production environment!)
REFERENCE
CSP reference: https://content-security-policy.com
More on CSP: https://scotthelme.co.uk/content-security-policy-an-introduction/

It is possible to override/remove page Content Security Policy through the external script?

I'm write an external script for a single web page and i need to make one POST JSON request to another resource through this script.
However, when i do, it throws CSP error: "Refused to connect to <URL> because it violates the following Content Security Policy directive: "connect-src 'self'".
I looked into the web page and see meta tag which contain a Content-Security-Policy with CSP content. However, i tried manually add my <URL> to CSP connect-src content, but it is still not working.
Questions:
can i change CSP through the external script? How?
maybe any workaround for this?

The error message is saying the setting that needs to be changed:
it violates the following Content Security Policy directive: "connect-src 'self'"
So you need to set the 'connect-src' directive to something other than 'self', which might have been set by default.
You said you tried to add the URL that you're trying to connect to. That is not quite right - you need to add just the host part, rather than any of the path.
So the connect-src part of the CSP header should look like:
connect-src 'self' https://*.example.com
If you update your question with what you tried, if it still isn't working, the exact error could be diagnosed.

Refused to load the font '<URL>' because it violates the following Content Security Policy directive default-src ,so default-src is used as a fallback

I am creating a web app using the mean stack in angular 6 but I am getting below error message on the browser console.
"Refused to load the font '<URL>' because it violates the following
Content Security Policy directive: "default-src 'self'". Note that
'font-src' was not explicitly set, so 'default-src' is used as a
fallback."
Code:
getUsers() {
return this._http.get("/api/users")
.pipe(map(result => this.result = result.json().data));
}

Content security policy is a way for modern browsers, to define a set of restrictions when loading remote resources.
Response headers from the HTTP protocol can set those policies:
Content-Security-Policy header (official), X-Content-Security-Policy (supported by Mozilla Firefox and IE10) and X-WebKit-CSP (supported by Google Chrome and Safari) HTTP response headers with the list of Content Security Policy directives. (from seckit drupal module)
You can set different policies to different types of elements in the DOM (e.g <img>, <script>, <object>, <embed>, <iframe> and so on...), to restrict requests that originates from that element.
So you need to change 'self' to one of the following:
'none' - block content from any source
'self' - allow content only from your domain
'unsafe-inline' - allow specific inline content (note, that it is supported by a subset of directives)
'unsafe-eval' - allow a set of string-to-code API which is restricted by default (supported by script-src directive)
Wildcards (*) are allowed:
* - load content from any source
*.example.com - load content from example.com and all its subdomains
example.com:* - load content from example.com via any port. -
Otherwise, it will use your website default port

Adding 'self' and data: to the font-src works for me.
Content-Security-Policy: font-src 'self' data:;

font-src reference doc from MDN
The Content-Security-Policy header is set by your api. Check your api response for its value.
As per the error, I think your fonts are loaded from a different domain than your application domain. Unless your api whitelists that domain, your browser will not load the font.
Example:
Content-Security-Policy: font-src https://example.com/

just close all browser, clear cache and restart VSC or your code editor. Ir worked fro me.

REST API Error: Refused to connect to ... because it violates the following Content Security Policy directive:

I am trying to update my status on twitter using the REST API to "Update Status".
I am posting it on Twitter's own site, this is what I'm posting:
$.post("https://api.twitter.com/1.1/statuses/update.json?status=Hello")
However I get the error
Refused to connect to
'https://api.twitter.com/1.1/statuses/update.json?status=Hello'
because it violates the following Content Security Policy directive:
"connect-src graph.facebook.com pay.twitter.com
analytics.twitter.com upload.twitter.com 'self'".
Can anyone help? I'm just finding the twitter tutorial a bit confusing; all I want to accomplish is using an api that can easily send tweets. Do I need to do this in a chrome extension?

You need to add api.twitter.com to your CSP:
<meta http-equiv="Content-Security-Policy"
content="connect-src graph.facebook.com
pay.twitter.com analytics.twitter.com
upload.twitter.com api.twitter.com 'self'">
Not sure exactly what your current content security policy looks like, but the correct domain (api.twitter.com) needs to be added to it. This would be in your index.html, by the way.
If you want to see the docs, I'd check out the ones from MDN "Using Content Security Policy".
Edit
You can change the CSP in the manifest.json (read the docs):
{
...,
"content_security_policy": "[POLICY STRING GOES HERE]"
...
}