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

การปรับปรุงความปลอดภัยใน Manifest V3

นี่คือส่วนสุดท้ายใน 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() จะช่วยให้คุณแทรกฟังก์ชันเป็น Content Script และส่งตัวแปรโดยใช้พร็อพเพอร์ตี้ 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],
});

ใน Service Worker ที่ทำงานอยู่เบื้องหลัง

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

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

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

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

"content_security_policy" ไม่ได้ถูกนำออกจากไฟล์ manifest.json แต่ตอนนี้เป็นพจนานุกรมที่รองรับพร็อพเพอร์ตี้ 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 ไม่อนุญาตค่า Content Security Policy บางค่าในช่อง "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 ไม่มีข้อจำกัดใหม่ดังกล่าว