Memantau aplikasi web dengan Reporting API

Gunakan Reporting API untuk memantau pelanggaran keamanan, panggilan API yang tidak digunakan lagi, dan lainnya.

Maud Nalpas
Maud Nalpas

Beberapa error hanya terjadi dalam produksi. Anda tidak akan melihatnya secara lokal atau selama pengembangan karena pengguna sungguhan, jaringan sungguhan, dan perangkat sungguhan mengubah game. Reporting API membantu menemukan beberapa error ini—seperti pelanggaran keamanan atau panggilan API yang tidak digunakan lagi dan akan segera dihentikan di seluruh situs Anda, dan mengirimkannya ke endpoint yang telah Anda tentukan.

Hal ini memungkinkan Anda mendeklarasikan hal yang ingin dipantau melalui header HTTP, dan dioperasikan oleh browser.

Dengan menyiapkan Reporting API, Anda akan tahu bahwa saat pengguna mengalami jenis error ini, Anda akan tahu sehingga Anda dapat memperbaikinya.

Postingan ini membahas apa yang dapat dilakukan API ini dan cara menggunakannya. Ayo kita mulai!

Demo dan kode

Lihat cara kerja Reporting API mulai dari Chrome 96 dan yang lebih baru (Chrome Beta atau Canary, mulai Oktober 2021).

Ringkasan

Diagram yang merangkum langkah-langkah di bawah, mulai dari pembuatan laporan hingga akses laporan oleh developer
Cara laporan dibuat dan dikirim.

Anggaplah situs Anda, site.example, memiliki Kebijakan Keamanan Konten dan Kebijakan Dokumen. Tidak tahu apa fungsinya? Tidak apa-apa, Anda masih akan dapat memahami contoh ini.

Anda memutuskan untuk memantau situs untuk mengetahui kapan kebijakan ini dilanggar, tetapi juga karena Anda ingin mengawasi API yang tidak digunakan lagi atau yang akan segera tidak digunakan lagi yang mungkin digunakan oleh codebase Anda.

Untuk melakukannya, konfigurasikan header Reporting-Endpoints, dan petakan nama endpoint tersebut melalui perintah report-to dalam kebijakan Anda jika diperlukan.

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
# Content-Security-Policy violations and Document-Policy violations
# will be sent to main-endpoint
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0; report-to=main-endpoint;
# Deprecation reports don't need an explicit endpoint because
# these reports are always sent to the `default` endpoint

Sesuatu yang tidak terduga terjadi, dan kebijakan ini dilanggar kepada beberapa pengguna Anda.

Contoh pelanggaran

index.html

<script src="script.js"></script>
<!-- CSP VIOLATION: Try to load a script that's forbidden as per the Content-Security-Policy -->
<script src="https://example.com/script.js"></script>

script.js, dimuat oleh index.html

// DOCUMENT-POLICY VIOLATION: Attempt to use document.write despite the document policy
try {
  document.write('<h1>hi</h1>');
} catch (e) {
  console.log(e);
}
// DEPRECATION: Call a deprecated API
const webkitStorageInfo = window.webkitStorageInfo;

Browser akan membuat laporan pelanggaran CSP, laporan pelanggaran Kebijakan Dokumen, dan laporan Penghentian Penggunaan yang mencatat masalah ini.

Dengan penundaan singkat—hingga satu menit—browser akan mengirim laporan ke endpoint yang telah dikonfigurasi untuk jenis pelanggaran ini. Laporan dikirim out-of-band oleh browser itu sendiri (bukan oleh server atau situs Anda).

Endpoint menerima laporan ini.

Sekarang Anda dapat mengakses laporan di endpoint ini dan memantau apa yang salah. Anda siap untuk mulai memecahkan masalah yang memengaruhi pengguna Anda.

Contoh laporan

{
  "age": 2,
  "body": {
    "blockedURL": "https://site2.example/script.js",
    "disposition": "enforce",
    "documentURL": "https://site.example",
    "effectiveDirective": "script-src-elem",
    "originalPolicy": "script-src 'self'; object-src 'none'; report-to main-endpoint;",
    "referrer": "https://site.example",
    "sample": "",
    "statusCode": 200
  },
  "type": "csp-violation",
  "url": "https://site.example",
  "user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
}

Kasus penggunaan dan jenis laporan

Reporting API dapat dikonfigurasi untuk membantu Anda memantau berbagai jenis peringatan atau masalah menarik yang terjadi di seluruh situs Anda:

Jenis laporan Contoh situasi saat laporan akan dibuat
Pelanggaran CSP (khusus Level 3) Anda telah menetapkan Content-Security-Policy (CSP) di salah satu halaman Anda, tetapi halaman tersebut mencoba memuat skrip yang tidak diizinkan oleh CSP Anda.
Pelanggaran COOP Anda telah menetapkan Cross-Origin-Opener-Policy di halaman, tetapi jendela lintas origin mencoba berinteraksi langsung dengan dokumen.
Pelanggaran COEP Anda telah menetapkan Cross-Origin-Embedder-Policy di halaman, tetapi dokumen tersebut menyertakan iframe lintas origin yang tidak diikutsertakan untuk dimuat oleh dokumen lintas origin.
Pelanggaran Kebijakan Dokumen Halaman memiliki kebijakan dokumen yang mencegah penggunaan document.write, tetapi skrip akan mencoba memanggil document.write.
Pelanggaran kebijakan izin Halaman ini memiliki kebijakan izin yang mencegah penggunaan mikrofon, dan skrip yang meminta input audio.
Peringatan penghentian Halaman menggunakan API yang tidak digunakan lagi atau tidak akan digunakan lagi. API memanggilnya secara langsung atau melalui skrip pihak ketiga tingkat atas.
Intervensi Halaman mencoba melakukan sesuatu yang tidak dilakukan browser karena alasan keamanan, performa, atau pengalaman pengguna. Contoh di Chrome: halaman menggunakan document.write pada jaringan lambat atau memanggil navigator.vibrate dalam frame lintas origin yang belum berinteraksi dengan pengguna.
Tabrakan Browser error saat situs Anda dibuka.

Laporan

Seperti apa tampilan laporan?

Browser mengirim laporan ke endpoint yang telah Anda konfigurasi. Metode ini mengirimkan permintaan yang terlihat seperti berikut:

POST
Content-Type: application/reports+json

Payload permintaan ini adalah daftar laporan.

Contoh daftar laporan

[
  {
    "age": 420,
    "body": {
      "columnNumber": 12,
      "disposition": "enforce",
      "lineNumber": 11,
      "message": "Document policy violation: document-write is not allowed in this document.",
      "policyId": "document-write",
      "sourceFile": "https://site.example/script.js"
    },
    "type": "document-policy-violation",
    "url": "https://site.example/",
    "user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
  },
  {
    "age": 510,
    "body": {
      "blockedURL": "https://site.example/img.jpg",
      "destination": "image",
      "disposition": "enforce",
      "type": "corp"
    },
    "type": "coep",
    "url": "https://dummy.example/",
    "user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
  }
]

Berikut ini data yang dapat Anda temukan di setiap laporan tersebut:

Kolom Deskripsi
age Jumlah milidetik antara stempel waktu laporan dan waktu saat ini.
body Data laporan sebenarnya, yang diserialkan ke string JSON. Kolom yang terdapat dalam body laporan ditentukan oleh type laporan. ⚠️ Laporan dengan jenis yang berbeda memiliki badan yang berbeda. Untuk melihat isi persis dari setiap jenis laporan, lihat endpoint pelaporan demo dan ikuti petunjuk guna membuat laporan contoh.
type Jenis laporan, misalnya csp-violation atau coep.
url Alamat dokumen atau pekerja tempat laporan dibuat. Data sensitif seperti nama pengguna, sandi, dan fragmen dihapus dari URL ini.
user_agent Header User-Agent permintaan tempat laporan dibuat.

Laporan berkredensial

Endpoint pelaporan yang memiliki asal yang sama dengan halaman yang membuat laporan akan menerima kredensial (cookie) dalam permintaan yang berisi laporan tersebut.

Kredensial dapat memberikan konteks tambahan yang berguna tentang laporan; misalnya, apakah akun pengguna tertentu memicu error secara konsisten, atau apakah urutan tindakan tertentu yang dilakukan di halaman lain memicu laporan di halaman ini.

Kapan dan bagaimana cara browser mengirim laporan?

Laporan dikirim secara out-of-band dari situs Anda: browser mengontrol kapan laporan dikirim ke endpoint yang dikonfigurasi. Selain itu, tidak ada cara untuk mengontrol kapan browser mengirim laporan; browser mengambil, mengantrekan, dan mengirimkannya secara otomatis pada waktu yang sesuai.

Ini berarti hampir tidak ada atau tidak ada masalah performa saat menggunakan Reporting API.

Laporan dikirim dengan penundaan—hingga satu menit—untuk meningkatkan peluang pengiriman laporan dalam batch. Tindakan ini akan menghemat bandwidth untuk menyesuaikan dengan koneksi jaringan pengguna, yang sangat penting di perangkat seluler. Browser juga dapat menunda pengiriman jika sedang sibuk memproses pekerjaan dengan prioritas yang lebih tinggi, atau jika pengguna berada dalam jaringan yang lambat dan/atau padat pada saat itu.

Masalah pihak ketiga dan pihak pertama

Laporan yang dibuat karena pelanggaran atau penghentian penggunaan yang terjadi di halaman Anda akan dikirim ke endpoint yang telah Anda konfigurasi. Hal ini mencakup pelanggaran yang dilakukan oleh skrip pihak ketiga yang berjalan di halaman Anda.

Pelanggaran atau penghentian yang terjadi di iframe lintas origin yang disematkan di halaman Anda tidak akan dilaporkan ke endpoint (setidaknya tidak secara default). iframe dapat menyiapkan pelaporan sendiri dan bahkan melaporkan ke layanan pelaporan situs Anda—yaitu, layanan pelaporan pihak pertama; namun, hal ini bergantung pada situs yang dibingkai. Perlu diketahui juga bahwa sebagian besar laporan hanya dibuat jika kebijakan halaman dilanggar, serta bahwa kebijakan halaman dan kebijakan iframe berbeda.

Contoh dengan penghentian penggunaan

Jika header Reporting-Endpoint disiapkan di halaman Anda: API yang tidak digunakan lagi dan dipanggil oleh skrip pihak ketiga yang berjalan di halaman Anda akan dilaporkan ke endpoint. API yang tidak digunakan lagi yang dipanggil oleh iframe yang disematkan di halaman Anda tidak akan dilaporkan ke endpoint. Laporan penghentian hanya akan dibuat jika server iframe telah menyiapkan Endpoint Pelaporan, dan laporan ini akan dikirim ke endpoint mana pun yang telah disiapkan oleh server iframe.
Jika header Reporting-Endpoint disiapkan di halaman Anda: API yang tidak digunakan lagi dan dipanggil oleh skrip pihak ketiga yang berjalan di halaman Anda akan dilaporkan ke endpoint Anda. API yang tidak digunakan lagi yang dipanggil oleh iframe yang disematkan di halaman Anda tidak akan dilaporkan ke endpoint. Laporan penghentian hanya akan dibuat jika server iframe telah menyiapkan Endpoint Pelaporan, dan laporan ini akan dikirim ke endpoint mana pun yang telah disiapkan oleh server iframe.

Dukungan browser

Tabel di bawah meringkas dukungan browser untuk Reporting API v1, yaitu dengan header Reporting-Endpoints. Dukungan browser untuk Reporting API v0 (header Report-To) sama, kecuali untuk satu jenis laporan: Network Error Logging tidak didukung di Reporting API baru. Baca panduan migrasi untuk mengetahui detailnya.

Jenis laporan Chrome Chrome iOS Safari Firefox Edge
Pelanggaran CSP (khusus Level 3)* ✔ Ya ✔ Ya ✔ Ya ✘ Tidak ✔ Ya
Logging Error Jaringan ✘ Tidak ✘ Tidak ✘ Tidak ✘ Tidak ✘ Tidak
Pelanggaran COOP/COEP ✔ Ya ✘ Tidak ✔ Ya ✘ Tidak ✔ Ya
Semua jenis lainnya: Pelanggaran Kebijakan Dokumen, Penghentian Penggunaan, Intervensi, Error ✔ Ya ✘ Tidak ✘ Tidak ✘ Tidak ✔ Ya

Tabel ini hanya merangkum dukungan untuk report-to dengan header Reporting-Endpoints baru. Baca tips migrasi pelaporan CSP jika Anda ingin bermigrasi ke Reporting-Endpoints.

Menggunakan Reporting API

Menentukan tujuan pengiriman laporan

Ada dua opsi:

  • Mengirim laporan ke layanan pengumpul laporan yang ada.
  • Kirim laporan ke kolektor pelaporan yang Anda buat dan operasikan sendiri.

Opsi 1: Gunakan layanan pengumpul laporan yang ada

Beberapa contoh layanan pengumpul laporan adalah:

Jika Anda mengetahui solusi lain, buka masalah untuk memberi tahu kami, dan kami akan memperbarui postingan ini.

Selain harga, pertimbangkan hal-hal berikut saat memilih pengumpul laporan: 🧐

  • Apakah kolektor ini mendukung semua jenis laporan? Misalnya, tidak semua solusi endpoint pelaporan mendukung laporan COOP/COEP.
  • Apakah Anda merasa nyaman untuk membagikan salah satu URL aplikasi Anda kepada pengumpul laporan pihak ketiga? Meskipun browser menghapus informasi sensitif dari URL tersebut, informasi sensitif mungkin akan bocor dengan cara ini. Jika hal ini terdengar terlalu berisiko untuk aplikasi Anda, operasikan endpoint pelaporan Anda sendiri.

Opsi 2: Membuat dan mengoperasikan pengumpul laporan Anda sendiri

Membangun server Anda sendiri yang menerima laporan bukanlah hal yang mudah. Untuk memulai, Anda dapat melakukan fork boilerplate ringan kami. Fitur ini dibuat dengan Express dan dapat menerima serta menampilkan laporan.

  1. Buka pengumpul laporan boilerplate.

  2. Klik Remix untuk Mengedit agar project dapat diedit.

  3. Sekarang Anda memiliki clone! Anda dapat menyesuaikannya untuk tujuan Anda sendiri.

Jika Anda tidak menggunakan boilerplate dan membangun server Anda sendiri dari awal:

  • Periksa permintaan POST dengan Content-Type bernilai application/reports+json untuk mengenali permintaan laporan yang dikirim oleh browser ke endpoint Anda.
  • Jika endpoint Anda berada di origin yang berbeda dengan situs, pastikan endpoint tersebut mendukung permintaan preflight CORS.

Opsi 3: Gabungkan Opsi 1 dan 2

Anda mungkin ingin mengizinkan penyedia tertentu menangani beberapa jenis laporan, tetapi memiliki solusi internal untuk yang lain.

Dalam kasus ini, tetapkan beberapa endpoint sebagai berikut:

Reporting-Endpoints: endpoint-1="https://reports-collector.example", endpoint-2="https://my-custom-endpoint.example"

Mengonfigurasi header Reporting-Endpoints

Tetapkan header respons Reporting-Endpoints. Nilainya harus berupa salah satu atau serangkaian key-value pair yang dipisahkan koma:

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"

Jika Anda bermigrasi dari Reporting API lama ke Reporting API baru, sebaiknya tetapkan Reporting-Endpoints dan Report-To secara. Lihat detailnya dalam panduan migrasi. Secara khusus, jika Anda menggunakan pelaporan atas pelanggaran Content-Security-Policy melalui perintah report-uri saja, periksa langkah-langkah migrasi untuk pelaporan CSP.

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
Report-To: ...

Kunci (nama endpoint)

Setiap kunci dapat berupa nama pilihan Anda, seperti main-endpoint atau endpoint-1. Anda dapat memutuskan untuk menetapkan endpoint bernama yang berbeda untuk berbagai jenis laporan—misalnya, my-coop-endpoint, my-csp-endpoint. Dengan demikian, Anda dapat merutekan laporan ke berbagai endpoint bergantung pada jenisnya.

Jika Anda ingin menerima laporan intervensi, deprecation, dan/atau crash, tetapkan endpoint dengan nama default.

Jika header Reporting-Endpoints tidak menentukan endpoint default, laporan jenis ini tidak akan dikirim (meskipun akan dibuat).

Nilai (URL)

Setiap nilai adalah URL pilihan Anda, yang menjadi tujuan pengiriman laporan. URL yang ditetapkan di sini bergantung pada apa yang Anda putuskan pada Langkah 1.

URL endpoint:

Contoh

Reporting-Endpoints: my-coop-endpoint="https://reports.example/coop", my-csp-endpoint="https://reports.example/csp", default="https://reports.example/default"

Anda kemudian dapat menggunakan setiap endpoint yang diberi nama dalam kebijakan yang sesuai, atau menggunakan satu endpoint di semua kebijakan.

Di mana tempat untuk menetapkan header?

Di Reporting API baru—yang dibahas dalam postingan ini—laporan memiliki cakupan dokumen. Artinya, untuk satu origin tertentu, dokumen yang berbeda, seperti site.example/page1 dan site.example/page2, dapat mengirim laporan ke endpoint yang berbeda.

Agar laporan pelanggaran atau penghentian penggunaan dapat diterima di halaman mana pun pada situs Anda, tetapkan header sebagai middleware pada semua respons.

Berikut ini contohnya di Ekspres:

const REPORTING_ENDPOINT_BASE = 'https://report.example';
const REPORTING_ENDPOINT_MAIN = `${REPORTING_ENDPOINT_BASE}/main`;
const REPORTING_ENDPOINT_DEFAULT = `${REPORTING_ENDPOINT_BASE}/default`;

app.use(function (request, response, next) {
  // Set up the Reporting API
  response.set(
    'Reporting-Endpoints',
    `main-endpoint="${REPORTING_ENDPOINT_MAIN}", default="${REPORTING_ENDPOINT_DEFAULT}"`,
  );
  next();
});

Mengedit kebijakan Anda

Setelah header Reporting-Endpoints dikonfigurasi, tambahkan perintah report-to ke setiap header kebijakan yang laporan pelanggarannya ingin Anda terima. Nilai report-to harus berupa salah satu endpoint bernama yang telah Anda konfigurasikan.

Anda dapat menggunakan beberapa endpoint untuk beberapa kebijakan, atau menggunakan endpoint yang berbeda di seluruh kebijakan.

Untuk setiap kebijakan, nilai report-to harus berupa salah satu endpoint bernama yang telah Anda konfigurasi.

report-to tidak diperlukan untuk laporan penghentian, intervensi, dan error. Laporan ini tidak terikat dengan kebijakan apa pun. Parameter dibuat selama endpoint default disiapkan dan dikirim ke endpoint default ini.

Contoh

# Content-Security-Policy violations and Document-Policy violations
# will be sent to main-endpoint
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0;report-to=main-endpoint;
# Deprecation reports don't need an explicit endpoint because
# these reports are always sent to the default endpoint

Kode contoh

Untuk melihat semua ini dalam konteksnya, berikut adalah contoh server Node yang menggunakan Express dan menyatukan semua bagian yang dibahas dalam artikel ini. Contoh ini menunjukkan cara mengonfigurasi pelaporan untuk beberapa jenis laporan yang berbeda dan menampilkan hasilnya.

Men-debug penyiapan pelaporan

Dengan sengaja membuat laporan

Saat menyiapkan Reporting API, Anda mungkin perlu sengaja melanggar kebijakan untuk memeriksa apakah laporan dibuat dan dikirim seperti yang diharapkan. Untuk melihat contoh kode yang melanggar kebijakan dan melakukan hal buruk lainnya yang akan membuat semua jenis laporan, lihat demo.

Hemat waktu

Laporan dapat dikirim dengan penundaan—sekitar satu menit, yang merupakan waktu yang lama saat melakukan proses debug. Untunglah, saat melakukan proses debug di Chrome, Anda dapat menggunakan tanda --short-reporting-delay untuk menerima laporan segera setelah dibuat.

Jalankan perintah berikut di terminal Anda untuk mengaktifkan flag ini:

YOUR_PATH/TO/EXECUTABLE/Chrome --short-reporting-delay

Menggunakan DevTools

Di Chrome, gunakan DevTools untuk melihat laporan yang telah dikirim atau yang akan dikirim.

Mulai Oktober 2021, fitur ini bersifat eksperimental. Untuk menggunakannya, ikuti langkah-langkah berikut:

  1. Gunakan Chrome versi 96 dan yang lebih baru (periksa dengan mengetik chrome://version di browser Anda)
  2. Ketik atau tempel chrome://flags/#enable-experimental-web-platform-features di kolom URL Chrome.
  3. Klik Enabled.
  4. Mulai ulang browser.
  5. Buka Chrome DevTools.
  6. Di Chrome DevTools, buka Setelan. Di bagian Eksperimen, klik Aktifkan panel Reporting API di panel Aplikasi.
  7. Muat ulang DevTools.
  8. Muat ulang halaman Anda. Laporan yang dihasilkan oleh halaman yang dibuka DevTools akan tercantum di panel Application pada Chrome DevTools, di bagian Reporting API.
Screenshot DevTools yang mencantumkan laporan
Chrome DevTools menampilkan laporan yang dibuat di halaman Anda beserta statusnya.

Status laporan

Kolom Status memberi tahu Anda apakah laporan telah berhasil dikirim.

Status Deskripsi
Success Browser telah mengirimkan laporan dan endpoint membalas dengan kode berhasil (200 atau kode respons sukses lainnya 2xx).
Pending Browser sedang mencoba mengirim laporan.
Queued Laporan telah dibuat dan saat ini browser tidak mencoba mengirimnya. Laporan akan muncul sebagai Queued dalam salah satu dari dua kasus berikut:
  • Laporan tersebut masih baru dan browser menunggu untuk melihat apakah laporan baru yang masuk sebelum mencoba mengirimkannya.
  • Laporan ini tidak baru; browser telah mencoba mengirimkan laporan ini dan gagal, serta sedang menunggu sebelum mencoba lagi.
MarkedForRemoval Setelah mencoba kembali selama beberapa saat (Queued), browser berhenti mencoba mengirim laporan dan akan segera menghapusnya dari daftar laporan untuk dikirim.

Laporan akan dihapus setelah beberapa saat, terlepas dari apakah laporan berhasil dikirim atau tidak.

Pemecahan masalah

Apakah laporan tidak dibuat atau tidak dikirim seperti yang diharapkan ke endpoint Anda? Berikut beberapa tips untuk memecahkan masalah ini.

Laporan tidak dibuat

Laporan yang muncul di DevTools telah dibuat dengan benar. Jika laporan yang Anda harapkan tidak muncul dalam daftar ini:

  • Periksa report-to dalam kebijakan Anda. Jika konfigurasi ini salah, laporan tidak akan dibuat. Buka bagian Mengedit kebijakan Anda untuk memperbaiki masalah ini. Cara tambahan untuk memecahkan masalah ini adalah dengan memeriksa konsol DevTools di Chrome: jika error muncul di konsol untuk pelanggaran yang Anda harapkan, ini berarti kebijakan Anda mungkin dikonfigurasi dengan benar.
  • Perlu diingat bahwa hanya laporan yang dibuat untuk dokumen yang dibuka DevTools yang akan muncul dalam daftar ini. Satu contoh: jika situs Anda site1.example menyematkan iframe site2.example yang melanggar kebijakan, sehingga membuat laporan, laporan ini hanya akan muncul di DevTools jika Anda membuka iframe di jendelanya sendiri dan membuka DevTools untuk jendela tersebut.

Laporan dibuat, tetapi tidak dikirim atau tidak diterima

Bagaimana jika Anda dapat melihat laporan di DevTools, tetapi endpoint tidak menerimanya?

  • Pastikan untuk menggunakan penundaan singkat. Mungkin penyebab Anda tidak dapat melihat laporan adalah karena laporan belum dikirim!
  • Periksa konfigurasi header Reporting-Endpoints Anda. Jika ada masalah, laporan yang telah dibuat dengan benar tidak akan dikirim. Di DevTools, status laporan akan tetap Queued (mungkin melompat ke Pending, lalu dengan cepat kembali ke Queued saat upaya pengiriman dilakukan) dalam hal ini. Beberapa kesalahan umum yang dapat menyebabkan hal ini:

  • Endpoint digunakan, tetapi tidak dikonfigurasi. Contoh:

Kode dengan kesalahan
 Document-Policy: document-write=?0;report-to=endpoint-1;
 Reporting-Endpoints: default="https://reports.example/default"

Laporan pelanggaran Kebijakan Dokumen harus dikirim ke endpoint-1, tetapi nama endpoint ini tidak dikonfigurasi di Reporting-Endpoints.

  • Endpoint default tidak ada. Beberapa jenis laporan, seperti laporan penghentian penggunaan dan intervensi, hanya akan dikirim ke endpoint yang bernama default. Baca selengkapnya di Mengonfigurasi header Reporting-Endpoint.

  • Temukan masalah di sintaksis header kebijakan Anda, seperti tanda kutip yang tidak ada. Lihat detail.

  • Periksa apakah endpoint Anda dapat menangani permintaan masuk.

    • Pastikan endpoint Anda mendukung permintaan preflight CORS. Jika tidak, layanan tidak dapat menerima laporan.

    • Uji perilaku endpoint Anda. Untuk melakukannya, daripada membuat laporan secara manual, Anda dapat mengemulasi browser dengan mengirimkan permintaan endpoint yang terlihat seperti yang akan dikirim oleh browser. Jalankan perintah berikut:

    curl --header "Content-Type: application/reports+json" \
      --request POST \
      --data '[{"age":420,"body":{"columnNumber":12,"disposition":"enforce","lineNumber":11,"message":"Document policy violation: document-write is not allowed in this document.","policyId":"document-write","sourceFile":"https://dummy.example/script.js"},"type":"document-policy-violation","url":"https://dummy.example/","user_agent":"xxx"},{"age":510,"body":{"blockedURL":"https://dummy.example/img.jpg","destination":"image","disposition":"enforce","type":"corp"},"type":"coep","url":"https://dummy.example/","user_agent":"xxx"}]' \
      YOUR_ENDPOINT
    

    Endpoint Anda akan merespons dengan kode berhasil (200 atau kode respons sukses lainnya 2xx). Jika tidak, berarti ada masalah dengan konfigurasinya.

Laporan Saja

Header kebijakan -Report-Only dan Reporting-Endpoints bekerja sama.

Endpoint yang dikonfigurasi di Reporting-Endpoints dan ditentukan dalam kolom report-to dari Content-Security-Policy, Cross-Origin-Embedder-Policy, dan Cross-Origin-Opener-Policy, akan menerima laporan jika kebijakan ini dilanggar.

Endpoint yang dikonfigurasi di Reporting-Endpoints juga dapat ditentukan di kolom report-to dari Content-Security-Policy-Report-Only, Cross-Origin-Embedder-Policy-Report-Only, dan Cross-Origin-Opener-Policy-Report-Only. Mereka juga akan menerima laporan jika kebijakan ini dilanggar.

Meskipun laporan dikirim dalam kedua kasus tersebut, header -Report-Only tidak menerapkan kebijakan: tidak ada yang akan rusak atau benar-benar diblokir, tetapi Anda akan menerima laporan tentang hal yang akan rusak atau telah diblokir.

ReportingObserver

ReportingObserver JavaScript API dapat membantu Anda mengamati peringatan sisi klien.

ReportingObserver dan header Reporting-Endpoints menghasilkan laporan yang terlihat sama, tetapi memungkinkan kasus penggunaan yang sedikit berbeda.

Gunakan ReportingObserver jika:

  • Anda hanya ingin memantau penghentian penggunaan dan/atau intervensi browser. ReportingObserver menampilkan peringatan sisi klien seperti penghentian penggunaan dan intervensi browser, tetapi tidak seperti Reporting-Endpoints, fitur ini tidak menangkap jenis laporan lain seperti pelanggaran CSP atau COOP/COEP.
  • Anda harus menanggapi pelanggaran ini secara real time. ReportingObserver memungkinkan Anda melampirkan callback ke peristiwa pelanggaran.
  • Anda ingin menyertakan informasi tambahan ke laporan untuk membantu proses debug, melalui callback kustom.

Perbedaan lainnya adalah ReportingObserver hanya dikonfigurasi di sisi klien: Anda dapat menggunakannya meskipun Anda tidak memiliki kontrol atas header sisi server dan tidak dapat menetapkan Reporting-Endpoints.

Bacaan lebih lanjut

Banner besar oleh Nine Koepfer / @enka80 di Unsplash, diedit. Terima kasih banyak kepada Ian Clelland, Eiji Kitamura, dan Milica Mihajlija atas ulasan dan saran mereka terkait artikel ini.