Refused to connect to URL because it violates CSP - javascript

I'm building a program that uses helmet as a security layer on the server side. I fetch from the GitLab API. And I use socket.io to communicate with gitlab. I also use ngrok to get a temporary url for gitlab to send requests to while I work on localhost.
When opening the application, every few seconds I get this error:
Refused to connect to 'https://.ngrok.iosocket.io/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
Why does this happen? I tried to add the ngrok url as connect-src but that didn't help.
This is what my helmet CSP looks like:
app.use(helmet())
app.use(
helmet.contentSecurityPolicy({
directives: {
...helmet.contentSecurityPolicy.getDefaultDirectives(),
'script-src': ["'self'", 'code.jquery.com', 'cdn.jsdelivr.net', "'unsafe-eval'"]
}
})
)

Related

unsafe eval error while building react app chrome extension

I have an chrome extension that renders a react app in a sidebar (iframe) upon clicking on the extension icon.
The react app is being built using webpack (configured with create-react-app with craco)
I'm having the following error while trying to open the extension:
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
The react app code is inside src dir and the extension code in the public dir.
And I'm loading the extension from the build directory.
I did try to add devtool: 'cheap-module-source-map' as mentioned in this post to my craco.config.js
and also adding the following csp to my manifest.json
"content_security_policy": {
"extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
}
but it did not resolve the issue.

Azure Static Web App (ReactTS) - CSP blocks loading resource from API

My react typescript app fails to load resources from API and it returns this error:
Content Security Policy: The page’s settings blocked the loading of a resource at http://api.xxxxx.com/v1/blogs (“default-src”).
I am using axios and this is how my request looks like:
const headers = {
'Content-Type': 'application/json',
'Content-Security-Policy': 'default-src \'self\'',
'Access-Control-Allow-Origin': '*',
};
const { data } = await this.$http.get<Item>(url, { headers });
I also added this line in the index.html
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
It allows in dev mode, but I deployed using azure static web apps and that is where it fails loading the resource, I was thinking if it has to do with any azure configs?
Edit1
Tried all the suggestions from this question but haven't solved the problem.

ExcelJS: "Uncaught EvalError: 'unsafe-eval' is not an allowed source of script in the following Content" in Angular App

I have deployed Angular Application that uses ExcelJS library on IIS server. My current security policy forces me to return below header in IIS Http Response
content-security-policy: script-src 'self';img-src 'self'
With this setting, angular app is not loading and giving following error.
exceljs.js:87162 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
Is there any way to override Http Response security Policy. I tried to add content security policy using
But it did not work.
Could anyone please suggest how to run ExcelJS with strict content security policy?
Resolved by using below Steps:
First include import regenerator-runtime before exceljs import
import 'regenerator-runtime/runtime';
import { Workbook } from 'exceljs';
2nd go to tsconfig.json and include bare version of exceljs path after "compileOnSave":false
"exceljs": [
"node_modules/exceljs/dist/exceljs.bare.min.js"
]

API request different in dev mode than in prod mode

I have a vue.js cli client which consumes an API which resides on Azure (I have developped both client and API).
When I run the client in development mode (npm run serve) my API is correctly responding with Status Code 200. However, when I build the production version (npm run build) and run the dist version locally (serve -s dist), my API call is rejected (400 bad request).
It seems that the build process is doing compiling something differently.
My ApiService.js code snippet:
import axios from 'axios'
const apiURL = 'https://my-api.azurewebsites.net/'
const apiClient = axios.create({
baseURL: apiURL,
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
})
userLogin(credentials) {
return apiClient.post('/login', credentials)
}
This is the diff of the two API calls
When I call the API in production mode the browser reports a cors issue:
Access to XMLHttpRequest at 'https://my-api.azurewebsites.net/login' from origin 'http://www.mysite.ch' 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.
I spent many ours on the web to find a solution, but I was not successful. Any hints are welcomed.
I suspect it is working locally because your local domain is passing the CORS request. Ultimately this is just a CORS configuration issue. Your production domain has not been whitelisted. I'm not sure what your back-end is or how Azure affects it, but you need to whitelist your production domain for API consumption.
This is an example of setting a CORS policy in Express: https://flaviocopes.com/express-cors/
Just make sure you don't allow ALL origins as that is a security risk.

AngularJS CORS issue in Chrome - No 'Access-Control-Allow-Origin' header is present on the requested resource

I'm doing a little exercise to familiarise myself with AngularJS and I have my app running on http://127.0.0.1:9000/ after I execute the necessary grunt task. Now I wish to write/teach myself how to allow a Authorization/Authentication request (basically a login form). I have a seperate project that has a REST API, this is running on http://127.0.0.1:3000/ - notice the difference in port numbers. The exercise is hosted on my local machine so I wish to use CORS for my requests as browser restrictions aren't an issue and the app is for my own amusement. In my angularJS app I have included the following code in my config to allow CORS requests:
// set up CORS...
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
In my Rest API / Node Project I include the CORS middleware available from https://www.npmjs.org/package/cors and I have enabled CORS for all requests, I have included the library like so:
cors = require('cors')
and then...
app.use(cors()); // this is in my app.configure
When I test the API using the Websore REST tool the data I desire is retured however when trying to access this is my AngularJS app the Chrome JavaScript console gives me the following error:
No 'Access-Control-Allow-Origin' header is present on the requested resource
Is there anything I have missed with setting up CORS for AngularJS? Thanks in advance.
Phew, I seem to have fixed in... In my app I needed to put the requirements in the following order:
app.use(cors());
app.use(app.router);
The app.use(cors()); must come before the app.use(app.router);

Categories