I'm building a SPA using oidc-client to sign in to an IDP built using Identity Server 4.
The login redirections seems to work fine but on Firefox I'm getting the following CSP issues
Content Security Policy: Ignoring "'unsafe-inline'" within script-src or style-src: nonce-source or hash-source specified (unknown)
Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src 'unsafe-inline' 'sha256-VDXN0nOpFPQ102CIVz+eimHA5e+wTeoUUQj5ZYbtn8w='"). Source: !function(t){function __webpack_require_.... checksession:1
Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src 'unsafe-inline' 'sha256-VDXN0nOpFPQ102CIVz+eimHA5e+wTeoUUQj5ZYbtn8w='"). Source: window.devToolsOptions = Object.assign(w.... checksession:1
Load denied by X-Frame-Options: http://localhost:5007/home/error?errorId=a74accc61bb821ee1f42f7013a306e90 does not permit cross-origin framing. (unknown)
I'm not setting any CSP meta tags on my SPA and I'm wondering if I have to.
Digging a little bit it seems that oidc-client is adding an iframe into my application which points to the checksession page in Identity Server (which does include the CSP header "default-src 'none'; script-src 'unsafe-inline' 'sha256-VDXN0nOpFPQ102CIVz+eimHA5e+wTeoUUQj5ZYbtn8w='")
Can someone help me solving this or lead me into the right direction? My knowledge about CSP is very basic.
It was the Redux devtools addon trying to inject their code on the page.
Related
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.
I am trying to setup a google sign in in my web application using Adding Google sign-in resource
I added the below code to the relevant html file
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</body>
</html>
When I try to view the web app's page in a browser. I don't see the google sign-in button and when I inspect the page I see the following two errors
Content Security Policy: The page’s settings blocked the loading of a resource at https://accounts.google.com/gsi/client (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/mini-profiler-resources/includes.js?v=35a79b300ab5afa978cb59af0b05e059 (“script-src”).
I tried looking at resources on Content Security Policy to solve this issue and found that adding a source allow-list is the solution. Please refer this resource for where I found this solution. Where do I add this allow list specifically? What exact code should I add? If I am going in the wrong direction please point me to resources or instructions that will help to resolve this matter.
My dev enviroment in ubuntu 20.04 and the browser I am using is Mozilla Firefox. I am actually buidling one of my first ruby on rails applications.
Thank you for your time and effort.
Content Security Policy is an additional layer of web application's security, which is supported by most of the modern web browsers. It's main goal is mitigating a whole range of the client-side attacks on modern web applications (check this doc for more information: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
There are two ways of including Content Security Policy in your application. First is a HTTP header included in the server's browser. Assuming you are using Ruby on Rails, there is probably a few ways for setting this header.
You can configure CSP on the code level. You have to modify file: config/initializers/csp.rb:
SecureHeaders::Configuration.default do |config|
config.csp = {
default_src: %w('self'), # self-hosted resources allowed by default
script_src: %w(https://accounts.google.com), #here you have to include origins of all of your scripts
connect_src: %w('self'),
img_src: %w('self'),
font_src: %w('self'),
base_uri: %w('self'),
style_src: %w('unsafe-inline'),
form_action: %w('self'),
report_uri: %w(/mgmt/csp_reports)
}
end
I am not a Ruby developer, so I would recommend using that resource for further information: https://bauland42.com/ruby-on-rails-content-security-policy-csp/
You can also set CSP on the HTML's level, using the following meta tag:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src https://accounts.google.com; child-src 'none'; object-src 'none'">
The other way is setting a CSP header on the web server's level. For example, in nginx, you set it this way (in the server {} block of /etc/nginx/sites-enabled/your_conf (or other path - that depends on your nginx configuration):
add_header Content-Security-Policy "default-src 'self'; script-src https://accounts.google.com;" always;
Keep in mind that using default-src 'self' directive means, that you will also have to include all of the external resources in Content-Security-Policy - that includes fonts, images, styles etc.
I've just updated the Content-Security-Policy settings in the Web.Config file and added the Application Insights JavaScript snippet in my _Layout.cshtml.
Here is what the Content-Security-Policy in the Web.config looks like.
script-src-elem
'self'
'unsafe-inline'
'unsafe-eval'
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
*.mymapjs.com
script-src
'self'
'unsafe-inline'
'unsafe-eval'
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
*.mymapjs.com
mymapjs.com is not longer working properly, my maps aren't showing up, and my browser is upset with me yelling at me in red letters with the error:
Access to XMLHttpRequest at 'mymapjs.com' from origin 'mywebsite.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
When I remove the https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js url from the Web.config Content-Security-Policy I get the warning:
Refused to load the script 'https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js' because it violates the following Content Security Policy directive: "script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://*.mymapjs.com use.other.net use.other.net/ https://myfont.net/it.js
It turns out I enabled the enableCorsCorrelation = true in the Application Insights configuration.
So then I tried updating the correlationHeaderExcludedDomains values with a wild card value for the mymapjs.com.
correlationHeaderExcludedDomains:
[
'myapp.azurewebsites.net',
'*.queue.core.windows.net',
'*.mymapjs.com'
]
The wild card alone didn't work. I had to strictly type the JS libraries urls AND have the wildcard for it to work properly. It wants the scripts that are directly being requested from the _Layout.cshtml as well as the ones generated from the JS libraries.
correlationHeaderExcludedDomains:
[
'myapp.azurewebsites.net',
'*.queue.core.windows.net',
'*.mymapjs.com'
'https://mymapjs.com-core-events.js'
'https://mymapjs.com-services.js'
'https://mymapjs.com-ui-services.js'
]
If anyone else gets caught up figuring this out, I hope this helps.
I have a single page application (built in .net core MVC 2.2), where html section are loaded on the fly.
On main document, added CSP policy with a dynamically generated header looks like:
Content-Security-Policy: script-src 'self' 'nonce-I64vb811BxRNGV9Xf0pM'
Then comes a page section loaded via jquery ajax load function. page section contains a script (from src) with a nonce. Page section served with CSP header looks like
Content-Security-Policy: script-src 'self' 'nonce-ci5TQsyidT8x2jwBLRHS'
all good but browsers (chrome, safari blocking the script), with message:
jqueryscriptsbundle.js:formatted:43 Refused to execute inline script
because it violates the following
Content Security Policy directive: "script-src 'self' 'nonce-I64vb811BxRNGV9Xf0pM'
So browser is comparing nonce of script i.e. ci5TQsyidT8x2jwBLRHS with root/main page nonce value I64vb811BxRNGV9Xf0pM hence script blocked.
Is it correct behavior ? What can I do to make it work?
Your initial CSP, loaded with the page, provides a nonce. What you're trying to do is add another nonce, via Ajax, after the initial page load. CSP explicitly doesn't allow this; that's not a bug -- it's the entire point.
What you might do is allow a script-src of strict-dynamic. This allows you to authorize a script, and anything loaded by that script is also authorized. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
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.