Login/Register
Google Drive API, can't open standard sharing dialog via JS (x-frame-options error)
Asked Answered
Solved javascriptgoogle-drive-apisame-origin-policyx-frame-options
H

2

5

I have a JavaScript app which uses the Google Drive API. I read how to open a standard sharing dialog here: https://developers.google.com/drive/web/manage-sharing

<head>
...
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript">
    init = function() {
        s = new gapi.drive.share.ShareClient('<MY_APP_ID>');
        s.setItemIds(["<MY_FILE_ID>"]);
    }
    window.onload = function() {
        gapi.load('drive-share', init);
    }
</script>
</head>
<body>
    <button onclick="s.showSettingsDialog()">Share</button>
</body>

Seems like I do everything right, when I click my share button, the dialog starts loading but it can't be loaded.

In the console I see:

Refused to display 'https://drive.google.com/share?...' in a frame
because it set 'X-Frame-Options' to 'SAMEORIGIN'.

I've googled this error and I've seen that there are some similar questions in SO and other sites, but they don't help. I guess Google doesn't allow itself to be in a frame in a not-google-site (cause of "SAMEORIGIN").

What can I do to open sharing dialog in my app?

Hidrosis answered 12/3, 2014 at 6:53 Comment(2)
It would help if you include the code you are using to try to open the standard sharing dialog. – Cosgrove
@Fresh, included the code – Hidrosis
C
4

The "Launching the Google Drive sharing dialog in your app" page here states:

The URL of the page that launches the dialog must have the same origin as the Open URL registered for the app.

If you then look at the instructions to "Configure the Drive SDK" here, you can see that the "Open URL" section reads:

There are two important things to keep in mind for the Open URL:

  • Make sure you give a fully qualified domain name for Open URL -- localhost won't work.
  • The URL must belong to you. After the app registration is complete, you'll need to verify your ownership of this URL in order to create a Chrome Web Store listing. For more information, see Site Verification.

Hence your page which is launching the dialog does not have the same origin as the Open URL registered for the app in you Google Drive SDK settings. So to fix your problem correct the Open URL so that it has the correct URL i.e. a URL with the same origin as the Open URL. Note that you can change the Google Drive SDK settings via https://console.developers.google.com/project.

As well as making sure the Open URL is set correctly. You'll also need to substitute your Drive SDK app ID for 'MY_APP_ID'. You can find the App ID by following these instructions:

  1. Goto https://console.developers.google.com
  2. Click your project
  3. Click "APIs and auth" on the left
  4. Click the "Drive SDK" settings cog icon
  5. The "App ID" can then be found under the "Google Drive SDK" title e.g. App ID: 47XXXXXXXX3
Cosgrove answered 17/3, 2014 at 0:12 Comment(2)
I didn't know about Site Verification, thank you. But even after verification, same error occurs. Open URL is set right. Checked this 4 times, tried to add and to remove trailing slash. Nothing. Everything with gapi works fine except standard sharing dialog. – Hidrosis
Also you do know that you need to replace "<MY_APP_ID>" with your Drive SDK app ID? – Cosgrove
H
1

The problem was solved thanks to this answer https://mcmap.net/q/752797/-launching-the-google-drive-sharing-dialog-in-an-app-what-should-be-the-app_id-value

dan-man says in his answer:

Client ID You can find this in the Google Cloud Console - see above. Mine is a 12 digit number, so yours will probably be too.

Mine client id looks like

175564412906-ui22fsaghkvkkj09j2bprku55m8k3d0d.apps.googleusercontent.com

I've used this id in

s = new gapi.drive.share.ShareClient('<MY_APP_ID>');

After reading the answer, I tried to use only first 12 digits of my client id. I didn't expect it to work, I was just desperate. But the strange thing, it works perfectly!

If somebody can explain why it works and why nothing about this is said in the documentation — you are welcome to answer!

Hidrosis answered 18/3, 2014 at 7:6 Comment(3)
I've updated my answer to detail exactly where the APP ID can be found in the developers console. I agree that it is confusing that the example doesn't say explicitly where to find this. I think the writers of the documentation expect users to know this info by the time they get to this example! – Cosgrove
Thank you for explanation! Never saw App ID under the title. – Hidrosis
Glad I could help. I agree that the Google documentation is good but not quite detailed enough! – Cosgrove

© 2022 - 2024 — McMap. All rights reserved.