Referensi cepat header keamanan

Pelajari lebih lanjut header yang dapat menjaga keamanan situs Anda dan mencari detail terpenting dengan cepat.

Eiji Kitamura

Artur Janc

Maud Nalpas

Artikel ini mencantumkan header keamanan terpenting yang dapat Anda gunakan untuk melindungi situs Anda. Gunakan untuk memahami fitur keamanan berbasis web, mempelajari cara menerapkannya di situs Anda, dan sebagai referensi saat Anda memerlukan pengingat.

Header keamanan yang direkomendasikan untuk situs yang menangani data pengguna sensitif:: Kebijakan Keamanan Konten (CSP); Trusted Types
Header keamanan yang direkomendasikan untuk semua situs:: X-Content-Type-Options; X-Frame-Options; Cross-Origin Resource Policy (CORP); Cross-Origin Opener Policy (COOP); HTTP Strict Transport Security (HSTS)
Header keamanan untuk situs dengan kemampuan lanjutan:: Cross-Origin Resource Sharing (CORS); Cross-Origin Embedder Policy (COEP)

Ancaman umum di web

Sebelum mempelajari header keamanan, pelajari ancaman yang diketahui di web dan alasan Anda ingin menggunakan header keamanan ini.

Melindungi situs Anda dari kerentanan injeksi

Kerentanan injeksi muncul saat data yang tidak tepercaya yang diproses oleh aplikasi Anda dapat memengaruhi perilakunya dan, biasanya, menyebabkan eksekusi skrip yang dikontrol penyerang. Kerentanan paling umum yang disebabkan oleh bug injeksi adalah pembuatan skrip lintas situs (XSS) dalam berbagai bentuknya, termasuk XSS yang dipantulkan, XSS tersimpan, XSS berbasis DOM, dan varian lainnya.

Kerentanan XSS biasanya dapat memberi penyerang akses penuh ke data pengguna yang diproses oleh aplikasi dan informasi lain yang dihosting di origin web yang sama.

Pertahanan tradisional terhadap injeksi mencakup penggunaan sistem template HTML dengan autoescaping yang konsisten, menghindari penggunaan API JavaScript berbahaya, dan memproses data pengguna dengan benar dengan menghosting upload file di domain terpisah dan membersihkan HTML yang dikontrol pengguna.

Gunakan Kebijakan Keamanan Konten (CSP) untuk mengontrol skrip mana yang dapat dieksekusi oleh aplikasi Anda untuk mengurangi risiko injeksi.
Gunakan Trusted Types untuk menerapkan sanitasi data yang diteruskan ke API JavaScript berbahaya.
Gunakan X-Content-Type-Options untuk mencegah browser salah menafsirkan jenis MIME resource situs Anda, yang dapat menyebabkan eksekusi skrip.

Mengisolasi situs Anda dari situs lain

Keterbukaan web memungkinkan situs berinteraksi satu sama lain dengan cara yang dapat melanggar ekspektasi keamanan aplikasi. Hal ini mencakup pembuatan permintaan yang diautentikasi secara tidak terduga atau penyematan data dari aplikasi lain dalam dokumen penyerang, sehingga memungkinkan penyerang memodifikasi atau membaca data aplikasi.

Kerentanan umum yang merusak isolasi web mencakup clickjacking, pemalsuan permintaan lintas situs (CSRF), penyertaan skrip lintas situs (XSSI), dan berbagai kebocoran lintas situs.

Gunakan X-Frame-Options untuk mencegah dokumen Anda disematkan oleh situs berbahaya.
Gunakan Cross-Origin Resource Policy (CORP) untuk mencegah sumber daya situs Anda disertakan oleh situs lintas asal.
Gunakan Cross-Origin Opener Policy (COOP) untuk melindungi jendela situs Anda dari interaksi oleh situs berbahaya.
Gunakan Cross-Origin Resource Sharing (CORS) untuk mengontrol akses ke resource situs Anda dari dokumen lintas asal.

Pengembangan Web Pasca-Spectreadalah bacaan yang bagus jika Anda tertarik dengan header ini.

Membangun situs yang efektif dengan aman

Spectre membuat data apa pun yang dimuat ke dalam grup konteks penjelajahan yang sama berpotensi dapat dibaca meskipun ada kebijakan origin yang sama. Browser membatasi fitur yang mungkin mengeksploitasi kerentanan di balik lingkungan khusus yang disebut "isolasi lintas origin". Dengan isolasi lintas origin, Anda dapat menggunakan fitur canggih seperti SharedArrayBuffer.

Gunakan Cross-Origin Embedder Policy (COEP) bersama dengan COOP untuk mengaktifkan isolasi lintas origin.

Mengenkripsi traffic ke situs Anda

Masalah enkripsi muncul saat aplikasi tidak mengenkripsi data sepenuhnya saat dalam perjalanan, sehingga memungkinkan penyerang yang menguping mempelajari interaksi pengguna dengan aplikasi.

Enkripsi yang tidak memadai dapat muncul dalam kasus berikut: tidak menggunakan HTTPS, konten campuran, menetapkan cookie tanpa atribut Secure (atau awalan __Secure), atau logika validasi CORS yang longgar.

Gunakan HTTP Strict Transport Security (HSTS) untuk secara konsisten menayangkan konten Anda melalui HTTPS.

Kebijakan Keamanan Konten (CSP)

Pembuatan Skrip Lintas Situs (XSS) adalah serangan di mana kerentanan di situs memungkinkan skrip berbahaya disisipkan dan dieksekusi.

Content-Security-Policy menyediakan lapisan tambahan untuk mengurangi serangan XSS dengan membatasi skrip mana yang dapat dieksekusi oleh halaman.

Sebaiknya aktifkan CSP ketat menggunakan salah satu pendekatan berikut:

Jika Anda merender halaman HTML di server, gunakan CSP ketat berbasis nonce.
Jika HTML Anda harus ditayangkan atau di-cache secara statis, misalnya jika berupa aplikasi halaman tunggal, gunakan CSP ketat berbasis hash.

Contoh penggunaan: CSP berbasis nonce

Content-Security-Policy:
  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
  object-src 'none';
  base-uri 'none';

Cara menggunakan CSP

Penggunaan yang direkomendasikan

1. Menggunakan CSP ketat berbasis nonce {: #nonce-based-csp}

Jika Anda merender halaman HTML di server, gunakan CSP ketat berbasis nonce.

Buat nilai nonce skrip baru untuk setiap permintaan di sisi server dan tetapkan header berikut:

file konfigurasi server

Content-Security-Policy:
  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
  object-src 'none';
  base-uri 'none';

Di HTML, untuk memuat skrip, tetapkan atribut nonce semua tag <script> ke string {RANDOM1} yang sama.

index.html

<script nonce="{RANDOM1}" src="https://example.com/script1.js"></script>
<script nonce="{RANDOM1}">
  // Inline scripts can be used with the <code>nonce</code> attribute.
</script>

Google Foto adalah contoh CSP ketat berbasis nonce yang baik. Gunakan DevTools untuk melihat cara penggunaannya.

2. Menggunakan CSP ketat berbasis hash {: #hash-based-csp}

Jika HTML Anda harus ditayangkan atau di-cache secara statis, misalnya jika Anda membuat aplikasi halaman tunggal, gunakan CSP ketat berbasis hash.

file konfigurasi server

Content-Security-Policy:
  script-src 'sha256-{HASH1}' 'sha256-{HASH2}' 'strict-dynamic' https: 'unsafe-inline';
  object-src 'none';
  base-uri 'none';

Di HTML, Anda harus menyisipkan skrip agar dapat menerapkan kebijakan berbasis hash, karena sebagian besar browser tidak mendukung hashing skrip eksternal.

index.html

<script>
...// your script1, inlined
</script>
<script>
...// your script2, inlined
</script>

Untuk memuat skrip eksternal, baca "Memuat skrip yang bersumber secara dinamis" di bagian Opsi B: Header Respons CSP Berbasis Hash.

CSP Evaluator adalah alat yang baik untuk mengevaluasi CSP Anda, tetapi pada saat yang sama merupakan contoh CSP ketat berbasis nonce yang baik. Gunakan DevTools untuk melihat cara penggunaannya.

Browser yang didukung

* https: adalah penggantian untuk Safari dan unsafe-inline adalah penggantian untuk versi browser yang sangat lama. https: dan unsafe-inline tidak membuat kebijakan Anda kurang aman karena akan diabaikan oleh browser yang mendukung strict-dynamic. Baca selengkapnya di Menambahkan penggantian untuk mendukung Safari dan browser lama. * Safari belum mendukung strict-dynamic. Namun, CSP ketat seperti dalam contoh di atas lebih aman daripada CSP daftar yang diizinkan (dan jauh lebih aman daripada tidak ada CSP sama sekali) untuk semua pengguna Anda. Bahkan di Safari, CSP ketat melindungi situs Anda dari beberapa jenis serangan XSS, karena keberadaan CSP melarang pola tidak aman tertentu.

Hal lain yang perlu diperhatikan tentang CSP

frame-ancestors mengarahkan melindungi situs Anda dari clickjacking—risiko yang muncul jika Anda mengizinkan situs yang tidak tepercaya untuk menyematkan situs Anda. Jika lebih memilih solusi yang lebih sederhana, Anda dapat menggunakan X-Frame-Options untuk memblokir pemuatan, tetapi frame-ancestors memberi Anda konfigurasi lanjutan untuk hanya mengizinkan origin tertentu sebagai penyemat.
Anda mungkin telah menggunakan CSP untuk memastikan bahwa semua resource situs Anda dimuat melalui HTTPS. Hal ini menjadi kurang relevan: saat ini, sebagian besar browser memblokir konten campuran.
Anda juga dapat menetapkan CSP dalam mode hanya laporan.
Jika Anda tidak dapat menyetel CSP sebagai header sisi server, Anda juga dapat menyetelnya sebagai tag meta. Perhatikan bahwa Anda tidak dapat menggunakan mode khusus laporan untuk tag meta (meskipun hal ini dapat berubah).

Pelajari lebih lanjut

Trusted Types

XSS berbasis DOM adalah serangan saat data berbahaya diteruskan ke sink yang mendukung eksekusi kode dinamis seperti eval() atau .innerHTML.

Trusted Types menyediakan alat untuk menulis, meninjau keamanan, dan memelihara aplikasi yang bebas dari XSS DOM. Fitur ini dapat diaktifkan melalui CSP dan membuat kode JavaScript aman secara default dengan membatasi API web berbahaya agar hanya menerima objek khusus—Trusted Type.

Untuk membuat objek ini, Anda dapat menentukan kebijakan keamanan yang dapat memastikan bahwa aturan keamanan (seperti escaping atau sanitasi) diterapkan secara konsisten sebelum data ditulis ke DOM. Kebijakan ini kemudian menjadi satu-satunya tempat dalam kode yang berpotensi menimbulkan XSS DOM.

Contoh penggunaan

Content-Security-Policy: require-trusted-types-for 'script'

// Feature detection
if (window.trustedTypes && trustedTypes.createPolicy) {
  // Name and create a policy
  const policy = trustedTypes.createPolicy('escapePolicy', {
    createHTML: str => {
      return str.replace(/\</g, '&lt;').replace(/>/g, '&gt;');
    }
  });
}


// Assignment of raw strings is blocked by Trusted Types.
el.innerHTML = &#39;some string&#39;; // This throws an exception.

// Assignment of Trusted Types is accepted safely.
const escaped = policy.createHTML(&#39;&lt;img src=x onerror=alert(1)&gt;&#39;);
el.innerHTML = escaped;  // &#39;&amp;lt;img src=x onerror=alert(1)&amp;gt;&#39;

Cara menggunakan Trusted Types

Penggunaan yang direkomendasikan

Menerapkan Trusted Types untuk sink DOM berbahaya Header CSP dan Trusted Types:
```
Content-Security-Policy: require-trusted-types-for 'script'
```
Saat ini, 'script' adalah satu-satunya nilai yang dapat diterima untuk direktif require-trusted-types-for.

Tentu saja, Anda dapat menggabungkan Trusted Types dengan direktif CSP lainnya:

Menggabungkan CSP berbasis nonce dari atas dengan Trusted Types:

Content-Security-Policy:
  script-src &#39;nonce-{RANDOM1}&#39; &#39;strict-dynamic&#39; https: &#39;unsafe-inline&#39;;
  object-src &#39;none&#39;;
  base-uri &#39;none&#39;;
  require-trusted-types-for &#39;script&#39;;


<aside class="note"><b>Catatan: </b> Anda dapat membatasi nama kebijakan Trusted Types yang diizinkan dengan menetapkan direktif <code>trusted-types</code> tambahan (misalnya, <code>trusted-types myPolicy</code>). Namun, hal ini tidak wajib dilakukan.  </aside>


  
    Menentukan kebijakan
    Kebijakan:
    
// Feature detection
if (window.trustedTypes && trustedTypes.createPolicy) {
  // Name and create a policy
  const policy = trustedTypes.createPolicy('escapePolicy', {
    createHTML: str => {
      return str.replace(/\/g, '>');
    }
  });
}
    Catatan:  Anda dapat menentukan kebijakan dengan nama arbitrer kecuali jika Anda membatasi nama kebijakan Trusted Types yang diizinkan dengan menetapkan direktif trusted-types. 
  
  
    Terapkan kebijakan
    Gunakan kebijakan saat menulis data ke DOM:
    
// Assignment of raw strings are blocked by Trusted Types.
el.innerHTML = &#39;some string&#39;; // This throws an exception.</p>

<p>// Assignment of Trusted Types is accepted safely.
const escaped = policy.createHTML(&#39;<img src="x" onerror="alert(1)">&#39;);
el.innerHTML = escaped;  // &#39;&lt;img src=x onerror=alert(1)&gt;&#39;
    Dengan require-trusted-types-for 'script', penggunaan jenis tepercaya adalah
      persyaratan. Menggunakan API DOM berbahaya dengan string akan menyebabkan
      error.
  

Browser yang didukung

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
    
    
    
  
Pelajari lebih lanjut

  Mencegah kerentanan pembuatan skrip lintas situs berbasis DOM dengan Trusted Types
  CSP: require-trusted-types-for - HTTP |
      MDN
  CSP: trusted-types - HTTP |
      MDN
  Demo Trusted Types—buka Pemeriksa DevTools dan lihat
    apa yang terjadi



X-Content-Type-Options

Jika dokumen HTML berbahaya ditayangkan dari domain Anda (misalnya, jika gambar yang diupload ke layanan foto berisi markup HTML yang valid), beberapa browser akan memperlakukannya sebagai dokumen aktif dan mengizinkannya untuk mengeksekusi skrip dalam konteks aplikasi, sehingga menyebabkan bug cross-site scripting.

X-Content-Type-Options: nosniff mencegahnya dengan menginstruksikan browser bahwa
jenis MIME yang ditetapkan di header
Content-Type untuk respons tertentu sudah benar. Header ini direkomendasikan untuk semua resource Anda.

Contoh penggunaan
X-Content-Type-Options: nosniff


  
    
    Cara menggunakan X-Content-Type-Options


    
      Penggunaan yang direkomendasikan
X-Content-Type-Options: nosniff direkomendasikan untuk semua resource yang ditayangkan dari
  server Anda bersama dengan header Content-Type yang benar.

Contoh header yang dikirim dengan HTML dokumen
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Browser yang didukung

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
      

        Browser Support
        
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        64
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        12
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        50
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        11
      
    
  
  
  
        
        
        Source
        
      
    
    
    
  
Pelajari lebih lanjut

  X-Content-Type-Options - HTTP MDN

    
  


X-Frame-Options

Jika situs berbahaya dapat menyematkan situs Anda sebagai iframe, hal ini dapat memungkinkan penyerang memicu tindakan yang tidak diinginkan oleh pengguna dengan clickjacking. Selain itu, dalam beberapa kasus, serangan jenis Spectre memberi situs berbahaya kesempatan untuk mempelajari konten dokumen sematan.

X-Frame-Options menunjukkan apakah browser akan diizinkan untuk merender
halaman dalam <frame>, <iframe>, <embed>, atau <object>. Semua dokumen
disarankan untuk mengirim header ini guna menunjukkan apakah dokumen tersebut mengizinkan disematkan oleh dokumen lain.

Catatan:   Jika Anda memerlukan kontrol yang lebih terperinci seperti hanya mengizinkan asal tertentu menyematkan dokumen, gunakan perintah CSP frame-ancestors.  

Contoh penggunaan
X-Frame-Options: DENY


  
    
    Cara menggunakan X-Frame-Options


    
      Penggunaan yang direkomendasikan
Semua dokumen yang tidak dirancang untuk disematkan harus menggunakan header X-Frame-Options.
Anda dapat mencoba pengaruh konfigurasi berikut terhadap pemuatan iframe di demo
    ini. Ubah menu dropdown X-Frame-Options
  dan klik tombol Muat ulang iframe.
Melindungi situs Anda agar tidak disematkan oleh situs lain
Menolak disematkan oleh dokumen lain.

X-Frame-Options: DENY
Melindungi situs Anda agar tidak disematkan oleh situs lintas origin
Izinkan penyematan hanya oleh dokumen dengan asal yang sama.
X-Frame-Options: SAMEORIGIN
 Dokumen yang dapat disematkan secara default berarti developer web harus mengirim DENY atau SAMEORIGIN secara eksplisit agar tidak disematkan dan melindungi diri dari serangan saluran samping. Tim Chrome sedang mempertimbangkan untuk beralih ke pemblokiran penyematan dokumen secara default sehingga situs akan aman meskipun situs tersebut tidak menetapkan header secara eksplisit. Di dunia baru tersebut, dokumen harus secara eksplisit memilih untuk disematkan. 
Browser yang didukung

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
      

        Browser Support
        
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        4
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        12
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        4
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        4
      
    
  
  
  
        
        
        Source
        
      
    
    
    
  
Pelajari lebih lanjut

  X-Frame-Options - HTTP

    
  


Cross-Origin Resource Policy (CORP)

Penyerang dapat menyematkan resource dari origin lain, misalnya dari situs Anda, untuk mempelajari informasi tentang resource tersebut dengan mengeksploitasi kebocoran lintas situs berbasis web.

Cross-Origin-Resource-Policy mengurangi risiko ini dengan menunjukkan kumpulan situs yang dapat memuatnya. Header mengambil salah satu dari tiga nilai: same-origin, same-site, dan cross-origin. Semua resource direkomendasikan untuk mengirim header ini guna menunjukkan apakah resource tersebut mengizinkan dimuat oleh situs lain.

Contoh penggunaan
Cross-Origin-Resource-Policy: same-origin


  
    
    Cara menggunakan CORP


    
      Penggunaan yang direkomendasikan
Sebaiknya semua resource ditayangkan dengan salah satu dari tiga header berikut.
Anda dapat mencoba pengaruh konfigurasi berikut terhadap pemuatan resource di lingkungan
  Cross-Origin-Embedder-Policy: require-corp pada demo
    ini. Ubah menu dropdown Cross-Origin-Resource-Policy, lalu klik tombol Muat ulang iframe atau Muat ulang gambar untuk melihat efeknya.

Mengizinkan resource dimuat cross-origin
Sebaiknya layanan seperti CDN menerapkan cross-origin ke resource
  (karena biasanya dimuat oleh halaman lintas asal), kecuali jika resource tersebut sudah ditayangkan
  melalui CORS yang memiliki efek serupa.

Cross-Origin-Resource-Policy: cross-origin
Membatasi resource yang akan dimuat dari same-origin
same-origin harus diterapkan ke resource yang dimaksudkan untuk dimuat hanya
  oleh halaman origin yang sama. Anda harus menerapkannya ke resource yang menyertakan informasi sensitif tentang pengguna, atau respons API yang dimaksudkan untuk dipanggil hanya dari origin yang sama.
Perlu diingat bahwa resource dengan header ini masih dapat dimuat secara langsung, misalnya dengan membuka URL di jendela browser baru. Kebijakan Resource Lintas Asal hanya melindungi resource agar tidak disematkan oleh situs lain.

Cross-Origin-Resource-Policy: same-origin
Membatasi resource yang akan dimuat dari same-site
same-site sebaiknya diterapkan ke resource yang serupa dengan di atas, tetapi dimaksudkan untuk dimuat oleh subdomain lain di situs Anda.

Cross-Origin-Resource-Policy: same-site
Catatan:  Untuk mempelajari lebih lanjut perbedaan antara same-origin dan same-site, lihat Memahami "same-site" dan "same-origin". 
Browser yang didukung

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
      

        Browser Support
        
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        73
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        79
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        74
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        12
      
    
  
  
  
        
        
        Source
        
      
    
    
    
  
Pelajari lebih lanjut

  Pertimbangkan untuk men-deploy kebijakan resource lintas origin
  Membuat situs Anda "terisolasi lintas origin" menggunakan COOP dan COEP
  Alasan Anda memerlukan "diisolasi lintas asal" untuk fitur canggih

    
  


Cross-Origin Opener Policy (COOP)

Situs penyerang dapat membuka situs lain di jendela pop-up untuk mempelajari informasi tentang situs tersebut dengan mengeksploitasi kebocoran lintas situs berbasis web. Dalam beberapa kasus, hal ini juga dapat memungkinkan eksploitasi serangan saluran samping berdasarkan Spectre.

Header Cross-Origin-Opener-Policy memungkinkan dokumen mengisolasi
dirinya dari jendela lintas origin yang dibuka melalui window.open() atau link dengan
target="_blank" tanpa rel="noopener". Akibatnya, pembuka lintas origin
dokumen tidak akan memiliki referensi ke dokumen tersebut dan tidak akan dapat berinteraksi
dengannya.

Contoh penggunaan
Cross-Origin-Opener-Policy: same-origin-allow-popups


  
    
    Cara menggunakan COOP


    
      Penggunaan yang direkomendasikan
Anda dapat mencoba pengaruh konfigurasi berikut terhadap komunikasi dengan jendela pop-up lintas asal di demo ini.
  Ubah menu drop-down Cross-Origin-Opener-Policy untuk dokumen
  dan jendela pop-up, klik tombol Open a popup, lalu klik Send a
postMessage untuk melihat apakah pesan benar-benar terkirim.
Mengisolasi dokumen dari jendela lintas origin
Menyetel same-origin akan mengisolasi dokumen dari jendela dokumen lintas asal.

Cross-Origin-Opener-Policy: same-origin
Mengisolasi dokumen dari jendela lintas asal, tetapi mengizinkan pop-up
Menetapkan same-origin-allow-popups memungkinkan dokumen mempertahankan referensi ke jendela pop-upnya kecuali jika jendela tersebut menetapkan COOP dengan same-origin atau same-origin-allow-popups. Artinya, same-origin-allow-popups masih dapat
  melindungi dokumen agar tidak dirujuk saat dibuka sebagai jendela pop-up, tetapi
  memungkinkannya berkomunikasi dengan pop-upnya sendiri.


Cross-Origin-Opener-Policy: same-origin-allow-popups
Mengizinkan dokumen dirujuk oleh jendela lintas asal
unsafe-none adalah nilai default, tetapi Anda dapat secara eksplisit menunjukkan bahwa dokumen ini dapat dibuka oleh jendela lintas asal dan mempertahankan akses bersama.

 unsafe-none menjadi default berarti developer web harus mengirim same-origin atau same-origin-allow-popups secara eksplisit untuk melindungi situs mereka dari serangan saluran samping. 
Cross-Origin-Opener-Policy: unsafe-none
Catatan:  Fitur seperti SharedArrayBuffer atau performance.measureUserAgentSpecificMemory() dinonaktifkan secara default. Beberapa browser memungkinkan Anda menggunakannya dalam konteks "terisolasi lintas asal", yang mengharuskan Anda menetapkan header COOP dan COEP. Untuk mempelajari lebih lanjut, baca artikel Membuat situs Anda "terisolasi lintas asal" menggunakan COOP dan COEP. 
Pola laporan tidak kompatibel dengan COOP
Anda dapat menerima laporan saat COOP mencegah interaksi lintas jendela dengan
  Reporting API.
Cross-Origin-Opener-Policy: same-origin; report-to="coop"
COOP juga mendukung mode hanya laporan sehingga Anda dapat menerima laporan tanpa
  benar-benar memblokir komunikasi antara dokumen lintas origin.
Cross-Origin-Opener-Policy-Report-Only: same-origin; report-to="coop"
Browser yang didukung

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
      

        Browser Support
        
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        83
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        83
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        79
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        15.2
      
    
  
  
  
        
        
        Source
        
      
    
    
    
  
Pelajari lebih lanjut

  Alasan Anda memerlukan "diisolasi lintas asal" untuk fitur canggih

    
  


Cross-Origin Resource Sharing (CORS)

Tidak seperti item lain dalam artikel ini, Cross-Origin Resource Sharing (CORS) bukanlah
header, tetapi mekanisme browser yang meminta dan mengizinkan akses ke
resource lintas asal.

Secara default, browser menerapkan kebijakan origin yang sama untuk
mencegah halaman web mengakses resource lintas origin. Misalnya, saat gambar lintas asal dimuat, meskipun ditampilkan di halaman web secara visual, JavaScript di halaman tidak memiliki akses ke data gambar.
Penyedia resource dapat melonggarkan batasan dan mengizinkan situs lain membaca resource dengan memilih ikut serta menggunakan CORS.

Contoh penggunaan
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true


  
    
    Cara menggunakan CORS


    
      Sebelum mempelajari cara mengonfigurasi CORS, sebaiknya pahami perbedaan antara jenis permintaan. Bergantung pada detail permintaan, permintaan akan
  diklasifikasikan sebagai permintaan sederhana atau permintaan pra-penerbangan.
Kriteria untuk permintaan sederhana:

  Metodenya adalah GET, HEAD, atau POST.
  Header kustom hanya mencakup Accept, Accept-Language,
    Content-Language, dan Content-Type.
  
  Content-Type adalah application/x-www-form-urlencoded,
    multipart/form-data, atau text/plain.
  

Semua hal lainnya diklasifikasikan sebagai permintaan pra-penerbangan. Untuk mengetahui detail selengkapnya, lihat Cross-Origin Resource Sharing (CORS) - HTTP | MDN.
Penggunaan yang direkomendasikan
Permintaan sederhana
Jika permintaan memenuhi kriteria permintaan sederhana, browser akan mengirim
  permintaan lintas origin dengan header Origin yang menunjukkan asal
  permintaan.
Contoh header permintaan
Get / HTTP/1.1
Origin: https://example.com
Contoh header respons
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

  Access-Control-Allow-Origin: https://example.com menunjukkan bahwa
    https://example.com dapat mengakses konten respons. Resource yang dimaksudkan
    agar dapat dibaca oleh situs mana pun dapat menyetel header ini ke *, yang dalam hal ini
    browser hanya akan mewajibkan permintaan dilakukan tanpa
      kredensial.
  
  Access-Control-Allow-Credentials: true menunjukkan bahwa permintaan yang membawa
    kredensial (cookie) diizinkan untuk memuat resource. Jika tidak,
    permintaan yang diautentikasi akan ditolak meskipun origin yang meminta
    ada di header Access-Control-Allow-Origin.

Anda dapat mencoba pengaruh permintaan sederhana terhadap pemuatan resource di lingkungan
  Cross-Origin-Embedder-Policy: require-corp pada demo
    ini. Centang kotak Cross-Origin Resource Sharing, lalu klik tombol Reload the image untuk melihat efeknya.

Permintaan yang telah diperiksa
Permintaan preflight didahului dengan permintaan OPTIONS untuk memeriksa apakah
  permintaan berikutnya diizinkan untuk dikirim.
Contoh header permintaan
OPTIONS / HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

  Access-Control-Request-Method: POST memungkinkan permintaan berikut dibuat
    dengan metode POST.
  Access-Control-Request-Headers: X-PINGOTHER, Content-Type memungkinkan
    peminta menyetel header HTTP X-PINGOTHER dan Content-Type dalam
    permintaan berikutnya.

Contoh header respons
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

  Access-Control-Allow-Methods: POST, GET, OPTIONS menunjukkan bahwa permintaan berikutnya dapat dibuat dengan metode POST, GET, dan OPTIONS.
  Access-Control-Allow-Headers: X-PINGOTHER, Content-Type menunjukkan bahwa permintaan
    berikutnya dapat menyertakan header X-PINGOTHER dan Content-Type.
  Access-Control-Max-Age: 86400 menunjukkan bahwa hasil permintaan pra-penerbangan
    dapat di-cache selama 86400 detik.

Browser yang didukung

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
      

        Browser Support
        
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        4
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        12
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        3.5
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        4
      
    
  
  
  
        
        
        Source
        
      
    
    
    
  
Pelajari lebih lanjut

  Cross-Origin Resource Sharing (CORS)
  Cross-Origin Resource Sharing (CORS) - HTTP |
      MDN

    
  


Cross-Origin Embedder Policy (COEP)

Untuk mengurangi kemampuan serangan berbasis Spectre untuk mencuri resource lintas origin, fitur seperti SharedArrayBuffer atau performance.measureUserAgentSpecificMemory() dinonaktifkan secara default.

Cross-Origin-Embedder-Policy: require-corp mencegah dokumen dan pekerja memuat resource lintas asal seperti gambar, skrip, stylesheet, iframe, dan lainnya, kecuali jika resource ini secara eksplisit memilih untuk dimuat melalui header CORS atau CORP. COEP dapat digabungkan denganCross-Origin-Opener-Policy
untuk mengikutsertakan dokumen dalam isolasi lintas origin.

Gunakan Cross-Origin-Embedder-Policy: require-corp jika Anda ingin mengaktifkan
isolasi lintas asal untuk dokumen Anda.

Contoh penggunaan
Cross-Origin-Embedder-Policy: require-corp


  
    
    Cara menggunakan COEP


    
      Contoh penggunaan
COEP mengambil satu nilai require-corp. Dengan mengirim header ini, Anda dapat
  menginstruksikan browser untuk memblokir pemuatan resource yang tidak ikut serta melalui
  CORS atau CORP.


Anda dapat mencoba pengaruh konfigurasi berikut terhadap pemuatan resource di demo
    ini. Ubah menu drop-down
  Cross-Origin-Embedder-Policy, menu drop-down
  Cross-Origin-Resource-Policy, kotak centang Report Only, dll.
  untuk melihat pengaruhnya terhadap pemuatan resource. Selain itu, buka demo endpoint pelaporan untuk melihat apakah resource yang diblokir dilaporkan.

Mengaktifkan isolasi lintas origin
Aktifkan isolasi lintas asal dengan mengirim
  Cross-Origin-Embedder-Policy: require-corp bersama dengan
  Cross-Origin-Opener-Policy: same-origin.

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Aset laporan tidak kompatibel dengan COEP
Anda dapat menerima laporan resource yang diblokir yang disebabkan oleh COEP dengan Reporting
  API.
Cross-Origin-Embedder-Policy: require-corp; report-to="coep"
COEP juga mendukung mode hanya laporan sehingga Anda dapat menerima laporan tanpa benar-benar
  memblokir pemuatan resource.
Cross-Origin-Embedder-Policy-Report-Only: require-corp; report-to="coep"
Browser yang didukung

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
      

        Browser Support
        
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        83
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        83
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        79
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        15.2
      
    
  
  
  
        
        
        Source
        
      
    
    
    
  
Pelajari lebih lanjut

  Membuat situs Anda "terisolasi lintas origin" menggunakan COOP dan COEP
  Alasan Anda memerlukan "diisolasi lintas asal" untuk fitur canggih
  Panduan untuk mengaktifkan isolasi lintas origin

    
  


HTTP Strict Transport Security (HSTS)

Komunikasi melalui koneksi HTTP biasa tidak dienkripsi, sehingga data yang ditransfer dapat diakses oleh penyadap tingkat jaringan.

header Strict-Transport-Security memberi tahu browser bahwa browser tidak boleh memuat situs menggunakan HTTP dan harus menggunakan HTTPS. Setelah disetel, browser akan menggunakan
HTTPS, bukan HTTP, untuk mengakses domain tanpa pengalihan selama durasi
yang ditentukan di header.

Contoh penggunaan
Strict-Transport-Security: max-age=31536000


  
    
    Cara menggunakan HSTS


    
      Penggunaan yang direkomendasikan
Semua situs yang bertransisi dari HTTP ke HTTPS harus merespons dengan header Strict-Transport-Security saat permintaan dengan HTTP diterima.

Strict-Transport-Security: max-age=31536000
Browser yang didukung

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
      

        Browser Support
        
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        4
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        12
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        4
      
    
  
  
  
          
  
  
    
      
        
          
          
        
      
    
    
  

  
  
  
  
    
  
  
  
    
  

  
    
    
      
        7
      
    
  
  
  
        
        
        Source
        
      
    
    
    
  
Pelajari lebih lanjut

  Strict-Transport-Security -
      HTTP

    
  


Bacaan lebih lanjut


Pengembangan Web Pasca-Spectre

Referensi cepat header keamanan Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Melindungi situs Anda dari kerentanan injeksi

Mengisolasi situs Anda dari situs lain

Membangun situs yang efektif dengan aman

Mengenkripsi traffic ke situs Anda

Kebijakan Keamanan Konten (CSP)

Penggunaan yang direkomendasikan

1. Menggunakan CSP ketat berbasis nonce {: #nonce-based-csp}

2. Menggunakan CSP ketat berbasis hash {: #hash-based-csp}

Browser yang didukung

Hal lain yang perlu diperhatikan tentang CSP

Pelajari lebih lanjut

Trusted Types

Penggunaan yang direkomendasikan

Browser yang didukung

Pelajari lebih lanjut

X-Content-Type-Options

Penggunaan yang direkomendasikan

Browser yang didukung

Pelajari lebih lanjut

X-Frame-Options

Penggunaan yang direkomendasikan

Melindungi situs Anda agar tidak disematkan oleh situs lain

Melindungi situs Anda agar tidak disematkan oleh situs lintas origin

Browser yang didukung

Pelajari lebih lanjut

Cross-Origin Resource Policy (CORP)

Penggunaan yang direkomendasikan

Mengizinkan resource dimuat cross-origin

Membatasi resource yang akan dimuat dari same-origin

Membatasi resource yang akan dimuat dari same-site

Browser yang didukung

Pelajari lebih lanjut

Cross-Origin Opener Policy (COOP)

Penggunaan yang direkomendasikan

Mengisolasi dokumen dari jendela lintas origin

Mengisolasi dokumen dari jendela lintas asal, tetapi mengizinkan pop-up

Mengizinkan dokumen dirujuk oleh jendela lintas asal

Pola laporan tidak kompatibel dengan COOP

Browser yang didukung

Pelajari lebih lanjut

Cross-Origin Resource Sharing (CORS)

Penggunaan yang direkomendasikan

Permintaan sederhana

Permintaan yang telah diperiksa

Browser yang didukung

Pelajari lebih lanjut

Cross-Origin Embedder Policy (COEP)

Contoh penggunaan

Mengaktifkan isolasi lintas origin

Aset laporan tidak kompatibel dengan COEP

Browser yang didukung

Pelajari lebih lanjut

HTTP Strict Transport Security (HSTS)

Penggunaan yang direkomendasikan

Browser yang didukung

Pelajari lebih lanjut

Bacaan lebih lanjut

Referensi cepat header keamanan

Mengizinkan resource dimuat `cross-origin`

Membatasi resource yang akan dimuat dari `same-origin`

Membatasi resource yang akan dimuat dari `same-site`