Get best of the week

Pemblokiran Baca Lintas Sumber (CORB) dalam Ekstensi Chrome

gambar

Jika Anda pernah mengembangkan ekstensi untuk Chrome, ekstensi itu mungkin berhenti berfungsi.

Alasannya adalah bahwa mulai dari tahun lalu, permintaan Cross-Origin dari skrip konten diblokir di browser Chrome. Ini berarti bahwa jika ekstensi Anda mengakses beberapa API pihak ketiga langsung dari skrip konten, permintaan semacam itu akan diblokir berkat Pemblokiran Baca Lintas-Asal (CORB)

Cara yang disarankan untuk menyelesaikan masalah pemblokiran adalah dengan mentransfer permintaan dari skrip konten ke skrip latar belakang. Contoh dari dokumentasi:

Skrip konten lama:

var itemId = 12345;
var url = "https://another-site.com/price-query?itemId=" +
         encodeURIComponent(request.itemId);
fetch(url)
  .then(response => response.text())
  .then(text => parsePrice(text))
  .then(price => ...)
  .catch(error => ...)

Skrip konten baru:

chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

Skrip latar belakang baru:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == "queryPrice") {
      var url = "https://another-site.com/price-query?itemId=" +
          encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  });

Perhatikan juga fakta bahwa Anda tidak boleh membuat proxy dari skrip latar belakang, mis. Anda tidak boleh mengirim pesan dari skrip konten ke skrip latar belakang agar URL menerima data, tetapi Anda harus menentukan URL di dalam skrip latar belakang berdasarkan data dalam pesan tersebut. Jadi, dalam contoh di atas, URL untuk permintaan ditentukan dari contentScriptQuery dan parameter itemId . Contoh pesan "buruk", diambil dari dokumentasi:

{
  contentScriptQuery: "fetchUrl",
  url: "https://example.com/any/path/or/site/allowed/here"
}

PS: Saya

sedang mengembangkan ekstensi untuk Firefox dan Chrome, tetapi browser utamanya adalah Firefox, dan saya memeriksa kinerja di Chrome ketika mengunduh versi ekstensi yang baru. Suatu hari, saya menemukan bahwa salah satu ekstensi saya berhenti berfungsi, Anda dapat menebaknya, terima kasih kepada CORB. Periksa ekstensi Anda sehingga ini tidak mengejutkan bagi Anda.

More articles:


All Articles