ghostdevv / svelte-turnstile

A lightweight Svelte component for Cloudflare Turnstile
https://svelte-turnstile.pages.dev/
MIT License
163 stars 10 forks source link

Content Security Policy support? #18

Closed piperun closed 2 months ago

piperun commented 1 year ago

From testing things out with: svelte.config.js:

csp: {
    mode: "auto",
    directives: {
        'script-src': ['self', 'https://challenges.cloudflare.com', ],
        'frame-src': ['self', 'https://challenges.cloudflare.com'],
        'worker-src': ['self']
            }
},    

It seems that it'll still refuse to run 1 script and 1 worker:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://challenges.cloudflare.com 'nonce-[random]'". Either the 'unsafe-inline' keyword, a hash ('[sha256]'), or a nonce ('nonce-...') is required to enable inline execution.

index.ts:22 Refused to create a worker from 'blob:https://ip_adress:5173/<id>' because it violates the following Content Security Policy directive: "worker-src 'self'".

Now if I understand it correctly adding: nonce="%sveltekit.nonce%" like this:

        <script
            nonce="%sveltekit.nonce%"
            src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
            on:load={loadCallback}
            async></script>

Should make it work, but I'll admit I'm no expert at CSP.

ghostdevv commented 1 year ago

Hey @piperun did you get it to work with %sveltekit.nonce%? As far as I know you can use csp here as long as you aren't prerendering that page

piperun commented 1 year ago

I went the "lazy" route and copy-pasted the hash the error message gives, so I assume in my case it is prerendering, or maybe I'm missing something (haven't really touched upon csp so I can only more or less quote the svelte doc about CSP).

ghostdevv commented 1 year ago

I think using hash here might cause it to break when the turnstile script updates but I am not 100% sure without looking into it. I'm not sure if we can conditionally add a %sveltekit.nonce% but it might be worth a try, thought it will only work when people use SvelteKit and don't prerender that page

EdenKahane commented 11 months ago

Even though it would be very useful!

ghostdevv commented 2 months ago

Gonna go ahead and close this for now as it's not something we could really support unless turnstile provides a way :/