Content Security Policy blocking all third party images/js and other resources - content-security-policy

I have set content security policy via .htaccss as below. Now it blocks all third-party images/js and other resources that are not getting loaded on the website. We are using CDN as well
....
# Content Security Policy (CSP) HTTP Header
Header add Content-Security-Policy "default-src 'self';"

Related

Is it still possible to integrate Google Sign-In within a Chrome Extension?

I've been attempting to follow this guide to integrate Google Sign-In within my chrome extension, but I kept getting an error saying that,
Refused to load the script 'https://www.gstatic.com/firebasejs/8.0/firebase.js' because it violates the following Content Security Policy directive: "script-src 'self'```."
I then tried to include,
"content_security_policy": {
"extension_pages": "script-src 'self' https://apis.google.com; script-src 'self' https://www.gstatic.com; script-src 'self' https://www.googleapis.com; script-src 'self' https://securetoken.googleapis.com;"
}
in my manifest as stated in the aforementioned guide, but then I got the error,
'content_security_policy.extension_pages': Insecure CSP value "https://apis.google.com" in directive 'script-src'.
Could not load manifest.
I then removed the content security policy and tried to include the firebase.js file in my extension directly, but then now I get an error saying,
Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb944385' because it violates the following Content Security Policy directive: "script-src 'self'".
I don't think I'm doing the content security policy incorrectly, so my question is if it's still possible to integrate Google Sign-In within a Chrome Extension. My guess would be no and that it's related to how Manifest V3 will not execute remote code anymore, but I just wanted to double check to make sure that I wasn't doing anything wrong.

CORS policy error with front end and back end all on Azure

We have an Angular web application running on Azure. The backend is Dot Net Core 3.1. The Authentication is done through Azure AD. What is happening is the following steps
User logs into the web site and navigates to a page. Everything is working as expected
The user logs out, but does not close the tab. The Logout screen is shown as expected
The user opens a new tab and navigates to the web site
The user is NOT prompted for a login and when the user navigates to page they get error
Access to XMLHttpRequest at 'https://login.microsoftonline.com/2aa666ca-a53c-4274-bfcc-41b83867d22a/oauth2/authorize?client_id=794424bb-0ad2-41f8-b007-b71ed576b793&redirect_uri=https%3A%2F%2Fmydomain.azurewebsites.net%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=637782164067215548.NzQ4MWQxNjgtYjdlZS00OTlmLWIwYzctM2NhZWRkZjdhMTZiYzdmNjljOTEtNTk3OS00NDlhLWEzZjgtODZkN2YyZDZmYzlh&state=CfDJ8IE9b1M0cDdJqtQPg1_KxRR0vlYAN1zOfKzhpzhdzqvcX_XGygV8nincOzoVYDPPyZWnbh5SrGMDZhQfmUDlO4wQ41v_7Q_gJCUHftetejZZQZTS7Uhn-IVBRysh36hvldRY2pxcZBKCQHLYkKMnR2my9R0TqsaqEAI4gGNUUHwa8fJnv4xj0lkMJq_DORhJS4AwLMhtQWGvuIp0gzQ_cGR0gjGZvMRMTaBZunGBDexThOzzbAyQJTCJuNxUUB_tvAm0cFEVWb3lTPYRgk1ARnagmg7a6GDFrCnXT7vT_3VJjUyMzrazbt1xeRtrs1AdlUIX1fnnFsGZPGUBA3kYvzTyEgVkm97FGBTPgeGZAP3W&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.5.0.0' (redirected from 'https://mydomain.azurewebsites.net/api/profileTypes?_=1642619606751') from origin 'https://mydomain.azurewebsites.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If the user refreshes the page, then they are forced to login and everything begins working again
I have tried adding in CORS as directed on other questions and other websites as follows
In the ConfigureService function of the startup.cs The following code is present
services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
builder
.WithOrigins(new[] { "http://YOUR_FRONTEND_ORIGIN" })
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
}));
In the Configure function of the startup.cs is the following code
app.UseCors("CorsPolicy");
I am confused as to why CORs would even come into play as everything is on the same Azure subscription, but I added the above code and it does not change anything. Searching the internet give mainly the same or similar implementations as above.
I am not sure how to proceed or even what questions to ask, so any help would be appreciated
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism which basically allows server to indicate any origins other than its original url or scheme or domain or port .But cors settings may also vary from different browsers which may cause this error.
In case of Azure App Service it sets “AppServiceAuthSession” cookie for authenticated session with browser. The web application may use XMLHttpRequest / AJAX request inside the app and the request sent may contain the AppServiceAuthSession cookie. When this cookie is still present in the browser and the web page pointing to the page of app may not be the original url and which might be the possible cause of error.When this cookie is not present in the request, Azure App Service will redirect the request to Azure AD for login that is why when you referesh it, it works.
If the browser is enabled with cors ,it makes a pre-flight cors check to the specified url and gets the access-control-allow-origin headers, we can modify this headers accordingly,if origin restriction is not required.
Try to insert the http protocol present in the asp.net Web Api backend, in the Web.config between the <system.webServer> </ system.webServer> tags,
Example:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
</system.webServer>
and you can try enable access to all origins from browser settings .
Please check this reference access to xmlhttprequest has been blocked by cors policy Code Example (codegrepper.com) if you can enable credentails to true and by using cors variable to use in app.use(cors).
References:
Cross-origin XMLHttpRequest - Chrome Developers
express - Angular CORS request blocked - Stack Overflow

Use external api with web extension manifest v3

I'm creating a web extension and I need to use google recaptcha in it. But when I try to import the library I get an error
Refused to load the script 'https://www.google.com/recaptcha/api.js?onload=onloadcallback&render=explicit' 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.
I tried to set my script src to authorize request to https://www.google.com
"content_security_policy": {
"extension_pages": "script-src 'self' 'https://www.google.com'; object-src 'self'"
},
but I got an error
'content_security_policy.extension_pages': Insecure CSP value "'https://www.google.com'" in directive 'script-src'.
It is still possible to use external script with manifest v3, and if yes what should I do ?

CORS - Enabled localhost origin on Azure API Management, but still receiving error

I'm trying to test retrieving data from my teams API that is configured via Azure API Management. I'm local hosting the client web app (a create-react-app project) that will be making calls to the API, and enabled CORS policies for my localhost origin in APIM.
I've added the inbound policies for All Operations in APIM:
I call the api using the same headers and method that's enabled in the CORS policy.
Yet I still get hit with the "No 'Access-Control-Allow-Origin' header is present on the requested resource."
I don't want a use a plugin since that doesn't really solve the large problem, and I can't use a wildcard because 'Allow-Credentials' must be set to true.
I've looked at so many versions of this question and nothing has helped. Does anyone know what I might be missing?
Restating derpirscher's answer for others: I needed to add Options to the allowed method because a preflight Options request is sent:
<cors allow-credentials="true">
<allowed-origins>
<origin>http://localhost:3000</origin>
</allowed-origins>
<allowed-methods>
<method>GET</method>
</allowed-methods>
<allowed-headers>
<header>content-type</header>
<header>accept</header>
<header>authorization</header>
<header>options</header>
</allowed-headers>
</cors>

How to allow external script to load in Chrome Extension popup.html via Content Security Policy?

Chrome is giving me the following error:
Refused to load the script 'http://domain.com/myexternalscript.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'"
Currently, in my manifest my Content Security Policy is as follows:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
How do I alter my security policy so that it can allow the script to run?
On a normal page, you could use
script-src 'self' 'unsafe-eval' domain.com; ...
but extensions only allow external scripts over HTTPS. You'll need to use
script-src 'self' 'unsafe-eval' https://domain.com;
and serve your script over HTTPS.
You must whitelist each external domain you want to use. You can use wildcards to match any subdomain: https://*.domain.com.
See Google's extension documentation on relaxing the default CSP for more information. See also MDN's page Using Content Security Policy.

Resources