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

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 dari jarak jauh, kami memiliki panduan yang tersedia.

Fitur dan logika yang didorong konfigurasi

Ekstensi Anda memuat dan menyimpan konfigurasi jarak jauh (misalnya, file JSON) dalam cache 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 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 di iframe dalam sandbox. Perlu diperhatikan bahwa pendekatan ini tidak berfungsi jika kode memerlukan akses ke DOM halaman sematan.

Menggabungkan library pihak ketiga

Jika Anda menggunakan framework populer seperti React atau Bootstrap yang sebelumnya dimuat 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 di pekerja layanan, 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 tetap dapat memuat data dari jarak jauh saat runtime.

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

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 service worker latar belakang.

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

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

extension_pages: Merujuk pada konteks di 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 yang tidak di-unzip: 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.