Apa tujuan dari atribut “nonce” HTML untuk elemen skrip dan gaya?

W3C mengatakan ada atribut baru di HTML5.1 disebut nonceuntuk styledan scriptyang dapat digunakan oleh Content Kebijakan Keamanan dari sebuah situs web.

Saya mencari di Google tetapi akhirnya tidak mengerti apa yang sebenarnya dilakukan atribut ini dan apa yang berubah saat menggunakannya?

The nonceatribut memungkinkan Anda untuk “daftar putih” inline tertentu scriptdan styleelemen, sambil menghindari penggunaan CSP unsafe-inlinedirektif (yang akan memungkinkan semua inline script/ style), sehingga Anda masih mempertahankan fitur CSP kunci melarang inline script/ stylepada umumnya.

Jadi nonceatributnya adalah cara memberitahu browser bahwa konten inline dari skrip atau elemen gaya tertentu tidak disuntikkan ke dalam dokumen oleh beberapa pihak ketiga (jahat), tetapi dimasukkan ke dalam dokumen dengan sengaja oleh siapa pun yang mengendalikan server, dokumen tersebut dilayani dari.

https://developers.google.com/web/fundamentals/security/csp/#if_you_absolutely_must_use_it memberikan contoh yang baik tentang bagaimana menggunakan nonceatribut, yang sama dengan langkah-langkah berikut:

1. Untuk setiap permintaan yang diterima server Web Anda untuk dokumen tertentu, minta backend Anda membuat string acak yang dikodekan base64 setidaknya 128 bit data dari generator nomor acak yang aman secara kriptografis; misalnya EDNnf03nceIOfn39fn3e9h3sdfa,. Itu kekuranganmu.

2. Ambil nonce yang dihasilkan pada langkah 1, dan untuk inline script/ styleAnda ingin "daftar putih", buat kode backend Anda memasukkan nonceatribut ke dalam dokumen sebelum dikirim melalui kabel, dengan nilai itu sebagai nilainya:

   <script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">…</script>

3. Ambil nonce yang dihasilkan di langkah 1, tambahkan nonce-dulu, dan buat backend Anda menghasilkan header CSP dengan nilai di antara daftar sumber untuk script-srcatau style-src:

   Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

Jadi mekanisme menggunakan nonce adalah alternatif untuk bukannya membuat backend Anda menghasilkan hash dari konten inline scriptatau styleAnda ingin mengizinkan, dan kemudian menentukan hash di daftar sumber yang sesuai di header CSP Anda.

Perhatikan bahwa karena browser tidak (tidak dapat) memeriksa bahwa nilai nonce mengirim perubahan antara permintaan halaman, itu mungkin — meskipun sama sekali tidak disarankan — untuk melewati 1 di atas dan tidak membuat backend Anda melakukan apa pun secara dinamis untuk nonce, dalam hal ini Anda bisa saja meletakkan nonceatribut dengan nilai statis ke dalam sumber HTML dokumen Anda, dan mengirim header CSP statis dengan nilai nonce yang sama.

Tetapi alasan mengapa Anda tidak ingin menggunakan bilangan statis dengan cara itu adalah, itu akan cukup mengalahkan seluruh tujuan penggunaan bilangan bulat itu sama sekali — karena, jika Anda menggunakan bilah statis seperti itu, pada titik itu Anda mungkin hanya menggunakan unsafe-inline.