เพิ่มความปลอดภัยให้กับส่วนขยาย

การเพิ่มความปลอดภัยในไฟล์ Manifest V3

นี่เป็นส่วนที่ 3 จาก 3 ส่วนที่อธิบายการเปลี่ยนแปลงที่จำเป็นสำหรับโค้ดที่ไม่ได้เป็นส่วนหนึ่งของ Service Worker ของส่วนขยาย ซึ่งอธิบายถึงการเปลี่ยนแปลงที่จำเป็นเพื่อปรับปรุงความปลอดภัยของส่วนขยาย ส่วนอื่นๆ อีก 2 ส่วนจะอธิบายการอัปเดตโค้ดที่จําเป็นสําหรับการอัปเกรดเป็น Manifest V3 และการแทนที่การบล็อกคําขอเว็บ

นำการดำเนินการของสตริงที่กำหนดเองออก

คุณไม่สามารถเรียกใช้ตรรกะภายนอกโดยใช้ executeScript(), eval() และ new Function() อีกต่อไป

  • ย้ายโค้ดภายนอกทั้งหมด (JS, Wasm, CSS) ไปยังกลุ่มส่วนขยาย
  • อัปเดตการอ้างอิงสคริปต์และสไตล์เพื่อโหลดทรัพยากรจากแพ็กเกจส่วนขยาย
  • ใช้ chrome.runtime.getURL() เพื่อสร้าง URL ของทรัพยากรขณะรันไทม์
  • ใช้ iframe ที่ทำแซนด์บ็อกซ์: ระบบยังคงรองรับ eval และ new Function(...) ใน iframe ที่ทำแซนด์บ็อกซ์ อ่านรายละเอียดเพิ่มเติมได้ที่คู่มือเกี่ยวกับ iframe ที่อยู่ในแซนด์บ็อกซ์

ตอนนี้เมธอด executeScript() อยู่ในเนมสเปซ scripting ไม่ใช่เนมสเปซ tabs ดูข้อมูลเกี่ยวกับการอัปเดตการเรียกดูได้ที่ย้าย executeScript()

กรณีพิเศษบางกรณีที่คุณยังคงเรียกใช้สตริงที่กำหนดเองได้มีดังนี้

นำโค้ดที่โฮสต์จากระยะไกลออก

ในไฟล์ Manifest V3 ตรรกะทั้งหมดของส่วนขยายต้องเป็นส่วนหนึ่งของแพ็กเกจส่วนขยาย คุณจะโหลดและเรียกใช้ไฟล์ที่โฮสต์จากระยะไกลไม่ได้อีกต่อไปตามนโยบายของ Chrome เว็บสโตร์ ตัวอย่างเช่น

  • ไฟล์ JavaScript ที่ดึงมาจากเซิร์ฟเวอร์ของนักพัฒนาแอป
  • ไลบรารีที่โฮสต์ใน CDN
  • ไลบรารีของบุคคลที่สามที่รวมไว้ซึ่งดึงข้อมูลโค้ดที่โฮสต์ระยะไกลแบบไดนามิก

คุณใช้แนวทางอื่นได้ ทั้งนี้ขึ้นอยู่กับกรณีการใช้งานและเหตุผลในการโฮสต์จากระยะไกล ส่วนนี้จะอธิบายแนวทางที่ควรพิจารณา หากพบปัญหาเกี่ยวกับการจัดการโค้ดที่โฮสต์ระยะไกล เรามีคำแนะนำพร้อมให้ใช้งาน

ฟีเจอร์และตรรกะตามการกําหนดค่า

ส่วนขยายจะโหลดและแคชการกําหนดค่าระยะไกล (เช่น ไฟล์ JSON) ขณะรันไทม์ การกำหนดค่าที่แคชไว้จะเป็นตัวกำหนดว่าเปิดใช้ฟีเจอร์ใดบ้าง

ตรรกะภายนอกที่มีบริการระยะไกล

ส่วนขยายเรียกใช้บริการเว็บระยะไกล วิธีนี้ช่วยให้คุณเก็บโค้ดไว้เป็นส่วนตัวและเปลี่ยนแปลงได้ตามต้องการ ทั้งยังช่วยประหยัดเวลาในการส่งโค้ดไปยัง Chrome เว็บสโตร์ซ้ำ

ฝังโค้ดที่โฮสต์จากระยะไกลใน iframe ที่ทำแซนด์บ็อกซ์

ระบบรองรับโค้ดที่โฮสต์จากระยะไกลใน iframe ที่ทำแซนด์บ็อกซ์ โปรดทราบว่าวิธีการนี้ใช้ไม่ได้หากโค้ดต้องเข้าถึง DOM ของหน้าเว็บที่ฝัง

รวมคลังภาพของบุคคลที่สาม

หากคุณใช้เฟรมเวิร์กยอดนิยม เช่น React หรือ Bootstrap ซึ่งก่อนหน้านี้คุณโหลดจากเซิร์ฟเวอร์ภายนอก คุณสามารถดาวน์โหลดไฟล์ที่ผ่านการย่อขนาด เพิ่มลงในโปรเจ็กต์ และนำเข้าในเครื่องได้ เช่น

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

หากต้องการรวมไลบรารีไว้ใน Service Worker ให้ตั้งค่าคีย์ "background.type" เป็น "module" ในไฟล์ Manifest และใช้คำสั่ง import

ใช้ไลบรารีภายนอกในสคริปต์ที่แทรกแท็บ

นอกจากนี้ คุณยังโหลดไลบรารีภายนอกขณะรันไทม์ได้โดยเพิ่มลงในอาร์เรย์ files เมื่อเรียกใช้ scripting.executeScript() คุณยังคงโหลดข้อมูลจากระยะไกลได้เมื่อรันไทม์

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

แทรกฟังก์ชัน

หากต้องการความยืดหยุ่นมากขึ้น พร็อพเพอร์ตี้ func ใหม่ใน scripting.executeScript() จะช่วยให้คุณแทรกฟังก์ชันเป็นสคริปต์เนื้อหาและส่งตัวแปรได้โดยใช้พร็อพเพอร์ตี้ args

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

ในไฟล์สคริปต์ที่ทำงานในเบื้องหลัง

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

บริการที่ทำงานอยู่เบื้องหลัง

รีโปตัวอย่างส่วนขยาย Chrome มีตัวอย่างการแทรกฟังก์ชันที่คุณสามารถดูทีละขั้นตอน ตัวอย่าง getCurrentTab() อยู่ในข้อมูลอ้างอิงของฟังก์ชันนั้น

มองหาวิธีแก้ปัญหาชั่วคราวอื่นๆ

หากแนวทางก่อนหน้านี้ใช้ไม่ได้กับกรณีการใช้งานของคุณ คุณอาจต้องหาวิธีแก้ปัญหาอื่น (เช่น ย้ายข้อมูลไปยังไลบรารีอื่น) หรือหาวิธีอื่นๆ ในการใช้ฟังก์ชันการทำงานของไลบรารี ตัวอย่างเช่น ในกรณีของ Google Analytics คุณสามารถเปลี่ยนไปใช้ Measurement Protocol ของ Google แทนการใช้ JavaScript เวอร์ชันอย่างเป็นทางการที่โฮสต์จากระยะไกลตามที่อธิบายไว้ในคู่มือ Google Analytics 4

อัปเดตนโยบายความปลอดภัยของเนื้อหา

ระบบไม่ได้นํา "content_security_policy" ออกจากไฟล์ manifest.json แต่ตอนนี้ "content_security_policy" กลายเป็นพจนานุกรมที่รองรับพร็อพเพอร์ตี้ 2 รายการ ได้แก่ "extension_pages" และ "sandbox"

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

extension_pages: หมายถึงบริบทในส่วนขยาย ซึ่งรวมถึงไฟล์ HTML และ Service Worker

sandbox: หมายถึงหน้าส่วนขยายที่อยู่ในแซนด์บ็อกซ์ซึ่งส่วนขยายของคุณใช้

นำนโยบายรักษาความปลอดภัยเนื้อหาที่ไม่รองรับออก

Manifest V3 ไม่อนุญาตให้ใช้ค่านโยบายความปลอดภัยของเนื้อหาบางค่าในช่อง "extension_pages" ที่อนุญาตใน Manifest V2 โดยเฉพาะอย่างยิ่ง Manifest V3 ไม่อนุญาตให้ใช้แอปที่อนุญาตให้ดำเนินการกับโค้ดจากระยะไกล คำสั่ง script-src, object-src และ worker-src อาจมีเฉพาะค่าต่อไปนี้

  • self
  • none
  • wasm-unsafe-eval
  • ส่วนขยายที่แตกไฟล์แล้วเท่านั้น: แหล่งที่มาของ localhost ใดๆ (http://localhost, http://127.0.0.1 หรือพอร์ตใดก็ได้ในโดเมนเหล่านั้น)

ค่านโยบายความปลอดภัยของเนื้อหาสำหรับ sandbox ไม่มีข้อจำกัดใหม่ดังกล่าว