I've got reactJs app which is deployed both as web and mobile app.
Mobile app is based on Cordova (ver 7.1.0).
Everything works fine except local resources (ones located in www/subdirs) are not found, despite they are there.
What is even more strange, some resources e.g. fonts are found, some- were found before (i18n files), but all of a sudden disappeared. Moreover, hardcoded in html images are found as well:
<img src='images/foo.png'/>
but exactly the same code being dynamically added with reactjs fails to reach the image.
Those resources which were found get resolved to proper url: file:///android_asset/www/subdir/resource.png
Those which are not- resolved to wrong path: file://subdir/resource.png
i tried both leading slash, no leading slash, setting html base tag- nothing
Does anybody have any idea what am i doing wrong?
thank you in advance
UPDATE:
here's security policy:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; connect-src *; style-src 'self' 'unsafe-inline'; media-src *">
Silly me! the browser worked like a charm and resolved all the resources exactly as it's supposed to. The problem was caused by react router which upon app load changed location from host/context/section to host/section so all resources which had to be loaded after that were resolved to incorrect path: host/section/resource instead of host/context/resource.
The solution is either fix initial location switch or add tab to the header
Related
I'm just saying that this is not the problem SecurityError: Blocked a frame with origin from accessing a cross-origin frame. I use single-spa and I was given the task to add one of the single-spa projects to a regular react project using iframe, I don't need to pass any data, just display it. But after I add the single-spa project in an iframe on another project (domains are different) I get the following error. The first thing that came to my mind is that the problem is in the Content-Security-Policy, it goes to the root-config in the index. jsx -<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';worker-src 'self' blob:">, found - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors, but I don't understand how to pass it to this project to make it work, I tried it through webpack, it doesn't work. I would be VERY grateful to anyone who can help me figure it out.
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.
Now I'm trying to make login call to express rest API with passport Basic Strategy, and on browser everything working fine but from device from Phonegap it's not working. I tried to remove and add cordova-plugin-whitelist plugin. Added following tag to config.xml <allow-navigation href="http://*/*" />. And added to index.html <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> I made cors setup. But it didn't help. Also I found out that my requests contains "/proxy/" inside of call.
Here is example: http://192.168.1.189:3000/proxy/http%3A%2F%2F127.0.0.1%3A8080%2Fapi%2Fauth%2Flogin
is it ok? And here is what I'm getting from server:
Thanks in advance.
I spent some time for search and I found a solution:
In my ionic app.js file I just changed the following line:
const BASE_URL = 'http://127.0.0.1:8080/api';
to:
const BASE_URL = 'http://192.168.1.102:8080/api';
and it works for me.
Iam trying to show base64 encoded image in my ionic app i tried various things with angular binding finally i just put the following code, but it is not working in ionic app it just simply displays:
<img ng-src="data:image/gif;base64,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" style="height: 100px;width:100px">
I have added whitelist to my app.js
.config([
'$compileProvider',
function($compileProvider){
$compileProvider.imgSrcSanitizationWhitelist(/^\s(https|file|blob|cdvfile):|data:image\//);
}
])
and tried with <img src=""> and <img data-ng-src=""> but none of them is working.
Ionic version used is:v 1.2.4. I verified base64 encoded string as well its showing fine on normal webpage. How can i show it in a right way.
I solved it by the following security policy tag in index.html.
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:;default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
try this also with security policy tag
var oldWhiteList = $compileProvider.imgSrcSanitizationWhitelist();
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob):|data:image\//);
it worked for me after long research.
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.