Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is iframe blank only with iOS?

There is an html page that works correctly on any Windows and Android (shows content of iframe). Hosting by Github Pages. It works on iOS version 12.5.1, but no on 14.6 (blank page on Chrome, Safari, Opera). Why?

  • Tried src with wikipedia - ok everything. The problem narrows down to a combination of iframe and src of apps script (that opens separately correctly)
  • Assume that the problem was mixed http/https according to post. Just http was in style http://www.w3.org/2000/svg, I changed to https (even removed all styles). No effect.
  • No log errors, just blank page. Seems like trying to load, but break and stop. I haven't ios device to debug. Feedback user.

If you have iOS 14, can try open this site. What you see blank page or access error?

Error like the next is right. It tell about you haven't access.

Refused to display 'accounts.google.com/…' in a frame because it set 'X-Frame-Options' to 'DENY

If you sign in Google Account and try again, will be error from Google Drive. I have all this on any platform in incognito mode. Don't pay attention to them.

Only interested in the case of a blank screen/stop loading like screenshot below

iOS 14.6

enter image description here

Windows

enter image description here

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Goofy</title>
    <style>
        html, body, iframe { width: 100%; height: 100%; margin: 0; border: 0; }
    </style>
</head>
<body>
    <iframe src="https://script.google.com/macros/s/AKfycbzmAfVL_ozEP69vpYvMo3t1Qlc4orPfk7eV5rWT/exec"></iframe>
</body>
</html>

Apps Script render page with XFrameOptionsMode.ALLOWALL

function doGet() {
    return HtmlService.createHtmlOutputFromFile('launch.html')
             .addMetaTag('viewport', 'width=device-width, initial-scale=1')
             .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
like image 770
Viewed Avatar asked Jul 05 '21 05:07

Viewed


2 Answers

It’s browser side problem. Due to 3rd party cookies, Safari will block the content. Unless user set on their own, the preference to allow all cookies. Until now, I only know Safari that will do this action. Other browser, i think all okay with content in iframe that come from 3rd party.

like image 78
Shivam Avatar answered Oct 19 '22 05:10

Shivam


Cookies for cross-site resources are now blocked by default (iOS 13+). Source. Other platform (iOS 12, Windows, Android) while aren't do this. Such cookies need to verify user on github.io with iframe and google src. That's why I see the blank page on iOS 14.

Solve is go to browser's setting and allow 3rd party cookies.

Thanks Shivam's answer

like image 41
Viewed Avatar answered Oct 19 '22 04:10

Viewed