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

admin管理员组

文章数量:1277404

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

Refused to frame '/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors ;. Refused to frame '/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors ;.

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 /. I fetch these scripts from Google:

<svelte:head> <script src=".js" ></script> <script src=";></script> </svelte:head>

And have this in the directives:

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

as well as

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

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 '.js' because it violates the following Content Security Policy directive: "script-src 'self' https://*.google '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.

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

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

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/csp/sha/. I fetch these scripts from Google:

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

And have this in the directives:

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

as well as

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

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/js/api.js' because it violates the following Content Security Policy directive: "script-src 'self' https://*.google '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.

• google-api
• google-drive-api
• svelte
• sveltekit
• content-security-policy

Share Improve this question Follow edited Feb 24 at 12:58 MikeyB asked Feb 24 at 12:18 MikeyBMikeyB 49011 gold badge77 silver badges2626 bronze badges 14

• Not sure what you are actually trying to achieve here, please add a proper explanation. – C3roe Commented Feb 24 at 12:49
• I don't know if drive.google is willing to allow letting itself be displayed in 3rd-party frames, under certain conditions - but you also got a message in there, Refused to frame 'https://accounts.google/' - and that pretty much must be refused, because that subdomain displays Google's auth dialog - and that of course must not be framed anywhere, because that would encourage phishing. – C3roe Commented Feb 24 at 12:51
• I am getting errors, and also I might have a vulnerable site, so I would like to properly implement CSP in my SvelteKit app. Which bit is not clear? – MikeyB Commented Feb 24 at 12:52
• The "what are you trying to do with Google Drive here exactly" bit. – C3roe Commented Feb 24 at 12:55
• Added an edit, to give clearer idea. – MikeyB Commented Feb 24 at 12:58

 |  Show 9 more comments

1 Answer 1

Sorted by: Reset to default 0

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).

本文标签：