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

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

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

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

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

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

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

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

• แทรกสไตล์ชีตที่โฮสต์จากระยะไกลลงในหน้าเว็บโดยใช้ insertCSS
• สำหรับส่วนขยายที่ใช้ browser.devtools: inspectWindow.eval จะอนุญาตให้เรียกใช้ JavaScript ในบริบทของหน้าที่ตรวจสอบ
• ส่วนขยายโปรแกรมแก้ไขข้อบกพร่องสามารถใช้ browser.debugger.sendCommand เพื่อเรียกใช้ JavaScript ในเป้าหมายการแก้ไขข้อบกพร่อง

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

ใน 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() คุณยังคงโหลดข้อมูลจากระยะไกลได้ในขณะรันไทม์

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

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

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

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

async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

function showAlert(givenName) {
  alert(`Hello, ${givenName}`);
}

let name = 'World';
browser.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 แต่ตอนนี้เป็นพจนานุกรมที่รองรับพร็อพเพอร์ตี้ 2 รายการ ได้แก่ "extension_pages" และ "sandbox"

{
  ...
  "content_security_policy": "default-src 'self'"
  ...
}

{
  ...
  "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 ไม่มีข้อจำกัดใหม่ดังกล่าว