Anyone have a good and easy way to open a URL in a PhoneGap Build? I have tried window.open(“http://espn.com”, “_blank”) or window.location.href=“http://espn.com” and they just open the url in the app. I am programming in VB. Any help would be great. Thanks.
Gordo - start here
https://discuss.appstudio.dev/t/cors-errors-when-using-ajax/1233
But that may cause more questions.
more questions… not sure how that relates.
I’m just saying it’s not simple. With the phonegap 9.0.0 it’s gotten more interesting. I have a CORS that I modified from another source that’s worked for me. I decided earlier today to dissect it more for a better understanding and will post more info on the 1233 thread. If I understand correctly, the stores want you to be as specific as possible in allowing access only to the resources you “guarantee” are good in your program. I’m sure the stores check your specified sites to their blacklists before publishing your app. Then there’s questions of web vs android vs ios specifics. And HTTPS plays into it as well. And what’s the best way to inject your CORS into your distribution?
In Project Properties, in the PhoneGap section, there is a property called contentSecurityPolicy. Put your CORS there.
It was my understanding the CORS is sent from the server to the browser. It can be headers, or a meta tag that specifies the contents of the CORS header. I’ve been editing the final index.html file created by Run - Deploy to put the meta tags into the project - apparently successfully.
When I place a valid CORS in the contentSecurityPolicy of the project properties of a simple project and use Run - Deploy, NSB creates a new 'compiled" project. I do not see the CORS anywhere in the generated project in any of the files. Nor does it appear to work. Where does that property end up in the “compiled” project folder?
I don’t CORS is my problem. href or window.open does what it is designed to do. The problem is a url scheme for safari does not exist so the url opens within the app and not in the safari app. There is no way to call the safari app that I know of unless I am missing something. Maybe a plug-in if someone has success with that. I am not getting a permission error or any error. The app is just not doing what I want.
This isn’t really a CORS issue. CORS is really for getting data/services/fonts/ etc from domains other than your own.
If you want to open an external link, first you need to understand that this is hard to do by design. In the old days, this is how app vendors tricked users into doing stupid stuff soooo Apple and more recently Android put the kibosh on opening external links. Now if you want to do it you have to use a plugin. The most commonly used is:
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="3.1.0" />
And in your javascript button handler you do this:
window.open('https://www.somedomain.com/privacy-policy','_system', 'location=yes');
If you’re going to open a web page that’s not on your domain, then you’ll need to add that domain to your CSP.
FAIR WARNING: Expect apple to reject your app unless you’re opening a page on your own domain and even then, it gets iffy.
PPetree, Thank you so very much. I will give that I try. I agree with you on all.
What needs to be in CSP? Something like the following:
default-src ‘self’ xxx.example.com
Here’s an example of a more complex CSP for a commercial project:
default-src 'self' gap://ready file: https://fonts.googleapis.com https://fonts.gstatic.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://developers.google.com https://maps.googleapis.com https: ;
media-src 'self' data: file: ;
img-src 'self' data: android-webview-video-poster: ;
connect-src https://api.xxx.com https://apidev.yyy.com/ blob: file: data: https: ;
George - and when you put that string in the csp property of the project, where does it end up in the final project - like in Run - Deploy?
The simple answer is, it doesn’t. If you are creating a web app via Run - Deploy or Start in Desktop Browser the csp property in the project is ignored. If you use Make Native App using PhoneGap Build, the resulting APK has the meta tag in it. If you don’t have one specified, this is the default csp used: "default-src * gap://ready file:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; img-src 'self' data:;" This leads me to believe PhoneGap adds the meta tag. Either way, beware.
I’m not sure what to beware of here.
If you specify a contentSecurityPolicy, it’s added to the HTML headers in the index.html file which gets generated for PhoneGap. Otherwise, a default CSP is used.
Let’s say your are not making a native app with PhoneGap, but a browser app, for those who don’t download apps or are on a desktop platform. The csp does not get injected in the normal run - deploy function - so beware, you’ll have to inject it yourself, or possibly have your server send the header natively, and avoid the meta tag on the browser app.
We could easily put it into the headers of desktop apps - but we haven’t found a requirement for that (yet). Do you have a use case?
One use case is debugging phonegap apps in Chrome.
Phil is also correct. Yes, the app I’m developing is intended to be run on Android and IOS as native apps, but in chrome as well, for those who don’t want to download the app, and for those who just have a desktop Windows or Mac or Chromebook or Linux. This is a patient clinical trial data collection system for home use by the patient. We need to support as many devices as possible, and a web app (HTTPS hosted site) seems like it has the broadest range of devices, But we also want the native IOS and Android apps as well. If you are going to change this shortly, then I’ll just hand edit. Otherwise, a script seems necessary in the interim.
George, if you are going to make any changes in this area, I’m not sure why, and I’m not sure it matters, but it is currently impossible to do a phonegap build without a CSP. The ‘none’ no longer works. (as noted elsewhere).
PPetree and all. Thx very much. I used the inappbrowser plugin and it worked perfectly as intended. If it helps you at all, I left the CSP property blank and whatever default PhoneGap created did not block my app from opening an external url.
I am also looking for an ICS plugin but I put under a new topic.
Thx again.