I am working on project where we need to get a JWT token from a external source to the mobile app. In Android it works without any issue. However in IOS i am not able to get the token from the Iframe.
I have used both Ionic and Cordova inappbrowsers, the authentication works fine and i am able to execute script inside the iframe in IOS, but while using the callback function in executescript() function, gap-iab:// was blocked by content security policy.
Did anyone faced a issue like this in IOS and solved it. Please let me know. Thanks in advance.
My Code:
const bro = this.iab.create(legacyUrl, '_blank', 'location=no,toolbar=no');
bro.on('loadstop').subscribe( (e) => {
bro.executeScript({
code: 'if (document.getElementById("Token") != null) { document.getElementById("Token").
getAttribute("value");}'
}).then((value) => {
console.log(value);
});
});
And i am getting below error from the application while running in IOS simulator,
Refused to load gap-iab://InAppBrowser627412330/%5Bnull%5D because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy.
"gap-iab:" needs to be child-src in your content security policy. That is usually set on your server side and tells your in-app-browser which content it can load and from where.
Related
I am trying to load the host1 page, it contains iframe and the URL for the iframe is host2. But iframe with URL host2 is not loading properly.
I am loading host1 page through SFSafariViewController. If I load the same thing with the iPhone safari browser then it is working fine but not working with SFSafariViewController. As per my understanding, WKWebview has some limitations but SFSafariViewController doesn't have but still facing the issue.
I have tried the below options also in iOS14.5.1 but still, it is not working:
Enabled Allow Cross-Website Tracking by using NSCrossWebsiteTrackingUsageDescription in info.plist
Enabled Allow Tracking by using Privacy - Tracking Usage Description in info.plist
used WKAppBoundDomains also.
am I missing anything, please help me out?
Adding few more details:
When I am inspecting the code got the below errors with the mobile app SFSafariViewCotroller and the required content is not loading, but it is working fine with mobile, desktop Safari browsers and not showing any errors.
Refused to load {URL://_csrfRefresh=1} because it does not appear in the frame-ancestors directive of the Content Security Policy.
Sandbox access violation: Blocked a frame at {URL} from accessing a cross-origin frame. Ther being accessed is sandboxed and lacks the "allow-same-origin" flag
Attaching a screenshot below for reference,
I'm building a mobile app using WKWebView. I register custom url schemes image:// and thumb:// to serve assets from the native part to the web part of the app.
webViewConfiguration.setURLSchemeHandler(handler, forURLScheme: "image")
webViewConfiguration.setURLSchemeHandler(handler, forURLScheme: "thumb")
This approach works well if urls with a custom scheme are used in HTML. For example, <img src="thumb://watermarkly.com/1.jpg" /> works properly - WKWebView invokes my handler and displays the result. However, WKWebView blocks requests if I try to fetch these urls using XMLHttpRequest:
[Warning] The page at https://watermarkly.com/app/watermark/ was allowed to display insecure content from thumb://watermarkly.com/1.jpg.
[Warning] [blocked] The page at https://watermarkly.com/app/watermark/ was not allowed to display insecure content from image://watermarkly.com/1.jpg.
[Error] Not allowed to request resource
[Error] XMLHttpRequest cannot load image://watermarkly.com/1.jpg due to access control checks.
The only difference here is that "thumb:" url was assigned to an img tag, while "image:" url were fetched via XMLHttpRequest. Unfortunately, no other info provided in Safari Developer Tools.
The problem appears on a real devices only - everything works properly in iOS Simulator.
Is there something I need to configure to make it work for XMLHttpRequests as well?
Update
We switched from HTTPS to HTTP to make XHR to solve the problem.
Unfortunately, custom url schemes seems not to work on some iPhones. We have 5 customers with iPhones where nor switching to HTTP, nor sending Access-Control-Allow-Origin header help. We weren't able to identify which setting causes the issue - the problem cannot be reproduced on any of devices we have. Apple reviewer didn't have any complaints as well. Nor XHR, not getting images through urls work on these phones. One of the customers has two phones. Custom url schemes work on one of them and they don't work on the second one at all. He says they are identical and there is no Safari extensions installed. Unfortunately, we weren't able to identify what causes the problem. Beware custom url schemes may not work on some phones.
I am having a strange issue, the app (iOS and Android) works fine when being used in a Simulator under Remote Debug mode.
However, when I turn the Remote Debug mode off for iOS development, I am unable to receive data back from the server. This is not the case with Android it works fine as expected outside Remote Debug mode.
Wonder what might the case with iOS when I turn the Remote Debug mode off?
I have also attached a screenshot of Network requests from iOS simulator if it is helpful in narrowing down the issue here.
I had the same issue. If you are using Axios with Basic Authentication to make your HTTP requests, the problem is that btoa is not defined in React Native. It works only in debug mode.
React Native atob() / btoa() not working without remote JS debugging
https://github.com/facebook/react-native/issues/21892
Solution:
I also had this issue, It just takes me 7 days to find the solution the solution is funny you have to just add '/' at the end of your API request
e.g
www.domain.com/operation/staffOperations/rbl-3049OW09cfknpehop
Add '/' at the end
www.domain.com/operation/staffOperations/rbl-3049OW09cfknpehop/
It work for me,
hope this work for you also
I was facing the exact same issue. However, I noticed that for some API calls, I passed dummy data as data: {} in the API request. Removing it worked for me
For instance -
// Api was an axios instance created using axios.create with a baseURL
Api({
method: 'GET',
url: '/test'
// data: {} <== Removing / commenting this worked for me
})
More information here - https://github.com/axios/axios/issues/2380
Note: My baseURL didn't have '/' in the end or the URL paths didn't have the '/' in the end. But, that wasn't an issue for me. I even tried with the the '/' as #Gulshan Prajapati pointed out, but it didn't help in my case.
When switching from UIWebView to WKWebView in a Cordova iOS app there are common known problems with same origin policy when loading a web app from the local file system.
The typical fix is to use a local web server (listening on localhost) which serves your HTML,CSS,JS.
This is why I tried to switch to this cordova plugin:
https://github.com/apache/cordova-plugins/tree/wkwebview-engine-localhost
Unfortunately the result is a blank screen. In the web debug console I called
console.log(location.href)
which returns about:blank. Then I tryed navigating to the local web server with this JS call from the console:
location.href = 'http://localhost:8080';
But the web view stays at about:blank. I also tried with different ports and of course I checked my config.xml (e.g. <allow-navigation href="*" />)
I assumed that there is a problem with with the plugin so I switched to Ionic Webview. Interestingly it has the exact same behavior.
In general I am able to navigate to other sites, but not to localhost:[port], so I guess that those plugins are not able to start the web server at all. However, I couldn't find anyone else with this problem.
What could be the reason for this problem? Is there a way to debug this? Unfortunately my web console doesn't report any problems.
The problem here was not to start the web server but connecting to it. The communication has been prevented by VPN (MobileIron) which tries to tunnel those connections. Unfortunately, at the moment there is no solution for WkWebView at all.
I have a simple web service in my ionic app... it connects to remote server for simple tasks.
The proxy is setup in ionic like this:
"proxies": [{
"path": "/api",
"proxyUrl": "http://example.com/api"
}]
and the calls are to "/api". These resolve properly to http://example.com/api in localhost browser (using ionic serve).
But in xcode, the url is resolved to:
file:///api
I can't find anything on this specifically. How show I be calling for ios?
I faced the same issue while running on Android device, The solution is simple, point to note here is the proxy we are using to handle the CORS issue and this is the issue only in perticular with the desktop browser, so while using ionic serve we need proxy and we dont need to use proxy for other devices.
I have used below condition in the service to handle this with out doing any further code changes while building for any target platform.
var APIUrl = '/myproxies';
if (this.platform.is('core') == true){
APIUrl = '/myproxies';
}else{
APIUrl = 'http://api.sample.com/SomeSampleAPIProvider';
}
this.http.get(APIUrl+"/Json").map(res => res.json()).subscribe(
data => {.....
can refer this link to know usage details of this.platform
This is the intended action. The ionic CLI proxy is only used for ionic CLI serve or run commands. More here: http://blog.ionic.io/handling-cors-issues-in-ionic/
The file:///api url will not trigger the Angular browser CORS pre-flight OPTIONS call, so you should be fine.
Any additional CORS issues you are experiencing would be on the server side.