<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Sike Ren</title>
    <description>The latest articles on DEV Community by Sike Ren (@sike_ren_f38951df83469817).</description>
    <link>https://dev.to/sike_ren_f38951df83469817</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4065087%2Fdfdd209b-554e-4758-83fc-614ce28e35f3.jpg</url>
      <title>DEV Community: Sike Ren</title>
      <link>https://dev.to/sike_ren_f38951df83469817</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sike_ren_f38951df83469817"/>
    <language>en</language>
    <item>
      <title>Why SharedArrayBuffer forced me to delete every third-party script on my site</title>
      <dc:creator>Sike Ren</dc:creator>
      <pubDate>Thu, 06 Aug 2026 04:35:10 +0000</pubDate>
      <link>https://dev.to/sike_ren_f38951df83469817/why-sharedarraybuffer-forced-me-to-delete-every-third-party-script-on-my-site-4fa6</link>
      <guid>https://dev.to/sike_ren_f38951df83469817/why-sharedarraybuffer-forced-me-to-delete-every-third-party-script-on-my-site-4fa6</guid>
      <description>&lt;p&gt;I wanted multithreaded ffmpeg running in a browser tab. What I got, several steps&lt;br&gt;
  later, was a site with zero third-party scripts — no analytics vendor, no font CDN,&lt;br&gt;
  no embedded video, no chat widget. Not because I took a principled stand on privacy.&lt;br&gt;
  Because the platform stopped allowing them, and by then it was too late to argue.&lt;/p&gt;

&lt;p&gt;Here's the chain, because each link is obvious in isolation and the destination is not.&lt;/p&gt;
&lt;h2&gt;
  
  
  The chain
&lt;/h2&gt;

&lt;p&gt;ffmpeg is a C program that uses threads. Compiled to WebAssembly via Emscripten,&lt;br&gt;
  those threads become Web Workers, and the workers need to share one linear memory&lt;br&gt;
  with the main thread. Shared memory in a browser means one thing: &lt;code&gt;SharedArrayBuffer&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;SharedArrayBuffer&lt;/code&gt; was restricted after Spectre, because a shared buffer plus a&lt;br&gt;
  high-resolution timer is a usable side-channel. Browsers brought it back behind a&lt;br&gt;
  gate: your document must be &lt;strong&gt;cross-origin isolated&lt;/strong&gt;. That means two response&lt;br&gt;
  headers on the document:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;On Cloudflare Pages this is a plain text file at &lt;code&gt;public/_headers&lt;/code&gt;, no build step,&lt;br&gt;
  no framework config:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    Cross-Origin-Opener-Policy: same-origin
    Cross-Origin-Embedder-Policy: require-corp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Verify it in the console, not by reading your config:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="nx"&gt;crossOriginIsolated&lt;/span&gt;              &lt;span class="c1"&gt;// must be true&lt;/span&gt;
  &lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;SharedArrayBuffer&lt;/span&gt;         &lt;span class="c1"&gt;// 'function'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If &lt;code&gt;crossOriginIsolated&lt;/code&gt; is &lt;code&gt;false&lt;/code&gt;, ffmpeg.wasm silently falls back to&lt;br&gt;
  single-threaded and you spend an afternoon wondering why encoding is slow.&lt;/p&gt;

&lt;h2&gt;
  
  
  What COEP: require-corp actually does
&lt;/h2&gt;

&lt;p&gt;This is where the third-party scripts died. &lt;code&gt;require-corp&lt;/code&gt; says: every cross-origin&lt;br&gt;
  subresource must explicitly opt in to being embedded, either by sending&lt;br&gt;
  &lt;code&gt;Cross-Origin-Resource-Policy: cross-origin&lt;/code&gt; or by being loaded with CORS.&lt;/p&gt;

&lt;p&gt;Almost nothing on the open web sends CORP. So:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Third-party analytics is gone.&lt;/strong&gt; A &lt;code&gt;&amp;lt;script src="https://vendor.example/a.js"&amp;gt;&lt;/code&gt;
is a no-cors request. No CORP header on the response, no script. Every hosted
analytics vendor I checked, self-hosted or not, fails this.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Google Fonts is gone.&lt;/strong&gt; The stylesheet request from &lt;code&gt;fonts.googleapis.com&lt;/code&gt; is
not CORS, so it never loads, so the &lt;code&gt;@font-face&lt;/code&gt; rules never arrive.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Embeds are gone.&lt;/strong&gt; A YouTube iframe, a demo video, an embedded widget — iframes
are subject to the same rule, and none of them send CORP.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;COOP: same-origin&lt;/code&gt; breaks popup flows too.&lt;/strong&gt; It severs the &lt;code&gt;window.opener&lt;/code&gt;
relationship with cross-origin windows, which is exactly the channel that
popup-based OAuth uses to hand a token back to you.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There is a softer variant, &lt;code&gt;Cross-Origin-Embedder-Policy: credentialless&lt;/code&gt;, which&lt;br&gt;
  loads cross-origin no-cors resources without credentials instead of blocking them.&lt;br&gt;
  It's the escape hatch if you need third-party images or media — check current&lt;br&gt;
  browser support before you build on it. I went with &lt;code&gt;require-corp&lt;/code&gt; because I needed&lt;br&gt;
  nothing from anyone else.&lt;/p&gt;

&lt;h2&gt;
  
  
  What still works
&lt;/h2&gt;

&lt;p&gt;Same-origin resources are unaffected: your own fonts, your own images, your own JS.&lt;br&gt;
  And crucially, a &lt;strong&gt;CORS &lt;code&gt;fetch&lt;/code&gt; to your own API is fine&lt;/strong&gt; — CORS requests satisfy&lt;br&gt;
  the opt-in requirement.&lt;/p&gt;

&lt;p&gt;So analytics became about twenty lines posting an event name to my own Cloudflare&lt;br&gt;
  Worker, and a token-protected plaintext URL to read the counters back. Five events:&lt;br&gt;
  page loaded, batch finished, checkout opened, licence verified, encoder failed.&lt;br&gt;
  That's enough to tell me which step of the funnel is broken, which is the only&lt;br&gt;
  thing I ever actually used a dashboard for.&lt;/p&gt;

&lt;h2&gt;
  
  
  The part I didn't plan
&lt;/h2&gt;

&lt;p&gt;The tool encodes video locally and uploads nothing. Every site that claims something&lt;br&gt;
  like that is asking you to trust a sentence in a footer.&lt;/p&gt;

&lt;p&gt;Cross-origin isolation turns it into something you can check in ten seconds: open&lt;br&gt;
  DevTools → Network, run a batch, watch it stay empty. Load the page once, go&lt;br&gt;
  offline, encode again — it still works, because there's no server in the path.&lt;/p&gt;

&lt;p&gt;And the stronger version: I &lt;em&gt;can't&lt;/em&gt; quietly leak your data through a third party,&lt;br&gt;
  because the browser will not let me load one. The privacy property isn't a promise&lt;br&gt;
  I'm making; it's a consequence of a constraint I accepted for an unrelated reason.&lt;/p&gt;

&lt;h2&gt;
  
  
  Honest costs
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You own your analytics forever. No Sentry, no session replay, no funnel tool. When
something breaks in production you have the events you thought to add, and nothing else.&lt;/li&gt;
&lt;li&gt;No embedded demo video on your own landing page. Self-host the file or use a GIF.&lt;/li&gt;
&lt;li&gt;No drop-in chat widget, no support tooling, no A/B testing service.&lt;/li&gt;
&lt;li&gt;If you genuinely need a third-party resource later, your options are self-host it
or proxy it through your own origin. Both are work you didn't budget for.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For a tool whose whole premise is that nothing leaves the tab, that trade was free.&lt;br&gt;
  If you're building anything else, understand that turning on &lt;code&gt;SharedArrayBuffer&lt;/code&gt;&lt;br&gt;
  means adopting all of it — the isolation is not a flag you can scope to one route.&lt;/p&gt;

&lt;h2&gt;
  
  
  One link
&lt;/h2&gt;

&lt;p&gt;The thing I built with it is &lt;a href="https://batchcrunch.com" rel="noopener noreferrer"&gt;BatchCrunch&lt;/a&gt; — drop a folder&lt;br&gt;
  of video, it compresses all of them locally via ffmpeg.wasm. But the headers above&lt;br&gt;
  are the part worth stealing.&lt;/p&gt;

&lt;p&gt;Happy to answer anything about the setup, the Emscripten pthread build, or the&lt;br&gt;
  worker-side licence check in the comments.&lt;/p&gt;

</description>
      <category>webassembly</category>
      <category>webdev</category>
      <category>performance</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
