{"id":3553,"date":"2025-03-08T21:39:51","date_gmt":"2025-03-08T20:39:51","guid":{"rendered":"https:\/\/blog.tomayac.com\/2025\/03\/08\/setting-coop-coep-headers-on-static-hosting-like-github-pages\/"},"modified":"2025-03-08T21:39:51","modified_gmt":"2025-03-08T20:39:51","slug":"setting-the-coop-and-coep-headers-on-static-hosting-like-github-pages","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2025\/03\/08\/setting-the-coop-and-coep-headers-on-static-hosting-like-github-pages\/","title":{"rendered":"Setting the COOP and COEP headers on static hosting like GitHub Pages"},"content":{"rendered":"\n\t\t\t<p>Remember the Cross-Origin-Embedder-Policy (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Cross-Origin-Embedder-Policy\">COEP<\/a>) and the Cross-Origin-Opener-Policy (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Cross-Origin-Opener-Policy\">COOP<\/a>) headers for making your site <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/crossOriginIsolated\">cross-origin isolated<\/a>? If not, here's my colleague <a href=\"https:\/\/www.linkedin.com\/in\/agektmr\">Eiji Kitamura<\/a>'s article <a href=\"https:\/\/web.dev\/articles\/coop-coep\">Making your website &quot;cross-origin isolated&quot; using COOP and COEP <\/a>. To be effective, they need to be sent as in the example below.<\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\">cross-origin-embedder-policy: credentialless\ncross-origin-opener-policy: same-origin<\/code><\/pre>\n<p>Cross-origin isolated documents operate with fewer restrictions when using the following APIs:<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/SharedArrayBuffer\"><code>SharedArrayBuffer<\/code><\/a> can be created and sent via a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/postMessage\"><code>Window.postMessage()<\/code><\/a> or a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MessagePort\/postMessage\"><code>MessagePort.postMessage()<\/code><\/a> call.\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Performance\/now\"><code>Performance.now()<\/code><\/a> offers better precision.\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Performance\/measureUserAgentSpecificMemory\"><code>Performance.measureUserAgentSpecificMemory()<\/code><\/a> can be called.<\/p>\n<p>Typically, sending non-default HTTP headers like COOP and COEP means controlling the server so you can configure it to send them. I recently learned that they are also honored if set through a service worker \ud83e\udd2f! This means you can make apps on static hosting like on GitHub Pages cross-origin isolated!<\/p>\n<ul>\n<li>Blog post by stefnotch: <a href=\"https:\/\/dev.to\/stefnotch\/enabling-coop-coep-without-touching-the-server-2d3n\">Enabling COOP\/COEP without touching the server<\/a><\/li>\n<li>Library by Guido Zuidhof: <a href=\"https:\/\/github.com\/gzuidhof\/coi-serviceworker\">coi-serviceworker<\/a><\/li>\n<li>Demo: <a href=\"https:\/\/coi-serviceworker.glitch.me\/\">Are we cross-origin isolated?<\/a><\/li>\n<\/ul>\n<p>One example where cross-origin isolating your site is needed is with <a href=\"https:\/\/github.com\/sqlite\/sqlite-wasm\/\">SQLite Wasm<\/a> when you want to use persistent storage with the origin private file system virtual file system called <a href=\"https:\/\/sqlite.org\/wasm\/doc\/trunk\/persistence.md#coop-coep\">OPFS sqlite3_vfs<\/a>. I'm glad to have this coi-serviceworker trick up my sleeve now, and you do, too!<\/p>\n\n\t\t\t<p>\n\t\t\t\t<img alt=\"Thomas Steiner\" width=\"32\" height=\"32\" src=\"https:\/\/blog.tomayac.com\/feed.php?dl=https%3A%2F%2Fblog.tomayac.com%2F2025%2F03%2F08%2Fsetting-coop-coep-headers-on-static-hosting-like-github-pages%2F&dp=%2F2025%2F03%2F08%2Fsetting-coop-coep-headers-on-static-hosting-like-github-pages%2F&dt=Setting%20the%20COOP%20and%20COEP%20headers%20on%20static%20hosting%20like%20GitHub%20Pages\" alt=\"\">\n\t\t\t\t<br\/>This post appeared first on <a href=\"https:\/\/blog.tomayac.com\/2025\/03\/08\/setting-coop-coep-headers-on-static-hosting-like-github-pages\/\">https:\/\/blog.tomayac.com\/2025\/03\/08\/setting-coop-coep-headers-on-static-hosting-like-github-pages\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\t\t\tRemember the Cross-Origin-Embedder-Policy (COEP) and the Cross-Origin-Opener-Policy (COOP) headers for making your site cross-origin isolated? If not, here&#8217;s my colleague Eiji Kitamura&#8217;s article Making your website &quot;cross-origin isolated&quot;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3553","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3553"}],"version-history":[{"count":3,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3553\/revisions"}],"predecessor-version":[{"id":3563,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3553\/revisions\/3563"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}