CODEWITHSUNDEEP
google-apigoogle-drive-apisveltesveltekitcontent-security-policy
MikeyB
MikeyB

Reputation: 490

Unable to get CSP working right with SvelteKit, Google API and iFrames to Google Drive

I had it working but was getting the following warnings when dynamically generating iFrame elements.

Refused to frame 'https://drive.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://drive.google.com". Refused to frame 'https://accounts.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://drive.google.com".

I started going down the CSP rabbit hole and finally found examples of kit.csp.directives for the svelte.config.js file. By the way this is running on localhost for the time being, if that's a factor at all.

As I understand the idea is to set strict-dynamic so that you are properly secure, then allow specific sites, with hashes for example, generated by putting the script element into https://csplite.com/csp/sha/. I fetch these scripts from Google:

<svelte:head> <script src="https://apis.google.com/js/api.js" ></script> <script src="https://accounts.google.com/gsi/client"></script> </svelte:head>

And have this in the directives:

'script-src': [ 'self', 'https://*.google.com', 'strict-dynamic', 'sha256-nY9zk...OF8E6U=', 'sha256-dHVlb...w/WyMY=' ],

as well as

'frame-src': [ 'self', 'https://*.google.com' ],

Neither seem to be doing anything. I still get the iFrame errors and now the scripts are being blocked and the gapi variable remains undefined, and I get these errors:

Refused to load the script 'https://apis.google.com/js/api.js' because it violates the following Content Security Policy directive: "script-src 'self' https://*.google.com 'strict-dynamic' 'sha256-nY9zkpLqCJoTlcPhTEQ/7JsKePesPbIP51wK2OF8E6U=' 'sha256-dHVlb7oofZVysJeDOqDkvzIzCymAacxTFG4Uzw/WyMY=' 'nonce-c3BiGV+7FfUIUH1eorl+1g=='". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

What voodoo do I have to employ to get this working right and securely? Thanks!

EDIT for clarity: I am allowing the user to authenticate and pull up the Google Drive Picker, to select a file that could be an image or audio, which is then saved and displayed on the page in an iFrame.

Upvotes: 0

Views: 68

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3475

You get the "refused to frame" errors because the sites you try to frame have set "frame-ancestors" blocking framing by other than the specified sources.

When you set 'strict-dynamic' and the browser understands it, only hashes and nonces will be used. Host names will be ignored, you'll need to add a nonce or a correct hash (but only do this for immutable elements).

Upvotes: 0

Related Questions