htmliosgoogle-apps-scriptiframeios14

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?

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);
}

Solution

  • 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