Struggling with using PostHog and Security Headers

[MathiasWP]

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:

[pauldambra]

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]

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]

What's the status on this issue?

[annschulte]

Any updated here?

[robbie-c]

We now set crossorigin="anonymous" on the snippet and lazily loaded scripts. @MathiasWP did this solve the issue for you?

[posthog-bot]

This issue was closed due to lack of activity. Feel free to reopen if it's still relevant.

[MathiasWP]

We now set crossorigin="anonymous" on the snippet and lazily loaded scripts. @MathiasWP did this solve the issue for you?

I will check! Thanks