I'm using react to show a client-generated .PDF-blob in an iframe like this:
<iframe src={iFrameSource} title="pdfPreview" ></iframe>
iFrameSource contains the blob
It worked fine as it is, but now we want to implement some CSP rules and it stopped working in production.
In the browser console, I get this error:
Refused to frame '' because it violates the following Content Security
Policy directive: "frame-src 'self' blob:".
I suspect this to be because somehow react generates an iframe with an empty src, even though i use a state with an initial value.. I could easily be wrong.
Any suggestions?
It turns out, i needed the CSP record to look like this:
frame-src 'self' blob: data:
Related
I've been trying to lock down our production release to satisfy CSP requirements and have been successful except for when it comes to the styled-components script tag.
Nonce is not really an option with an SPA so a sha seemed the best solution, and the content of the offending script tag does not change.
The site is delivered by a simple Express server which sets the required headers and includes the sha for what is an empty tag (which is how the styled-components style tag renders):
Content-Security-Policy: script-src 'self'; img-src 'self' https://*; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' fonts.googleapis.com; child-src 'self'; frame-ancestors 'self'; font-src fonts.gstatic.com
And the script tag being targeted in html head:
<style data-styled="active" data-styled-version="5.3.3"></style>
This performs correctly for Chrome, Edge and Firefox but the app fails to render on Safari with the following console error:
Error: An error occurred. See https://git.io/JUIaE#17 for more information.
In turn this refers to the error:
CSSStyleSheet could not be found on HTMLStyleElement. Has styled-components' style tag been unmounted or altered by another script?
I'm not entirely sure what this message is sugesting.
My only other thought is related to the use of the CSSOM APIs to inject styles (the reason for the styled-components script tag appearing to be empty), but I have no evidence that this is the problem for Safari.
I get the following error in the Chrome's web console on my deployed React app:
Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
However, I have specified frame-src in my index.html like in the following snippet:
<meta http-equiv="Content-Security-Policy" content="frame-src https://www.youtube.com/">
The source for the error is a YouTube embed, and with the meta tag in place the embed works fine on localhost. What could cause this error only to appear on a deployed React app?
Fixed it by adding Content-Security-Policy header on the server. So it wasn't an issue with the front-end code after all.
I display an image in my reactjs component by using an <img src="https://<site>" /> element.
Running on localhost, all is fine, but when I deploy to my server (azure) I get the following error when I try and get the same image:
Refused to load https://<my-azure-blob-storage>/img because it does not appear in the img-src directive of the Content Security Policy.
Google says to implement meta Content Security Policy in the head tag in the index.html (for react), where I've tried adding the following: <meta http-equiv="Content-Security-Policy" content="img-src https://<my-azure-blob-storage>/">
I can't seem to find any more resources, and as a last option, I can retrieve the image via js and then show image as base64, but I would like to get this option to work
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.
The lates AngularJS (1.3 beta 19) uses eval. This is prohibited in chrome extionsion.
How to fix the issue without allowing evals?
Error message:
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' chrome-extension-resource:".
Stack trace:
angular.js:1011
csp angular.js:1011
(anonymous function) angular.js:23556
UPDATE: See documentation of ng-csp https://docs.angularjs.org/api/ng/directive/ngCsp
OUTDATED: It looks like AngularJS fails to detect CSP in chrome extension. Use explicit ng-csp. Link to the AngularJS issue: https://github.com/angular/angular.js/issues/8777
To quote documentation that Dmitry linked:
Angular tries to autodetect if CSP is active and automatically turn on
the CSP-safe mode. This autodetection however triggers a CSP error to
be logged in the console:
Refused to evaluate a string as JavaScript because 'unsafe-eval' is
not an allowed source of script in the following Content Security
Policy directive: "default-src 'self'". Note that 'script-src' was not
explicitly set, so 'default-src' is used as a fallback.
This error is harmless but annoying. To prevent the error from showing
up, put the ngCsp directive on the root element of the application
or on the angular.js script tag, whichever appears first in the html
document.
Solution found: enforcing CSP mode by adding ng-csp on an element of document.
See documentation of ng-csp https://docs.angularjs.org/api/ng/directive/ngCsp