search

PostHog / posthog-js

Send usage data from your web app or site to PostHog, with autocapture.
https://posthog.com/docs/libraries/js
Other
264 stars 109 forks source link

Struggling with using PostHog and Security Headers #976

Open MathiasWP opened 7 months ago

MathiasWP commented 7 months ago

We're setting our Security Headers with Helmet.js' default values. PostHog is crashing because setting Cross-Origin-Embedder-Policy to require-corp requires the crossorigin attribute to be set to anonymous. How can this attribute be set on the PostHog scripts that are added during runtime?

Current workaround: Setting Cross-Origin-Embedder-Policy to credentialless, which is not ideal.

Screenshot of the error in Chrome:

Screenshot 2024-01-29 at 00 28 30
pauldambra commented 7 months ago

Hey @MathiasWP

I've not used COEP before and just reading up here https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy#avoiding_coep_blockage_with_cors

If you enable COEP using require-corp and have a cross origin resource that needs to be loaded, it needs to support CORS and you need to explicitly mark the resource as loadable from another origin to avoid blockage from COEP.

<img src="https://thirdparty.com/img.png" crossorigin />

eu.posthog.com should be sending the correct CORS headers, so I think this is "only" a request to add the crossorigin attribute to the appropriate script tags.

Does that sound right based on what you see with your site?

Is it only the toolbar.js that is affected for you?

MathiasWP commented 7 months ago

Hey @MathiasWP

I've not used COEP before and just reading up here developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy#avoiding_coep_blockage_with_cors

If you enable COEP using require-corp and have a cross origin resource that needs to be loaded, it needs to support CORS and you need to explicitly mark the resource as loadable from another origin to avoid blockage from COEP.

<img src="https://thirdparty.com/img.png" crossorigin />

eu.posthog.com should be sending the correct CORS headers, so I think this is "only" a request to add the crossorigin attribute to the appropriate script tags.

Does that sound right based on what you see with your site?

Is it only the toolbar.js that is affected for you?

To be honest, i am not sure if only adding crossorigin will solve this issue. The toolbar.js is affected, and i believe other scripts like recorder-v2.js are also affected. The response header of the script should have Cross-Origin-Resource-Policy set to same-site, same-origin, or cross-origin, which does not seem to be have set.

Let me know if there's any way i can help!

MathiasWP commented 6 months ago

What's the status on this issue?