I am developing a Chrome Extension based on manifest v3 and can't get React dev tools to work.
Here is what I did:
yarn add -D react-devtools
Add script tag to page of extension:
<script src="http://localhost:8097"></script>
Add content security policy to the manifest file:
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self'; unsafe-inline 'localhost';"
}
Error I am getting:
Refused to load the script 'http://localhost:8097/' because it violates the following Content Security Policy directive: "script-src-elem 'self'".
I have tried all kinds of variations in unsafe-inline and nothing seems to work.
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 am getting this error when I'm trying to do <script src="https://savehut.xyz/files/file.js"></script> with a chrome extension:
Refused to load the script 'https://savehut.xyz/files/file.js' 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 have this in my manifest.json file: (it's manifest v3 btw)
"content_security_policy": {
"script-src": "'self' 'unsafe-eval' https://cdn.jsdelivr.net/* https://savehut.xyz/* 'unsafe-inline';"
}
jsdelivr works, but savehut.xyz doesn't.
btw, the file location isn't /files/file.js, that's just an example thing
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?