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 pekerja layanan ekstensi. Panduan ini menjelaskan perubahan yang diperlukan untuk meningkatkan keamanan ekstensi. Dua bagian lainnya membahas mengupdate kode yang diperlukan untuk mengupgrade ke Manifes V3 dan mengganti permintaan web pemblokiran.

Menghapus eksekusi string arbitrer

Anda tidak dapat lagi menjalankan 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 chrome.runtime.getURL() untuk membuat URL resource saat runtime.
  • Gunakan iframe sandbox: eval dan new Function(...) masih didukung di iframe sandbox. Untuk mengetahui detail lebih lanjut, baca panduan tentang iframe sandbox.

Metode executeScript() sekarang ada dalam namespace scripting, bukan namespace tabs. Untuk mengetahui informasi tentang cara memperbarui panggilan, lihat Memindahkan executeScript().

Ada beberapa kasus khusus ketika mengeksekusi string arbitrer masih dapat dilakukan:

Menghapus kode yang dihosting dari jarak jauh

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

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

Pendekatan alternatif tersedia, 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 jarak jauh, kami menyediakan panduan yang tersedia.

Fitur dan logika berbasis konfigurasi

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

Logika eksternal dengan layanan jarak jauh

Ekstensi Anda memanggil layanan web jarak jauh. Tindakan ini memungkinkan Anda merahasiakan kode dan mengubahnya sesuai kebutuhan, sekaligus menghindari biaya tambahan pengiriman ulang ke Chrome Web Store.

Menyematkan kode yang dihosting dari jarak jauh dalam iframe sandbox

Kode yang dihosting dari jarak jauh didukung di iframe sandbox. Perlu diperhatikan bahwa pendekatan ini tidak akan berfungsi jika kode memerlukan akses ke DOM halaman sematan.

Membuat paket library pihak ketiga

Jika menggunakan framework populer seperti React atau Bootstrap yang sebelumnya Anda muat dari server eksternal, Anda dapat mendownload file yang diperkecil, 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 dalam pekerja layanan, setel kunci "background.type" ke "module" dalam manifes dan gunakan pernyataan import.

Menggunakan library eksternal dalam skrip yang dimasukkan ke 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.

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

Memasukkan fungsi

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

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

Di file skrip latar belakang.

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

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

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

Pekerja layanan latar belakang.

Repo Contoh Ekstensi Chrome berisi contoh injeksi fungsi yang dapat Anda ikuti. 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 yang berbeda) atau menemukan cara lain untuk menggunakan fungsi library. Misalnya, untuk Google Analytics, Anda dapat beralih ke Measurement Protocol Google, bukan menggunakan versi JavaScript resmi yang dihosting dari jarak jauh, seperti yang dijelaskan dalam panduan Google Analytics 4.

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

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

extension_pages: Mengacu pada konteks di ekstensi Anda, termasuk file html dan pekerja layanan.

sandbox: Merujuk pada 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 perintah yang memungkinkan eksekusi kode jarak jauh. Perintah script-src, object-src, dan worker-src hanya boleh memiliki nilai berikut:

  • self
  • none
  • wasm-unsafe-eval
  • Hanya ekstensi yang belum diekstrak: 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 tersebut.