Referensi cepat header keamanan

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

Eiji Kitamura
Artur Janc
Artur Janc
X GitHub
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.

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.

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.

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.

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

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

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

  1. 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>


    
  
  1. 
    
    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, '>');
    }
  });
}
    
    
  
    2. 
  
  2. 
    
    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.
    
  
    3. 



Browser yang didukung



  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
    
    
    
  


Pelajari lebih lanjut

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

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