jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

GitHub Pages tools

Gratis COOP/COEP/CORP Header Builder

Configureer cross-origin isolatie-headers voor SharedArrayBuffer, WASM en beveiliging.

Tool laden...

Wat is COOP/COEP/CORP Header Builder?

Cross-Origin isolatie is een set HTTP-headers die bepalen hoe een pagina interageert met cross-origin vensters en bronnen. COOP bepaalt of deze pagina toegankelijk is voor andere origins via window.opener. COEP bepaalt of cross-origin bronnen (afbeeldingen, lettertypen, scripts) kunnen worden geladen. CORP bepaalt of deze bron door andere origins kan worden geladen. Samen maken ze krachtige functies mogelijk zoals SharedArrayBuffer en hoge-resolutie timers.

Snel antwoord

Bouw Cross-Origin isolatie-headers voor SharedArrayBuffer en opener-beveiliging. COOP regelt window.opener-toegang. COEP regelt cross-origin bronladen. CORP regelt of andere origins uw bronnen kunnen laden. Gebruik de gematigde preset voor de meeste sites die isolatie nodig hebben met ondersteuning voor third-party embeds.

Last updated: 2026-05-28

Beperkingen

  • Cross-origin isolatie is een krachtige beperking die third-party embeds, CDN-bronnen, analytics en lettertypen ongemerkt kan breken. Test grondig op elk paginatype voordat u het afdwingt.
  • COEP credentialless wordt ondersteund in Chrome 113+, Edge 113+ en Firefox 128+. Oudere browsers en Safari ondersteunen het mogelijk niet, waardoor cross-origin bronnen kunnen falen.
  • Sommige hostingplatforms (waaronder GitHub Pages) ondersteunen het instellen van aangepaste COOP/COEP/CORP-headers niet. Gebruik een CDN of reverse proxy (Cloudflare, Netlify) ervoor om ze toe te voegen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Selecteer een isolatiedoelpreset of kies aangepast om elke header individueel te configureren.
  2. Bekijk de headerwaarden - strengere isolatie maakt meer functies mogelijk maar kan third-party embeds breken.
  3. Kopieer de headers en voeg ze toe aan uw server- of CDN-configuratie.
  4. Gebruik de debug-checklist om verbroken bronnen te identificeren na implementatie.

Waarvoor je het kunt gebruiken

  • Schakel SharedArrayBuffer en geavanceerde WebAssembly-functies in voor een rekenintensieve webapp.
  • Isoleer de opener-relatie van een pagina om cross-origin aanvallen te voorkomen terwijl CDN-afbeeldingen en third-party lettertypen nog worden geladen.
  • Configureer minimale isolatie die opener-toegang voorkomt maar het laden van ingebedde bronnen niet beperkt.

Gebruik

Praktische voorbeelden

Voorbeeld

Rekenintensieve webapp

Een webapp heeft SharedArrayBuffer nodig voor real-time audioverwerking. Gebruik de volledige isolatiepreset: COOP same-origin, COEP require-corp, CORP same-origin. Alle third-party bronnen moeten CORP-headers sturen of worden geladen met crossorigin.

Voorbeeld

Statische site met third-party embeds

Een blog gebruikt Google Fonts, een CDN voor afbeeldingen en ingebedde YouTube-video's. Gebruik de gematigde preset met COEP credentialless zodat third-party bronnen laden zonder CORP-headers terwijl opener-isolatie behouden blijft.

Veelgemaakte fouten

  • COEP require-corp instellen zonder te garanderen dat alle third-party bronnen CORP-headers sturen - afbeeldingen, lettertypen en scripts van CDN's zullen ongemerkt breken.
  • COOP same-origin gebruiken wanneer de pagina moet communiceren met popups of OAuth-redirectstromen gebruikt - popups hebben geen toegang tot window.opener.
  • Vergeten dat COEP credentialless nieuwer is en niet in alle browsers wordt ondersteund - controleer browsercompatibiliteit voordat u implementeert.

Verificatie

  1. Open het DevTools Console en controleer op CORP/COEP-blokkeringsfouten na het implementeren van de headers.
  2. Gebruik crossOriginIsolated in de console: self.crossOriginIsolated zou true moeten teruggeven als volledige isolatie correct werkt.

FAQ

Vragen over COOP/COEP/CORP Header Builder

Wat is het verschil tussen COEP require-corp en credentialless?

require-corp vereist dat ELKE cross-origin bron een Cross-Origin-Resource-Policy-header stuurt of wordt geladen met het crossorigin-attribuut. credentialless is een nieuwer alternatief dat automatisch credentials verwijdert van cross-origin verzoeken, waardoor third-party bronnen kunnen laden zonder CORP-headers. credentialless is beter compatibel met bestaande CDN- en third-party content.

Heb ik cross-origin isolatie nodig voor mijn site?

Alleen als u SharedArrayBuffer, hoge-resolutie performance.now() (microseconde precisie) of specifieke WebAssembly-functies nodig heeft. De meeste contentwebsites, blogs en e-commerce sites hebben GEEN cross-origin isolatie nodig. Begin met de soepele preset en verhoog de isolatie alleen als uw webapp de functies vereist die het mogelijk maakt.

Gerelateerde tools

Meer github pages tools

Probeer ook

Probeer ook