Scripts fail to load with COOP-COEP (when window.crossOriginIsolated is true)

Open
#841 8 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, typescript
Domain
frontend, web-dev

Research direction

Start with packages/browser/src/lib/load-script.js and review how analytics integrations load scripts. Compare that behavior with the remote Amplitude script at the URL in the issue and the listed gtag, Reddit, and LinkedIn integrations. Done means the affected scripts load successfully under COOP/COEP with window.crossOriginIsolated true, including scripts injected by integrations.

Written by the indexing model from the issue text.

Description

We're working on making our site cross origin isolated to get access to multithreaded WASM, but once we set the headers on our page to

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Several of our analytics scripts stop loading.

image

In order to fix this you have to add a crossorigin="anonymous" attribute to the script tags.

I forked this repo & added this to packages/browser/src/lib/load-script.js at line 36:

if (window.crossOriginIsolated)
      script.setAttribute('crossorigin', 'anonymous')

Which worked for the tags that get loaded directly by analytics-next.

image

Unfortunately for some scripts, like Amplitude, it looks like they load a script that injects another script which doesn't have the crossorigin attribute & so fails to load.

image

I was able to set a breakpoint in the debugger & manually inject the attribute:

image

to verify that this fixes the issue:

image

But have no way to actually edit the code coming down from this URL https://cdn.segment.com/next-integrations/integrations/amplitude/3.3.3/amplitude.dynamic.js.gz to persist the change.

Could someone at Segment update those remote scripts to inject crossorigin="anonymous" on tags they're adding when window.crossOriginIsolated is true? Besides Amplitude, it looks like the other integrations we have that are failing are gtag, reddit and LinkedIn.

Dominant language
TypeScript
Stars
477
Forks
160
Avg merge
6h 19m
Merged PRs (30d)
4

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from segmentio/analytics-next

All issues in segmentio/analytics-next

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.