CODEWITHSUNDEEP
google-drive-apicontent-security-policygoogle-api-js-clienthelmet.js
Matthew C
Matthew C

Reputation: 716

Refused to frame because an ancestor violates the following Content Security Policy directive

I am using gapi to load a Google Drive Share Dialogue. The UI loads successfully, however, when selecting from the list "Anyone with the link" or to get a list of all contacts, I see an error "Sorry, an internal error has occurred and your request was not completed.".

The code is implemented in exact same way as the official Drive API documentation. https://developers.google.com/drive/api/guides/share-button

The code used to work for a long time and just stopped working recently. I suspect Google changed something within their gapi?

Looking at the console output, I mainly see these errors.

  1. POST https://peoplestack-pa.clients6.google.com/$rpc/peoplestack.PeopleStackAutocompleteService/Autocomplete 401
  2. Refused to frame 'https://contacts.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://drive.google.com".
  3. "status": 401, "statusText": "Unauthorized", "message": "Login Required"

The Bearer Token is present and it is successfully loaded to gapi.

I started looking at CORS configuration. It is a NextJS app with Helmet used for CORS.

For "frame-ancestors" and "frame-src": I added:

"https://contacts.google.com", "https://drive.google.com/", "https://*.clients6.google.com/", "https://*.google.com/"

(I added "https://*.google.com/" as a sanity check)

Unfortunately, it is still not working.

When inspecting the network requests in Dev Tools, the requests resulting in 401, have the following response:

"API keys are not supported by this API. Expected OAuth2 access token or other authentication credentials that assert a principal. See https://cloud.google.com/docs/authentication"

However, again, from what I see, the OAuth token is passed correctly.

When debugging, in dev console, I run

gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token

and it returns the Bearer Token used. I used that token in Postman for doing simple Google Drive API requests and I can confirm the token works OK.

I also see token_type: Bearer, and access_token, set correctly, when following is run in dev console:

gapi.auth2.getAuthInstance().currentUser

Upvotes: 4

Views: 28792

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3475

Error number 2 states that "contacts.google.com" restricts framing of the page to drive.google.com. Remember that ancestors are checked, so if your page frames drive.google.com which in turn frames contacts.google.com, all ancestors will need to pass the frame-ancestors directive. In this case it will fail for your page.

If the page you frame, or a frame inside the frame, sets this policy, there is nothing you can do on your page to relax it. You will likely need to handle it in a different way such as opening a new tab or changing the flow in some other way.

Upvotes: 1

Related Questions