I am using the INLINE_RUNTIME_CHUNK=false variable in my create-react-app build and it's setting a CSP directive at build time (building on Heroku) for img-src of 'self' data:. I need to modify this to host profile pics coming in from the IDP i'm using, so that img-src directive needs to be changed.
How can I change this as part of the build process? Or should I override the whole CSP string with a meta tag in index.html? Is there a way to configure this on the build step as part of the heroku-postinstall command?
Related
I have a React App using creact-react-app and Material-UI.
I'm trying to enable CSP headers for my react web app inside AWS CloudFront.
I dont know why, but I keep getting these empty inline "data-emotion" style tags ..
I've set the .env as follows:
ESLINT_NO_DEV_ERRORS=true
INLINE_RUNTIME_CHUNK=false
IMAGE_INLINE_SIZE_LIMIT=0
Try setting the style-src directive as "style-src 'self' 'sha256-2NO5...' 'sha256-47DE...';" with the full hashes as provided in the error messages.
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 have an AngularJS webapp. I want to port it to Ionic to create hybrid app. I have figured out that I need to put all my code in www folder after creating an Ionic app and need to include cordova.js to my scripts along with meta Content-Security-Policy.
I am able to see my homepage when I start the server using "ionic serve" command but the problem is that it is trying to fire REST call on localhost:8100 but my server is running on localhost:8080.
How do I tell the app to fire call to localhost:8080? Also what about the CORS? Will it get resolved by meta Content-Security-Policy?
Any step by step tutorial will be of a great help.
Thanks
For CORS include this in your index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
To Know more about whitelist plugin refer nicRobay blog and in your chrome add this extenstion.
Usually on give ionic serve command the terminal itself asks which port to use commonly you can use localhost:8080 if you get that an option.
To include the corodova refer `this' and add this line.
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
or you can use bower to install cordova.
I think I went in wrong direction and asked this question. In mobile app to make a rest call the host should be hardcoded or in someway hostname should be provided by the user.
The same webapp can't be ported to hybrid app as it is because relative urls need to be changed to absolute url.
I have this code.
<ion-item ng-repeat='item in videos' class="item-thumbnail-left item-text-wrap">
<img scr="http://placehold.it/80x80">
</ion-item>
I am trying to load an image from placehost.it but it is not loading the image.
I have added
<access origin="*" />
the above code to my config.xml file. But it is still not loading when I open it on chrome. I have also enabled COR. What shall I do?
Whitelisting the domains using cordova-plugin-whitelist solves the issue.
Add the plugin via CLI:
cordova plugin add cordova-plugin-whitelist
and then add the following line of code to your app's config.xml:
<allow-navigation href="http://*/*" />
and
this meta tag in your index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
EDIT: The reason for this issue:
From Cordova 4.0.0 for Android's update:
Whitelist functionality is revamped
You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist
Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)
Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are
using CSP.
This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate
plugin (not recommended).
Note: while not strictly part of this release, the latest default app
created by cordova-cli will include this plugin by default.
try to use ng-src becaue you are importing from website, not locally.
Cheers
Initially I have used btford socket.io library for my ionic project, but I am having trouble working with it. Now I am trying to install socket.io directly to an ionic project. However I am not sure whether it should installed as an npm install which will store it in the node_modules folder, or should i store the library in ionicprj/www/lib ?
cordova-plugin-whitelist seems to be "mandatory" at present.
install it
cordova plugin add cordova-plugin-whitelist
configure config.xml
You can keep your current setup with * or change for more restrictive rules
add a html policy on index.html, you shall add a Policy also. To authorise everything, here it is :
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe eval'">
socket.io client library should go in www/lib/ to emit events from the ionic app. On the server you'll want socket.io as an npm module.
There's a helpful tutorial here: http://www.htmlxprs.com/post/6/creating-a-realtime-image-sharing-app-with-ionic-and-socketio-tutorial