Google-api-javascript-client: Iframe issue on Safari in private mode

[Tug]

The Google Sign-In client does not work in Safari private mode.

How to reproduce

• Open a private tab in Safari.
• Visit a page which uses the google sign-in client to authenticate to a service.
• A pop-up for authentication will open. Confirm all the steps there.
• Once the pop-up closes, nothing happens and the follow up request to https://accounts.google.com/o/oauth2/iframerpc?action=issueToken&response_type=token... isn't made.
• You might see the error Unhandled promise rejection – {error: "popup_closed_by_user"} in the console.

In non-private Safari and in other browsers, the issue isn't reproducible.

Investigation

After further investigation, it seems this is probably a bug in Safari sandboxed iframe not supporting "allow-same-origin".

From this debug screenshot https://cloudup.com/cwLvDPd6urp we can see that the source property on the MessageEvent is null and it should not be. A simple fix would be to check event.origin instead in the case where event.source is null.

Issue is tracked here on wp-calypso

[TMSCH]

Hi @Tug, I just tried on Safari Private Mode on my Mac OS X and it worked fine. Are you testing this on a iOS device? What version of Safari do you have? (and iOS if it applies)

[Tug]

Thank you @TMSCH.
So I was able to reproduce on macOS Sierra with Safari 10.1 (12603.1.30.0.34) as well as on iOS 10.3.1, sorry for not mentioning that in the issue description.

Did you try the steps I described on the issue of our repository? We have a runnable version at https://calypso.live/start/social?branch=try/google-platform-js and the code for this component is here

[TMSCH]

@Tug thanks for the further information. I am indeed able to reproduce the issue on your app. It is not obvious to me what's happening, I will investigate and get back to you.

[scruffian]

@TMSCH did you find anything?

[TMSCH]

I am not able to reproduce this behavior anymore... I reproduced the steps in @Tug's first comment using https://developers.google.com/identity/sign-in/web/sign-in#add_a_google_sign-in_button and it works fine. I am using Safari 10.1.2 Private Mode on macOS.

@scruffian would you have more details on your setup?

[hendryl]

Also have a problem here with Safari Private Mode Version 10.1.2 (12603.3.8)

The popup shows up fine at first, but after signing in, I get the popup_closed_by_user error. Pressing the button again shows the popup again but it immediately closes and returns popup_closed_by_user error.

Here's my sample code, I'm using a custom React UI for the button.

// googleAuth is the instance received from gapi.auth2.init
return this.googleAuth.signIn({
  scope: 'profile email',
}).then(user => {
  // do stuff 
}, err => {
  if (err.error === 'popup_closed_by_user') {
    // always enters this block with error code popup_closed_by_user
  }
})

[dan-kwiat]

Same problem here with a custom sign in button in macOS Safari 11.0 with private browsing enabled. After completing the form it closes with error: "popup_closed_by_user".

[TMSCH]

Thanks @dan-kwiat and @hendryl for reporting the issue. We are investigating but are having troubles reproducing the issue. I will keep you updated.

[yurynix]

I can still reproduce it with https://wordpress.com/log-in on Safari Version 11.0 (12604.1.38.1.7)

Original code here.

[TMSCH]

Thanks @yurynix for the report.

We think we have identified the root cause of this issue in Safari 11, which is slightly different from the original report by @Tug, and I suspect that the original report still applies to the versions of Safari mentioned.

In Safari 11, they changed the behavior of their webstorage in Private mode, which breaks some internal mechanism of GSI.

We are investigating a solution to the issue.

[TMSCH]

@Tug @scruffian @hendryl @dan-kwiat @yurynix it just occurred to me that there actually is a work around... If you are ok with a redirect-based flow instead of a popup flow, the library will work in Safari Private Mode regardless of the version. I just tried and it works.

You can set ux_mode: 'redirect' in the gapi.auth2.init call (or signIn) and it will redirect to the Google Sign-In flow, then redirect back to the app and sign in the user.

Let me know if that's an option! In the meantime, we're still working on a solution for the popup-based flow.

[TMSCH]

@Tug We released the fix for Safari Private Mode. Let me know if you observe any issue!

Safari 11 issue is tracked in #342

[herin0506]

I am facing issue with oAuth2.0 login flow only in safari (mac + ios). The popup for login opens, after entering credentials the url of popup modal changes after successful login but the modal does not close hence the redirection doesn't happen and so the use can not enter the application.
Note: This not only for private mode browser but for normal also.

Need support on priority. This is working on all browsers of all the platforms.