Google Drive API, can't open standard sharing dialog via JS (x-frame-options error)

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?

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:

Goto https://console.developers.google.com
Click your project
Click "APIs and auth" on the left
Click the "Drive SDK" settings cog icon
The "App ID" can then be found under the "Google Drive SDK" title e.g. App ID: 47XXXXXXXX3

imkost

The problem was solved thanks to this answer https://stackoverflow.com/a/20742994/1185123

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!

来源：https://stackoverflow.com/questions/22344055/google-drive-api-cant-open-standard-sharing-dialog-via-js-x-frame-options-err

标签

javascript

google-drive-api

same-origin-policy

x-frame-options