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. Artikel ini menjelaskan perubahan yang diperlukan untuk meningkatkan keamanan ekstensi. Dua bagian lainnya membahas memperbarui kode yang diperlukan untuk mengupgrade ke Manifes V3 dan mengganti permintaan web yang memblokir.

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 dengan sandbox: eval dan new Function(...) masih didukung di iframe dengan sandbox. Untuk mengetahui detail selengkapnya, baca panduan tentang iframe dengan sandbox.

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

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

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 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 mengambil kode yang dihosting secara dinamis.

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 secara jarak jauh, kami memiliki 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 yang dieksternalkan dengan layanan jarak jauh

Ekstensi Anda memanggil layanan web jarak jauh. Hal ini memungkinkan Anda menjaga kode tetap bersifat pribadi 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 di iframe dengan sandbox. Perhatikan bahwa pendekatan ini tidak berfungsi jika kode memerlukan akses ke DOM halaman penyematan.

Memaketkan library pihak ketiga

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

Menggunakan library eksternal dalam skrip yang dimasukkan tab

Anda juga dapat memuat library eksternal saat runtime dengan menambahkannya ke array files saat memanggil scripting.executeScript(). Anda tetap 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}!')`
});

Dalam 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],
});

Di pekerja layanan latar belakang.

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

Mencari 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 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: Mengacu 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 melarang manifes yang mengizinkan eksekusi kode jarak jauh. Perintah script-src, object-src, dan worker-src hanya boleh memiliki nilai berikut:

  • self
  • none
  • wasm-unsafe-eval
  • Khusus ekstensi yang 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.