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 subdomain.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.