👀 Views: 61 💬 Answers: 1 📅 Created: 2025-06-10

html iframe CORS iOS Safari HTML

I'm working on a project and hit a roadblock. I'm working with an scenario where an <iframe> is not loading external content on iOS Safari, throwing a CORS policy behavior. I have a simple HTML setup like this: ```html <iframe src="https://example.com/content" width="600" height="400" frameborder="0"></iframe> ``` When I try to access the page in iOS Safari (iOS 15.4), I get the following behavior in the console: ``` Refused to display 'https://example.com/content' in a frame because it set 'X-Frame-Options' to 'deny'. ``` I've checked the server-side headers, and it appears that `X-Frame-Options` is being set to `DENY`, which is expected for security reasons. However, I need to embed this content within my application. I tried setting up a proxy server to fetch the content and serve it from my domain, but I'm still running into the same issues with CORS. Here's the proxy setup I attempted: ```javascript const express = require('express'); const request = require('request'); const app = express(); app.get('/proxy', (req, res) => { request('https://example.com/content').pipe(res); }); app.listen(3000, () => { console.log('Proxy server running on port 3000'); }); ``` And updated the iframe to point to this proxy: ```html <iframe src="http://localhost:3000/proxy" width="600" height="400" frameborder="0"></iframe> ``` Yet, I still want to get it to display in iOS Safari. I also verified that the CORS headers are being set correctly by the proxy server. I've tried running the application in different browsers, and it works fine in Chrome and Firefox, but not in Safari. Does anyone have any insights on how to get around this scenario or potential workarounds for embedding content securely on iOS Safari? Any help would be greatly appreciated! For context: I'm using Html on Ubuntu. I'd really appreciate any guidance on this.