Content-Security-Policy,iOS 10 Issue


#1

I use Phone Gap Build…I am having the issue described in these 2 articles. The suggested fix needs to replace the existing Content-Security Policy statement in the top section of index.html.

How do I accomplish this?

Thank you


#2

Here’s an article on that topic:

http://blog.nsbasic.com/2015/12/phonegap-no-content-security-policy-message/


#3

If you look at config.xml, these lines are now built in:

<plugin name="cordova-plugin-whitelist" source="npm" />
  <allow-navigation href="*" />
  <access origin="*" />

#4

I appreciate your response…

The error I am receiving in iOS 10 is:

The article states:

When I attached the remote debugger to the app from Safari I saw the error above in the console window being fired over and over again.
The fix was to relax the CSP in the index.html, by adding

<meta http-equiv=”Content-Security-Policy” content=”default-src ‘self’ gap://ready file://* *; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval'”>

You have to make sure you only have one CSP meta tag, as it will only use the first one.

I added the <meta… in extraheaders but as you can see it is below the original in my index.html and is therefore ignored.

How do I replace the <meta… in my index.html while using AppStudio?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>FMD</title>
<meta name="generator" content="NSB/AppStudio 6.2.7.2$jxjp" />
<meta name='date' content='2017-11-12 21:24:34.094000' />
<meta name='version' content='1.0.0' />
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no' />
<meta name='apple-mobile-web-app-capable' content='YES' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
<meta name='apple-mobile-web-app-title' content='Family Medical Diary' />
<meta name='copyright' content='Copyright 2015 ABC Company' />
**<meta http-equiv='Content-Security-Policy' content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src * blob:; img-src * data:; connect-src *;" />**
<link rel='apple-touch-icon' href='180x180.png' />
<link rel='shortcut icon' sizes='192x192' href='180x180.png' />
<link href="nsb/nsbstyle.css" rel="stylesheet">
<script src="nsb/jquery.js"></script>
<link href="nsb/jquery.modal.min.css" rel="stylesheet">
<script src="nsb/hfunc.js"></script>
<script src="nsb/jquery.modal.min.js"></script>
<script src="nsb/fastclick.js"></script>
<script src="nsb/jqmFunctions.js"></script>
<link href="nsb/jquery.mobile.css" rel="stylesheet">
<script src="nsb/jquery.mobile.js"></script>
<script src="nsb/iscroll.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet">
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.classic.css" rel="stylesheet">
<script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxcombobox.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.pager.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.filter.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.grouping.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.sort.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.edit.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.aggregates.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.storage.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxdata.export.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxgrid.export.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxpanel.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxinput.js"></script>
<script src="nsb/jqxFunctions.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet">

<link href="chromeManifest.json" rel="manifest">

**<meta http-equiv=”Content-Security-Policy” content=”default-src ‘self’ gap://ready file://* *; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval'”>**
<style type="text/css">

#5

I cleaned up your message a bit. Surrounding code with triple left ticks (`) makes a big difference!

In Project Properties, see ‘contentSecurityPolicy’.


#6

Thank you!!

My app now runs with iOS 9,10 & 11