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

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

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

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

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

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

หากต้องการรวมไลบรารีไว้ในโปรแกรมทำงานของบริการ ให้ตั้งค่าคีย์ "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 ไม่มีข้อจำกัดใหม่ดังกล่าว