Meningkatkan keamanan ekstensi

Meningkatkan keamanan di Manifes V3

Ini adalah bagian terakhir dari tiga bagian yang menjelaskan perubahan yang diperlukan untuk kode yang bukan bagian dari service worker ekstensi. Bagian ini menjelaskan perubahan yang diperlukan untuk meningkatkan keamanan ekstensi. Dua bagian lainnya membahas pembaruan kode yang diperlukan untuk mengupgrade ke Manifes V3 dan penggantian permintaan web yang memblokir.

Menghapus eksekusi string arbitrer

Anda tidak dapat lagi mengeksekusi logika eksternal menggunakan executeScript(), eval(), dan new Function().

  • Pindahkan semua kode eksternal (JS, Wasm, CSS) ke dalam paket ekstensi Anda.
  • Perbarui referensi skrip dan gaya untuk memuat resource dari paket ekstensi.
  • Gunakan browser.runtime.getURL() untuk membuat URL resource saat runtime.
  • Gunakan iframe dalam sandbox: eval dan new Function(...) masih didukung di iframe dalam sandbox. Untuk mengetahui detail selengkapnya, baca panduan tentang iframe yang di-sandbox.

Metode executeScript() kini berada di namespace scripting, bukan namespace tabs. Untuk mengetahui informasi tentang memperbarui panggilan, lihat Memindahkan executeScript().

Ada beberapa kasus khusus yang memungkinkan eksekusi string arbitrer:

Menghapus kode yang dihosting dari jarak jauh

Di Manifes V3, semua logika ekstensi Anda harus menjadi bagian dari paket ekstensi. Anda tidak dapat lagi memuat dan mengeksekusi file yang dihosting dari jarak jauh sesuai dengan kebijakan Chrome Web Store. Contohnya mencakup:

  • File JavaScript yang diambil dari server developer.
  • Library apa pun yang dihosting di CDN.
  • Library pihak ketiga yang dipaketkan yang secara dinamis mengambil kode yang dihosting dari jarak jauh.

Tersedia pendekatan alternatif, bergantung pada kasus penggunaan Anda dan alasan hosting jarak jauh. Bagian ini menjelaskan pendekatan yang perlu dipertimbangkan. Jika Anda mengalami masalah saat menangani kode yang dihosting dari jarak jauh, kami memiliki panduan yang tersedia.

Fitur dan logika yang didorong konfigurasi

Ekstensi Anda memuat dan menyimpan dalam cache konfigurasi jarak jauh (misalnya, file JSON) saat runtime. Konfigurasi yang di-cache menentukan fitur mana yang diaktifkan.

Logika yang dieksternalkan dengan layanan jarak jauh

Ekstensi Anda memanggil layanan web jarak jauh. Dengan begitu, Anda dapat menjaga kerahasiaan kode dan mengubahnya sesuai kebutuhan sekaligus menghindari overhead tambahan saat mengirim ulang ke Chrome Web Store.

Menyematkan kode yang dihosting dari jarak jauh dalam iframe sandbox

Kode yang dihosting dari jarak jauh didukung dalam iframe dalam sandbox. Perhatikan bahwa pendekatan ini tidak berfungsi jika kode memerlukan akses ke DOM halaman penyematan.

Menggabungkan library pihak ketiga

Jika Anda menggunakan framework populer seperti React atau Bootstrap yang sebelumnya dimuat dari server eksternal, Anda dapat mendownload file yang di-minify, menambahkannya ke project, dan mengimpornya secara lokal. Contoh:

<script src="./react-dom.production.min.js"></script>
<link href="./bootstrap.min.css" rel="stylesheet">

Untuk menyertakan library di service worker, tetapkan kunci "background.type" ke "module" dalam manifes dan gunakan pernyataan import.

Menggunakan library eksternal dalam skrip yang disisipkan tab

Anda juga dapat memuat library eksternal saat runtime dengan menambahkannya ke array files saat memanggil scripting.executeScript(). Anda masih dapat memuat data dari jarak jauh saat runtime.

browser.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['jquery-min.js', 'content-script.js']
});

Menyuntikkan fungsi

Jika Anda memerlukan lebih banyak dinamisme, properti func baru di scripting.executeScript() memungkinkan Anda menyuntikkan fungsi sebagai skrip konten dan meneruskan variabel menggunakan properti args.

Manifest V2
let name = 'World!';
browser.tabs.executeScript({
  code: `alert('Hello, ${name}!')`
});

Dalam file skrip latar belakang.

Manifes V3
async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

function showAlert(givenName) {
  alert(`Hello, ${givenName}`);
}

let name = 'World';
browser.scripting.executeScript({
  target: {tabId: tab.id},
  func: showAlert,
  args: [name],
});

Di service worker latar belakang.

Repositori Contoh Ekstensi Chrome berisi contoh injeksi fungsi yang dapat Anda pelajari. Contoh getCurrentTab() ada dalam referensi untuk fungsi tersebut.

Cari solusi lain

Jika pendekatan sebelumnya tidak membantu kasus penggunaan Anda, Anda mungkin harus menemukan solusi alternatif (yaitu bermigrasi ke library lain) atau menemukan cara lain untuk menggunakan fungsi library. Misalnya, dalam kasus Google Analytics, Anda dapat beralih ke protokol pengukuran Google, bukan menggunakan versi JavaScript yang dihosting dari jarak jauh secara resmi seperti yang dijelaskan dalam panduan Google Analytics 4 kami.

Memperbarui kebijakan keamanan konten

"content_security_policy" belum dihapus dari file manifest.json, tetapi sekarang menjadi kamus yang mendukung dua properti: "extension_pages" dan "sandbox".

Manifest V2
{
  ...
  "content_security_policy": "default-src 'self'"
  ...
}
Manifes V3
{
  ...
  "content_security_policy": {
    "extension_pages": "default-src 'self'",
    "sandbox": "..."
  }
  ...
}

extension_pages: Merujuk pada konteks dalam ekstensi Anda, termasuk file html dan pekerja layanan.

sandbox: Merujuk ke halaman ekstensi dengan sandbox yang digunakan ekstensi Anda.

Menghapus kebijakan keamanan konten yang tidak didukung

Manifes V3 tidak mengizinkan nilai kebijakan keamanan konten tertentu di kolom "extension_pages" yang diizinkan di Manifes V2. Secara khusus, Manifes V3 tidak mengizinkan ekstensi yang memungkinkan eksekusi kode jarak jauh. Direktif script-src, object-src, dan worker-src hanya dapat memiliki nilai berikut:

  • self
  • none
  • wasm-unsafe-eval
  • Khusus ekstensi mode developer: sumber localhost apa pun, (http://localhost, http://127.0.0.1, atau port apa pun di domain tersebut)

Nilai kebijakan keamanan konten untuk sandbox tidak memiliki batasan baru semacam itu.