CODEWITHSUNDEEP
iosiphoneiframecontent-security-policy
David
David

Reputation: 3648

iframe can not be loaded in iOS

My web app has an iframe:

<div id="iframe-wrapper" class="iframe-wrapper">
  <iframe src="https://xxx.company.com/aaa/bbbb/cccc" style="border:none; height: 100%; width : 100%; scrolling: no;">
    <p>Your browser does not support iframes.</p>
 </iframe>
</div>

It works fine in any browser in windows desktop and android devices (url has been loaded into ) but not in iOS and MacOS (except Chrome on MacOS).

In iOS - iPad/iPhone - Safari, i see this error in console

refuse to load https://xxx.company.com/aaa/bbbb/cccc because it appears in neither the child-src directive nor the default-source directive of the content security policy

I did research and see that is ralated to Content-security-Policy , So i use this one

<meta http-equiv="Content-Security-Policy" content="
  default-src https://*.company.com;
  child-src     https://*.company.com;
  frame-src     https://*.company.com;">

or

<meta http-equiv="Content-Security-Policy" content="
   default-src * data: blob: ws: wss: gap://ready ;
   style-src * 'unsafe-inline'; 
   script-src * 'unsafe-inline' 'unsafe-eval';
   connect-src * ws: wss:;
   child-src * https://*.company.com gap://ready;
   frame-src * https://*.company.com gap://ready">

None of them works. Could you please help me to make it works.

UPDATED: here is what i see in response header in ipad safari (iOS 10.2.1) and MacOS -Safari(latest version). Both of them dont allow to load iframe URL

X-Frame-Options  sameorigin
X-XSS-Protection 1;mode=block
X-Content-Type-Options   nosniff
X-Webkit-CSP  default-src 'self'

But I also see the same header on MacOS and Chrome (macbook pro latest version) and Chrome allow to load iframe without issue on MacOS.

Upvotes: 0

Views: 5800

Answers (1)

David
David

Reputation: 3648

I have an answer for my issue base on the idea to investigate the response header. Thanks to sideshowbaker's reply.

First, I tried to set "Content-Security-Policy" in header meta tag in jsp file. But that one does not work. So i try to set header value from the server side (spring MVC) in the controller. and it works fine. 

public ModelAndView confirmNumber(....,HttpServletResponse response) {  
.....
response.setHeader("Content-Security-Policy","style-src * 'unsafe-inline';  script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; default-src *; child-src * https://*.company.com; frame-src  * https://*.company.com;");

return modelView;
}

Now from the Web Inspector in safari, i can see the header value.

Upvotes: 0

Related Questions