I'm building a micro-frontend web app with single-spa and am trying to set up import map overrides on my deployed site.
I'm getting the following console error when trying to load a micro frontend script from localhost
script-load.js:86 Refused to load the script 'http://localhost:8085/whatever.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I have the following Content-Security-Policy in my HTML:
meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https:; object-src 'none';"
I was under the impression that script-src localhost:* would allow overriding the MFE scripts with scripts I had running locally.
Keep the import map like this don't add http before
<script type="systemjs-importmap">
{
"imports": {
"#dell/react1":"//localhost:8080/test-react1.js"
}
}
</script>
I recently pushed an application to production on Heroku. It is a combined Ruby on Rails (API) and Angular application.
I pushed the Angular version to a separate isolated (Angular only) Heroku build, and the images and functionality work as expected.
On the integrated Angular Rails version, I am getting the following error:
Refused to load the image 'https://i.ibb.co/R0VHJbd/ds.png' because it violates the following Content Security Policy directive: "img-src 'self' data: https://www.google-analytics.com".
I am only getting this error on the combined Angular Rails to build, but not on the Angular only build.
I tried adding several combinations of the <meta http-equiv tag, including
<meta http-equiv="Content-Security-Policy"
content="
worker-src https:;
child-src https: gap:;
img-src 'self' https: data:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
But all of these still do not work in rendering the images.
I am using a symbolic link to render the Angular portion in /public for Rails
For reference, these are my live builds:
Angular only build on Heroku
Angular and Rails build on Heroku
I used helmet to deploy one of my node projects to heroku: Here is the setting:
app.use(
helmet.contentSecurityPolicy({
directives: {
// "default-src" used as fallback for any undeclared directives
"default-src": ["'self'"],
// I have stripe_set up
"script-src": ["'self'", "'unsafe-inline'", "js.stripe.com"],
"style-src": ["'self'", "'unsafe-inline'", "fonts.googleapis.com"],
"frame-src": ["'self'", "js.stripe.com"],
"font-src": [
"'self'",
"fonts.googleapis.com",
"fonts.gstatic.com",
"res.cloudinary.com/",
],
"img-src": ["'self'", "data:", "https://res.cloudinary.com"],
},
reportOnly: true,
})
);
This article explains how to set up for ruby_rails:
https://blog.sqreen.com/integrating-content-security-policy-into-your-rails-applications-4f883eed8f45/
You can use this package for ruby-rails : https://github.com/github/secure_headers
Note that the configuration you see is just a sample, depends on what you are implementing in your code, you have to fill the fields.
Could it be that you need to "sanitize" that external url image?
Try to add domething like this in the component you have the link to the image("https://i.ibb.co/R0VHJbd/ds.png").
import { DomSanitizer } from '#angular/platform-browser';
constructor(protected _sanitizer: DomSanitizer) {}
public getUrl(id: string) {
const urlSanitazed = `https://i.ibb.co/${id}/ds.png`; //Assuming that 'R0VHJbd' is the id in your example
return this._sanitizer.bypassSecurityTrustResourceUrl(urlSanitazed);
}
And in the HTML you use the img doing somethink like this:
<img
[src]="getUrl(id)"
></img>
Try the following tag, it did the trick for me.
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">
Try this tag:
<meta http-equiv="Content-Security-Policy" content="default-src * gap:; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; img-src * data: blob: android-webview-video-poster:; style-src * 'unsafe-inline';">
I'm getting this error:
Access to XMLHttpRequest at 'file:///Users/jonathanguerrero/Documents/GitHub/scoreboard_proj/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
This is my code:
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="./app.js"></script>
</body>
</html>```
install Live server extention on your editor then run it. and it will work
I am attempting to deploy a react app to Heroku. I have a NodeJs/Express API and it is serving my app created with create-react-app.
I am trying to display images in an tag from an external API (https://www.thecocktaildb.com) on my site and I continue to receive the following error in production:
Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:".
I have tried to get around this using many variations of the following code snippet in my public/index.html file but nothing has worked so far.
<meta
http-equiv="Content-Security-Policy"
content="img-src 'self' https://www.thecocktaildb.com data:;"
/>
I have run out of things to try and cannot find a solution anywhere. Please help.
https://stackoverflow.com/a/40360666/11624647
try add in your tag
img-src * 'self' data: https:
code:
<meta http-equiv="Content-Security-Policy" content="default-src *;
img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
I get the following error when I try to load the website I am creating
Refused to load the image 'http://167.71.89.74/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.
It looks like my attempts to fix the error change the X-Content-Security-Policy, but not the Content-Security-Policy.
I am using a simple Express server to load the page requests.
I found this question and added a meta tag to my Index.html, but that didn't fix the error.
violates the following Content Security Policy directive
Here is the meta tag I added
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'">
I also tried changing my Express code to do a setHeader as described in the answer to this question
nodeJS https - unable to set Content-Security-Policy
Here is my setHeader code
app.use(function(req, res, next) {
res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';");
return next();
});
I then found out about Helmet which has a module that allows you to set content security policy. Here is my Helmet code
const csp = require('helmet-csp');
app.use(csp({
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'"],
connectSrc: ["'self'"],
imgSrc: ["'self'"],
styleSrc: ["'self'"]
}
}));
When I run the following curl command
curl http://167.71.89.74/ --include
I get this
HTTP/1.1 404 Not Found
Content-Security-Policy: default-src 'none'
X-Content-Security-Policy: default-src 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'
X-WebKit-CSP: default-src 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 139
Date: Fri, 09 Aug 2019 19:53:14 GMT
Connection: keep-alive
It looks like my code is setting the X-Content-Security-Policy, but not the Content-Security-Policy.
To fix my error, do I need to make some other change to set the Content-Security-Policy in addition to the X-Content-Security-Policy?