CODEWITHSUNDEEP
iosiframemobilecross-browsercontent-security-policy
geoCode
geoCode

Reputation: 353

iFrame content refuses to load on iOS browsers only - even though a Content-Security-Policy (CSP) frame-ancestors directive is issued

I am creating a website (Site A) in a simple Content Management System. Because the CMS cannot interact with my data server, I have some web content hosted on another web server (Site B - subdomain.example.com) that I display in an iFrame on Site A.

I have added the following content security policy via an HTTP response header on the web server hosting Site B:

Content-Security-Policy: frame-ancestors *.example.com;

Everything works well on my desktop machine (the iFrame content displays correctly in Chrome, Safari, Firefox). However, when I try to display Site A on my iPhone (iOS 17.1.2) the iFrame fails to display content in any browser of the mobile versions of the browsers above. Safari Web Inspector shows the following error:

Refused to load https://subdomain.example.com/my-site because it does not appear in the frame-ancestors directive of the Content Security Policy

How can I modify the CSP directive so it will work in iOS?

I have tried replacing the wildcard with the subdomain name as well as including https//: in the path name - both without success. I have also searched online but have not found a solution to this particular issue. I do not have a CSP in the element.

Upvotes: 1

Views: 2044

Answers (2)

geoCode
geoCode

Reputation: 353

After lots of trial and error I finally discovered a solution. Here is a summary of syntax that works on iOS and what doesn't:

frame-ancestors www.example.com; Works on desktop but not iOS.

frame-ancestors *.example.com; Works on desktop but not iOS.

frame-ancestors *; Works on desktop and iOS but creates a security vulnerability (for illustration purposes only - don't use).

frame-ancestors example.com; Works on iOS but not desktop.

frame-ancestors www.example.com example.com; **Works on both desktop and iOS.

Summary:

  • It appears that iOS recognizes the wildcard character (*) when used alone but not when used as part of a URL

  • Including the www prefix causes iOS to refuse to load the iFrame content (even though the correct URL is https://www.example.com).

  • The above applies to all iOS browsers tested (Safari, Chrome, Firefox).

Upvotes: 1

s19
s19

Reputation: 126

When you want to embed Site B in siteA, the path in the Content security policy of Site B should be the url of site A .

Refer: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors#sources

Upvotes: 3

Related Questions