9

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);
}
Rubén
  • 34,714
  • 9
  • 70
  • 166
Viewed
  • 1,159
  • 3
  • 16
  • 43
  • What does the console say? – Tushar Shahi Jul 05 '21 at 05:37
  • @TusharShahi looked at `chrome://inspect`, no logs, no errors – Viewed Jul 05 '21 at 05:49
  • 2
    Is it a must to use IFRAME? In the responsive-web era, IFRAME is not very popular now. Also, had you debug your mobile Safari with Mac Safari with the Developer menu enabled? – Raptor Jul 07 '21 at 08:54
  • Moreover, the `src` of the `iframe` cannot be opened. Probably due to a permission problem? – Raptor Jul 07 '21 at 08:57
  • @Raptor need to insert `src` to my host (github pages). What can do that except iframe but like iframe? Android, Windows and iOS 12 - works. Problem with iOS 14. What permission suddenly it appeared? – Viewed Jul 07 '21 at 09:01
  • You should at least debug with Mac Safari first. The console will tell. – Raptor Jul 07 '21 at 09:06
  • @Raptor no log from `chrome://inspect` and [console.log to html](https://stackoverflow.com/questions/20256760/javascript-console-log-to-html/20256785#20256785). I haven't Mac. – Viewed Jul 07 '21 at 09:08
  • sadly you cannot show your site, or people here with Mac can help. – Raptor Jul 07 '21 at 09:33
  • @Raptor added example site to `upd 4` – Viewed Jul 07 '21 at 09:36
  • @Viewed Multiple issues found: (1) Refused to display 'https://accounts.google.com/ServiceLogin?passive=1209600&continue=https%3A%2F%2Fscript.google.com%2Fmacros%2Fs%2FAKfycbzmAfVL_ozEP69vpYvMo3t1Qlc4orPfk7eV5rWT%2Fexec&followup=https%3A%2F%2Fscript.google.com%2Fmacros%2Fs%2FAKfycbzmAfVL_ozEP69vpYvMo3t1Qlc4orPfk7eV5rWT%2Fexec' in a frame because it set 'X-Frame-Options' to 'DENY'. – Raptor Jul 08 '21 at 02:17
  • (2) Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'. (3) account.google.com redirects you too many times. – Raptor Jul 08 '21 at 02:18
  • Possible related [1](https://stackoverflow.com/q/67618161/1595451) (no answers at this time). – Rubén Jul 08 '21 at 18:42

4 Answers4

4

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

Viewed
  • 1,159
  • 3
  • 16
  • 43
3

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.

Shivam
  • 370
  • 2
  • 6
2

i have create an iframe look like this :

<iframe src="https://mychatbot.com/chat?token= adadasdasd>

it doesn't work/load in IOS device

But when i change that iframe to <iframe src="//mychatbot.com/chat?token=adadasdasd>

And bammm, it work !!! i think we just need get rid of http/https out of our "src"

TuanAnh Pham
  • 21
  • 1
0

You can't frame certain websites, because the server won't allow you for security reasons (Imagine that a random page iframes your gmail and steals all your data). So you will have to modify the macro on google scripts and maybe ask other question for what you are trying to do. X-Frame-Options

PWall
  • 1
  • `X-Frame-Options` appear only with request `accounts.google.com`. It doesn't when you log in with current browser. And correctly works on Windows, Android, iOS 12. – Viewed Jul 13 '21 at 06:14