Software Archive
Read-only legacy content
17061 Discussions

Content Security Policy Problem w/ Inappbrowser

Ed_T_
Beginner
501 Views

I'm calendar of events app a calendar of events app that displays two buttons that use the inappbrowser plugin to display landing pages on two different websites.

I'm also using the OneSignal Push plugin to be able to send periodic updates of the coming week's events. A week's worth of events can easily require more data than can be sent with a single notification, so I've created a WordPress REST API call that returns a JSON object to the function that handles when the user opens the notification.

It's gibberish data, but it accurately reflects what's in the test database and can be viewed at:

http://forgottencoastweekend.com/wp-json/fcw_weekly/v1/push

In order to access the WP API I've had to add the line"

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://forgottencoastweekend.com">

to index.html, which lets the app access the API without triggering cross site posting problems.

When that line gets added, the Inappbrowser plugin stops working, even though one of the landing pages is on Forgotten Coast Weekend!

Any ideas on how to straighten this out??

Thanks

Ed

 

 

0 Kudos
9 Replies
PaulF_IntelCorp
Employee
501 Views

I think that by adding the CSP rule you have changed how the inAppBrowser actions are monitored. What happens if you do not use any CSP rules and just use the whitelisting rules? I'm speculating, but you might start out doing something like this:

Screen Shot 2016-12-15 at 17.14.46 .png

0 Kudos
Ed_T_
Beginner
501 Views

Paul,

That does fix the problem with the inappbrowser, but...

Apparently, I'm back to the notification handler not being able to get the data from the WP REST API

This is the code for the notification handler:

 var notificationOpenedCallback = function(jsonData) {
 alert("In the callback");
    $.getJSON("http://forgottencoastweekend.com/wp-json/fcw_weekly/v1/push", function(response) {
	var records = JSON.stringify(response);
 alert(records);
    disp_data(records);    
        
	});
	  

The second alert never displays. If I put the CSP meta in index.html, I get the data, but the inappbrowser fails.

Ed

0 Kudos
PaulF_IntelCorp
Employee
501 Views

Have you tried the very long and overly permissive CSP rule from this doc page > https://software.intel.com/en-us/xdk/docs/using-cordova-whitelist-rules-with-intel-xdk < ?

0 Kudos
Ed_T_
Beginner
501 Views

Yes, sir I have.

InAppBrowser works, but the call to the API fails.

I even went back to the CSP rule and added http://forgottencoastweekend.com just behind 'self'  and rebuilt the app. No change.

0 Kudos
PaulF_IntelCorp
Employee
501 Views

When you used the very long permissive CSP rule:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' data: blob: filesystem: ws: gap: file: cdvfile: https://ssl.gstatic.com *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; child-src *; ">

Did you continue to use the whitelist rules I gave you?

Which version of jQuery are you using? See this FAQ > https://software.intel.com/en-us/xdk/faqs/app-designer#ajax-jquery-one-fail <

0 Kudos
Ed_T_
Beginner
501 Views

Oh, wow Paul, you hit the nail on the head, but for a different reason enirely than what you were thinking.

I updated to 3759 yesterday or the day before, and rebuilt the app from scratch. I picked an HTML5 Cordova app with App Designer.

APP Designer didn't install jQuery at all!!  I've since added it manually. I went back and looked at the original app and it was using jQuery 2.2.4 so that's what I plugged in instead of the new ver 3 of JQ.

Now I have the whitelist entries you suggested and an overly permissive CSP meta tag,but the call to the WP REST API is working like a champ.

So, I guess I have to go back and start removing CSP and whitelist settings to see if I can find a minimalist one that is compatible with inappbrowser and jquery.

Thanks

Ed

 

0 Kudos
Ed_T_
Beginner
501 Views

Paul,

Once jQuery was included I was able to remove the ultra permissive CSP tag. The whitelist settings you suggested are working.

Leave them that way, or try a different CSP?

Thanks,

Ed

 

0 Kudos
PaulF_IntelCorp
Employee
501 Views

Either way will work. Ultimately CSP is probably the better choice, but it might be easier at this time to use the whitelist approach.

0 Kudos
Ed_T_
Beginner
501 Views

I will leave it using the whitelist approach.. Thanks.

 

0 Kudos
Reply