Just upgraded my browser to Firefox 40 (released two days ago) and now I'm noticing that base64 CSS background images are no longer displaying. All other browsers, including older versions of Firefox load the images just fine.
In the console, I get the following error:
Content Security Policy: The page's settings blocked the loading of a resource at data:image/png;base64,iVBORw0KGgoAAAA ......... CuwAAAABJRU5ErkJggg== ("default-src *").
My CSS looks like this:
.image {
background-image: url("data:image/svg+xml;base64,iVBORw0KGgoAAAA .....");
}
I am using Angular and had included the ng-csp directive on the html tag, though removing that makes no difference.
The comment left by kba was the solution! Adding a Content-Security-Policy header with an img-src of "* data:" did the trick. The new Firefox does not include the data: protocol as a part of the *, so explicitly adding it was required.
Related
I recently added CSP header to my project.
At the same time, I am also using PDFTron webviewer in my project.
As you know, PDFTron webviewer is rendered in an iframe and after adding CSP headers, I'm getting below error - related frame-ancestors.
Question1 is how can I add a frame-ancestors header to the PDFtron webviewer to bypass this error?
Question2 is the second error related with cross domain is not fixable by adding my domains to configorigin.txt, is it related with the csp header setting?
To Question1: Just change frame-ancestors 'none' to the frame-ancestors 'self' (or to frame-ancestors localhost:* if in your particular browser the 'self' token does not cover a localhost:port_number) to allow embedding PDF webviewer.
To Question2: I think the second error is CSP-related (side effect of CSP blocking) because localhost should not be a cross-origin resource since main page is loaded with the same host name and port number http://localhost:3000.
I have tried to add an iframe of google doc inside my application (react). The iframe works - I can see the doc, and edit it. but I keep getting these errors:
I have added the X-Frame-Option header to my Nginx with "SAMEORIGIN" always attribute without success. (didn't work)
Also added some sandbox configuration to the iframe itself so it can't redirect.
The HTML file head:
HTML head
Please let me know if you have more ideas.
noob here.
Creating a PWA React app using create-react-app and running into the CSP issue regarding default set to none and no img setting to override it.
Have searched for and tried many, many helpful answers for this exact problem but have not hit upon the one that will work for my app.
Maybe I just need a second pair of eyes?
The error is:
Cannot GET /
The console tells me this:
Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1 Refused to load the image 'http://localhost:3002/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.
localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Screenshot of server.js where I tried to implement express-csp-header:
server.js
Screenshot of index.html to show the added images and that there is no meta tag for CSP:
index.html
I have tried adding the tag as advised elsewhere.
I tried every other suggestion from stackoverflow that I could find.
Please advise.
----EDIT--- I guess what I need to know is how to override the CSP that comes with webpack as part of Create-React-App because the console error message says that 'img src' is NOT defined so it defaulted to "default src", which is set to 'none'. I believed I have installed express-csp-header correctly and have 'img src' set correctly, why doesn't the browser find that?
----Another EDIT--- Here all this time I was thinking that webpack must be where the browser is getting the "default-scr: NONE" referred to in the error message. I just searched all of the files in react-script, which is where webpack config files live, and don't find any occurance of "default-scr: NONE". Is it an Express setting? Why am I dealing with CSP with this CRA app and not the other dozen I created the same way? Pulling my hair out.
Maybe I just need a second pair of eyes?
Yeah, it is difficult to find a black cat in a dark room, especially if it is not there.
Refused to load the image 'http://localhost:3002/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.
This is a great example of a misleading diagnostic message. Your issue have nothing to do with Content Security Policy (CSP).
Just place favicon.ico file into %PUBLIC_URL% folder and add into <head> section:
<link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico">
All nitty-gritty is here. Briefly - browser by default tries to get favicon from the root of website, since you do not set right <link rel="icon" tag. There is no favicon there, so 404 Not Found occurs (anyway Express do not serve root folder by default).
Your CSP is published on "200 OK pages" only, so Express by default uses its own default-src 'none' for nonexistent pages (with status codes 404/403/500/etc).
This can really be confusing to anyone.
PS: Quite possible that the presence of %PUBLIC_URL% means you do not set PUBLIC_URL / homepage properly, because it should be substituted by a real folder/path. I just use your notation in the <link rel="icon" tag above.
PPS: I think if you add a custom error pages handler, it help to avoid similar misleading diag (code example you can take here).
UPDATE:
Cannot GET /
means webpack dos not know what page to show - defServer{...} output{...} sections misconfigured or wrong router(). Therefore you get 404 Not Found page.
You could to look in the Developer tools is the Status Code 404/200 and which Content-Security-Policy HTTP header you have really got (here is a tutorial).
In case of 404 Not Found, webpack shows built-in default error page (since you do not created your own). This error page is served with default webpack's CSP, not yours (your CSP will be published on pages with 200 OK status code only).
I just searched all of the files in react-script, which is where
webpack config files live, and don't find any occurance of
"default-scr: NONE"
AFAIK, webpack-dev-server uses a finalhandler which rejects /favicons on 404 pages exactly with the same issue you have. In this way default-src: 'none' should be in node_modules/finalhandler/index.js.
Why am I dealing with CSP with this CRA app and not the other dozen I
created the same way?
Previously finalhandler has default-src 'self' so /faficons was not blocks by CSP. But after this thread: default-src should be 'none' in finalhandler at May 2019 - things changed.
I guess you issue is not CSP related, it's just have misconfigured defServer{...} or output{...} (some path: __dirname + 'public/' or publicPath: points to a wrong dir).
CSP error is only a symptom (bad thing it's a false symptom) of the disease, but we need to treat a cause but not symptoms.
PS: I think instead of %PUBLIC_URL%/favicon.ico it should be http://localhost/favicon.ico in HTML, it's something misconfigured here too.
I've got a chrome extension working nicely w/ a popup, but can't get local images in the popup to render in the ported firefox webextension. the popup renders no images and the HTML rendered is:
<img ng-src="assets/img/start_your_day_right.png" src="unsafe:moz-extension://d45045df-43fa-654a-b95c-70de00a23f5a/assets/img/start_your_day_right.png">
After researching this error, I've tried various permutations of the CSP setting in the manifest.json file. Here's the code in the manifest file I've used (also included is the web accessible resources, which was recommended as well):
"web_accessible_resources": [
"assets/img/*.png"
],
"content_security_policy": "img-src 'self' 'unsafe-eval'; script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",
I'm rendering the image w/ angular in the popup.html page:
<img ng-src="{{ tile.imgSrc | htmlSafe }}" />
(where 'tile.imgSrc' renders to a relative path link to the image - eg. 'assets/img/start_your_day_right.png'.
I've tried including various permutations of the img-src setting, including 'unsafe-inline', removing 'self', etc.
The error I can't seem to escape is:
screenshot of ffox console error
I'm running the latest version of FireFox (52.0) w/ an older version of angular (v1.5.5). I have seen that this older version of Angular may cause issues during the submission of the app to FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470), but I've seen no indication that this would be a factor w/ testing and the current error. (And I'm trying to solve this before I introduce any further errors w/ an Angular upgrade).
Any tips out there?
The issue here is that Angular sanitizes ng-src URLs for images and links.
Prepending unsafe: renders the link unusable, and signals that Angular does not recognize it as valid.
This is a known behavior in extensions:
Angular changes urls to "unsafe:" in extension page
ng-src doesn't work in Chrome app, even with ng-csp
As shown in the links above, this behavior can be overridden by patching $compileProvider's imgSrcSanitizationWhitelist and aHrefSanitizationWhitelist. Angular developers officially blessed this workaround and decided not to modify core Angular code for non-web use.
Since the extension you're porting is working in Chrome, it should already contain this patching. All you need to do is to add moz-extension: to the whitelist. Using the bugtracker's example, modified to work in both Chrome and Firefox:
var myModule = angular.module('myApp', [...], function($compileProvider) {
...
$compileProvider.imgSrcSanitizationWhitelist(
/^\s*(https?|ftp|file|chrome-extension|moz-extension):|data:image\//
);
$compileProvider.aHrefSanitizationWhitelist(
/^\s*(https?|ftp|mailto|file|chrome-extension|moz-extension):/
);
});
It should be similarly modified for other non-web platforms, i.e. for Edge or node-webkit.
I am seeking an easy and light weight way to upload a small file to a REST API using CORS.
I am using the following plugin:
angular-file-upload
The problem is that it uses swf fallback for deprecated browsers, that don't support the formData object(such as IE 8 and IE 9).
I have opened an issue on github on this matter, but no luck so far.
Which means that I cannot upload a file using CORS on those browsers, which is something I cannot allow (many users still use IE).
angular-file-upload has a solution for old broswers(such as ie8,9),
just put those code before "angular-file-upload-shim.js"
<script>
//optional need to be loaded before angular-file-upload-shim(.min).js
FileAPI = {
jsPath: '/js/FileAPI.min.js/folder/',
staticPath: '/flash/FileAPI.flash.swf/folder/'
}
</script>
you can visit this page on github for more detail.