Loading favicon icon from Express web server causes Content-Security-Policy violation - node.js

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?

Related

Content-Security-Policy refusing to load localhost script

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>

Using React Dev Tools with Chrome Extension based on manifest v3

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.

Cannot load images on production, violates Content Security Policy directive: "img-src 'self' data

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';">

create-react-app issue: Refused to load the image '<URL>' because it violates the following Content Security Policy directive:

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' *">

"Lighthouse was unable to download a robots.txt file" despite the file being accessible

I have a NodeJS/NextJS app running at http://www.schandillia.com. The project has a robots.txt file accessible at http://www.schandillia.com/robots.txt. As of now, the file is bare-bones for testing purposes:
User-agent: *
Allow: /
However, when I run a Lighthouse audit on my site, it throws a Crawling and Indexing error saying it couldn't download a robots.txt file. I repeat, the file is available at http://www.schandillia.com/robots.txt.
The project's codebase, should you need to take a look, is up at https://github.com/amitschandillia/proost. The robots.txt file is located at proost/web/static/ but accessible at root thanks to the following in my Nginx config:
# ... the rest of your configuration
location = /robots.txt {
proxy_pass http://127.0.0.1:3000/static/robots.txt;
}
The complete config file is available for review on github at https://github.com/amitschandillia/proost/blob/master/.help_docs/configs/nginx.conf.
Please advice if there's something I'm overlooking.
TL;DR: Your robots.txt is served fine, but Lighthouse can not fetch it properly because its audit can currently not work with the connect-src directive of of your site’s Content Security Policy, due to a known limitation which is being tracked as issue #4386 was fixed in Chrome 92.
Explanation: Lighthouse attempts to fetch the robots.txt file by way of a script ran from the document served by the root of your site. Here is the code it uses to perform this request (found in lighthouse-core):
const response = await fetch(new URL('/robots.txt', location.href).href);
If you try to run this code from your site, you will notice that a “Refused to connect” error is thrown:
This error happens because the browser enforces the Content Security Policy restrictions from the headers served by your site (split on several lines for readability):
content-security-policy:
default-src 'self';
script-src 'self' *.google-analytics.com;
img-src 'self' *.google-analytics.com;
connect-src 'none';
style-src 'self' 'unsafe-inline' fonts.googleapis.com;
font-src 'self' fonts.gstatic.com;
object-src 'self';
media-src 'self';
frame-src 'self'
Notice the connect-src 'none'; part. Per the CSP spec, it means that no URL can be loaded using script interfaces from within the served document. In practice, any fetch is refused.
This header is explicitly sent by the server layer of your by Next.js application, because of the way you configured your Content Security Policy middleware (from commit a6aef0e):
import csp from 'helmet-csp';
server.use(csp({
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", '*.google-analytics.com'],
imgSrc: ["'self'", '*.google-analytics.com'],
connectSrc: ["'none'"],
styleSrc: ["'self'", "'unsafe-inline'", 'maxcdn.bootstrapcdn.com'], // Remove unsafe-inline for better security
fontSrc: ["'self'"],
objectSrc: ["'self'"],
mediaSrc: ["'self'"],
frameSrc: ["'self'"]
}
}));
Solution/Workaround: To solve the problem in the audit report, you can either:
wait for (or submit) a fix in Lighthouse
use the connect-src 'self' directive, which will have the side effect of allowing HTTP requests from the browser side of your Next.js app

Resources