Menangani pelanggaran kode yang dihosting dari jarak jauh

Kode yang dihosting dari jarak jauh, atau RHC, adalah istilah yang digunakan Chrome Web Store untuk menyebut apa pun yang dieksekusi oleh browser yang dimuat dari tempat selain file ekstensi itu sendiri. Misalnya JavaScript dan WASM. Kode ini tidak mencakup data atau hal-hal seperti JSON atau CSS.

Mengapa RHC tidak lagi diizinkan?

Dengan Manifes V3, ekstensi kini harus memaketkan semua kode yang digunakan di dalam ekstensi itu sendiri. Sebelumnya, Anda dapat menyisipkan tag skrip secara dinamis dari URL mana pun di web.

Saya diberi tahu bahwa ekstensi saya memiliki RHC. Apa yang terjadi?

Jika ekstensi Anda ditolak selama peninjauan dengan error Blue Argon, berarti peninjau kami yakin bahwa ekstensi Anda menggunakan kode yang dihosting dari jarak jauh. Hal ini biasanya terjadi karena ekstensi mencoba menambahkan tag skrip dengan resource jarak jauh (yaitu dari web terbuka, bukan file yang disertakan dalam ekstensi), atau mengambil resource untuk dieksekusi secara langsung.

Cara menemukan RHC

Menemukan RHC tidak terlalu sulit jika Anda tahu apa yang harus dicari. Pertama, periksa string "http://" atau "https://" di project Anda. Jika Anda memiliki pelanggaran RHC, kemungkinan besar Anda dapat menemukannya dengan mencari string tersebut. Jika Anda memiliki sistem build lengkap, atau menggunakan dependensi dari npm atau sumber pihak ketiga lainnya, pastikan Anda menelusuri kode versi yang dikompilasi, karena itulah yang dievaluasi oleh Chrome Web Store. Jika Anda masih tidak dapat menemukan masalahnya, langkah berikutnya adalah menghubungi Dukungan Terpadu. Mereka akan dapat menguraikan pelanggaran tertentu, dan apa yang diperlukan agar ekstensi dapat dipublikasikan sesegera mungkin.

Yang harus dilakukan jika library meminta kode

Terlepas dari mana kode berasal, RHC tidak diizinkan. Hal ini mencakup kode yang tidak Anda buat, tetapi hanya digunakan sebagai dependensi dalam project Anda. Beberapa developer yang menggunakan Firebase mengalami masalah ini saat kode jarak jauh disertakan untuk digunakan di Firebase Auth. Meskipun ini adalah library pihak pertama (yaitu milik Google), tidak ada pengecualian untuk RHC. Anda harus mengonfigurasi kode untuk menghapus RHC atau mengupdate project agar tidak menyertakan kode tersebut. Jika Anda mengalami masalah saat kode Anda tidak memuat RHC, tetapi library yang Anda gunakan, tindakan terbaik adalah menghubungi penulis library. Beri tahu mereka bahwa hal ini terjadi, dan minta solusi atau update kode untuk menghapusnya.

Yang harus dilakukan jika Anda tidak dapat menunggu update library

Beberapa library akan mengirimkan update hampir segera setelah diberi tahu, tetapi library lain mungkin ditinggalkan atau memerlukan waktu untuk mengatasi masalah tersebut. Bergantung pada apa yang terjadi dalam pelanggaran tertentu, Anda mungkin tidak perlu menunggu mereka untuk dipulihkan dan menyelesaikan peninjauan yang berhasil. Ada beberapa opsi yang tersedia untuk segera kembali beroperasi.

Mengaudit kode

Apakah Anda yakin bahwa kode yang menyebabkan permintaan diperlukan? Jika kode tersebut dapat dihapus, atau library yang menyebabkannya dapat dihapus, hapus kode tersebut, dan tugas selesai.

Atau, apakah ada library lain yang menawarkan fitur yang sama? Coba periksa npmjs.com, GitHub, atau situs lain untuk opsi lain yang memenuhi kasus penggunaan yang sama.

Tree shaking

Jika kode yang menyebabkan pelanggaran RHC sebenarnya tidak digunakan, kode tersebut mungkin dapat dihapus secara otomatis oleh alat. Alat build modern seperti webpack, Rollup, dan Vite (hanya beberapa contoh) memiliki fitur yang disebut tree-shaking. Setelah diaktifkan di sistem build, tree shaking akan menghapus jalur kode yang tidak digunakan. Artinya, Anda tidak hanya memiliki versi kode yang lebih sesuai, tetapi juga versi yang lebih ramping dan lebih cepat. Perlu diperhatikan bahwa tidak semua library dapat di-tree shaken, tetapi banyak yang bisa. Beberapa alat, seperti Rollup dan Vite, mengaktifkan tree-shaking secara default. webpack harus dikonfigurasi agar dapat diaktifkan. Jika Anda tidak menggunakan sistem build sebagai bagian dari ekstensi, tetapi menggunakan library kode, sebaiknya Anda menyelidiki penambahan alat build ke alur kerja Anda. Alat build membantu Anda menulis project yang lebih aman, lebih andal, dan lebih mudah dikelola.

Detail spesifik tentang cara menerapkan tree shaking bergantung pada project spesifik Anda. Namun, untuk mengambil contoh sederhana dengan Rollup, Anda dapat menambahkan tree shaking hanya dengan mengompilasi kode project. Misalnya, jika Anda memiliki file yang hanya login ke Firebase Auth, yang disebut main.js:

import { GoogleAuthProvider, initializeAuth } from "firebase/auth";

chrome.identity.getAuthToken({ 'interactive': true }, async (token) => {
  const credential = GoogleAuthProvider.credential(null, token);
  try {
    const app = initializeApp({ ... });
    const auth = initializeAuth(app, { popupRedirectResolver: undefined, persistence: indexDBLocalPersistence });
    const { user } = await auth.signInWithCredential(credential)
    console.log(user)
  } catch (e) {
    console.error(error);
  }
});

Kemudian, Anda hanya perlu memberi tahu Rollup file input, plugin yang diperlukan untuk memuat file node @rollup/plugin-node-resolve, dan nama file output yang dihasilkannya.

npx rollup --input main.js --plugin '@rollup/plugin-node-resolve' --file compiled.js

Dengan menjalankan perintah tersebut di jendela terminal, Anda akan menerima versi file main.js yang dihasilkan, semuanya dikompilasi ke dalam satu file bernama compiled.js.

Rollup bisa sederhana, tetapi juga sangat dapat dikonfigurasi. Anda dapat menambahkan semua jenis logika dan konfigurasi yang kompleks, cukup periksa dokumentasinya. Menambahkan alat build seperti ini akan menghasilkan kode yang lebih kecil dan lebih efisien, dan dalam hal ini, memperbaiki masalah kode yang dihosting dari jarak jauh.

Mengedit file secara otomatis

Cara yang semakin umum agar kode yang dihosting dari jarak jauh dapat masuk ke codebase Anda adalah sebagai subdependensi library yang Anda sertakan. Jika library X ingin import library Y dari CDN, Anda tetap harus mengupdatenya agar dimuat dari sumber lokal. Dengan sistem build modern, Anda dapat membuat plugin dengan mudah untuk mengekstrak referensi jarak jauh, dan menyisipkannya langsung ke dalam kode Anda.

Artinya, kode yang diberikan akan terlihat seperti ini:

import moment from "https://unpkg.com/moment@2.29.4/moment.js"
console.log(moment())

Anda dapat membuat plugin rollup kecil.

import { existsSync } from 'fs';
import fetch from 'node-fetch';

export default {
  plugins: [{
    load: async function transform(id, options, outputOptions) {
      // this code runs over all of out javascript, so we check every import
      // to see if it resolves as a local file, if that fails, we grab it from
      // the network using fetch, and return the contents of that file directly inline
      if (!existsSync(id)) {
        const response = await fetch(id);
        const code = await response.text();

        return code
      }
      return null
    }
  }]
};

Setelah Anda menjalankan build dengan plugin baru, setiap URL import jarak jauh akan ditemukan, terlepas dari apakah itu kode kami, subdependensi, subsubdependensi, atau di tempat lain.

npx rollup --input main.js --config ./rollup.config.mjs --file compiled.js

Mengedit file secara manual

Opsi paling sederhana adalah menghapus kode yang menyebabkan RHC. Buka di editor teks pilihan Anda, dan hapus baris yang melanggar. Tindakan ini umumnya tidak disarankan, karena tidak stabil dan dapat dilupakan. Hal ini membuat pengelolaan project Anda lebih sulit jika file bernama "library.min.js" sebenarnya bukan library.min.js. Daripada mengedit file mentah, opsi yang sedikit lebih mudah dikelola adalah menggunakan alat seperti patch-package. Ini adalah opsi yang sangat canggih yang memungkinkan Anda menyimpan modifikasi ke file, bukan file itu sendiri. Fitur ini dibuat berdasarkan file patch, jenis yang sama dengan yang mendukung sistem kontrol versi seperti Git atau Subversion. Anda hanya perlu mengubah kode yang melanggar secara manual, menyimpan file diff, dan mengonfigurasi patch-package dengan perubahan yang ingin Anda terapkan. Anda dapat membaca tutorial lengkap di readme project. Jika Anda melakukan patch pada project, sebaiknya hubungi project untuk meminta perubahan dilakukan di upstream. Meskipun patch-package membuat pengelolaan patch jauh lebih mudah, tidak ada yang perlu di-patch akan lebih baik.

Yang harus dilakukan jika kode tidak digunakan

Saat codebase bertambah, dependensi (atau dependensi dari dependensi, atau dependensi dari…) dapat mempertahankan jalur kode yang tidak lagi digunakan. Jika salah satu bagian tersebut menyertakan kode untuk memuat atau mengeksekusi RHC, kode tersebut harus dihapus. Tidak masalah jika kode tersebut tidak aktif atau tidak digunakan. Jika tidak digunakan, kode tersebut harus dihapus, baik dengan tree shaking, atau melakukan patch pada library untuk menghapusnya.

Apakah ada solusi?

Secara umum, tidak. RHC tidak diizinkan. Namun, ada sejumlah kecil kasus yang diizinkan. Kasus ini hampir selalu terjadi jika tidak ada opsi lain.

User Scripts API

Skrip Pengguna adalah cuplikan kode kecil yang biasanya disediakan oleh pengguna, yang ditujukan untuk pengelola Skrip Pengguna seperti TamperMonkey dan Violentmonkey. Pengelola ini tidak dapat memaketkan kode yang ditulis oleh pengguna, sehingga User Script API mengekspos cara untuk mengeksekusi kode yang disediakan oleh pengguna. Ini bukan pengganti chrome.scripting.executeScript, atau lingkungan eksekusi kode lainnya. Pengguna harus mengaktifkan mode developer untuk mengeksekusi apa pun. Jika tim peninjauan Chrome Web Store menganggap bahwa fitur ini digunakan dengan cara yang tidak sesuai dengan tujuannya (yaitu kode yang disediakan oleh pengguna), fitur ini dapat ditolak atau listingannya dihapus dari Chrome Web Store.

chrome.debugger

chrome.debugger API memberi ekstensi kemampuan untuk berinteraksi dengan Chrome Devtools Protocol. Ini adalah protokol yang sama yang digunakan untuk Devtools Chrome, dan sejumlah besar alat lainnya. Dengan protokol ini, ekstensi dapat meminta dan mengeksekusi kode jarak jauh. Sama seperti skrip pengguna, protokol ini bukan pengganti chrome.scripting, dan memiliki pengalaman pengguna yang jauh lebih penting. Saat digunakan, pengguna akan melihat panel peringatan di bagian atas jendela. Jika banner ditutup atau diabaikan, sesi proses debug akan dihentikan.

Iframe sandbox

Jika Anda perlu mengevaluasi string sebagai kode, dan berada di lingkungan DOM (misalnya, skrip konten, bukan service worker ekstensi), opsi lainnya adalah menggunakan iframe sandbox. Ekstensi tidak mendukung hal-hal seperti eval() secara default sebagai tindakan pencegahan keamanan. Kode berbahaya dapat membahayakan keselamatan dan keamanan pengguna. Namun, jika kode hanya dieksekusi di lingkungan yang aman dan dikenal, seperti iframe yang telah di-sandbox dari bagian web lainnya, risiko tersebut akan sangat berkurang. Dalam konteks ini, Kebijakan Keamanan Konten yang memblokir penggunaan eval dapat dihapus, sehingga Anda dapat menjalankan kode JavaScript yang valid.

Jika Anda memiliki kasus penggunaan yang tidak tercakup, jangan ragu untuk menghubungi tim menggunakan milis chromium-extensions untuk mendapatkan masukan, atau membuka tiket baru untuk meminta panduan dari Dukungan Terpadu

Yang harus dilakukan jika Anda tidak setuju dengan putusan

Penegakan kebijakan dapat bersifat nuansa dan peninjauan melibatkan input manual, yang berarti tim Chrome Web Store terkadang dapat setuju untuk mengubah keputusan peninjauan. Jika Anda yakin bahwa terjadi kesalahan dalam peninjauan, Anda dapat mengajukan banding atas penolakan tersebut menggunakan Dukungan Terpadu