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

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

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

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

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

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

ใน Service Worker ในเบื้องหลัง

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

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

หากวิธีการก่อนหน้านี้ไม่ได้ผล คุณอาจต้องหาวิธีอื่น (เช่น ย้ายข้อมูลไปยังไลบรารีอื่น) หรือหาวิธีอื่นในการใช้ฟังก์ชันการทำงานของไลบรารี เช่น ในกรณีของ Google Analytics คุณสามารถเปลี่ยนไปใช้ Measurement Protocol ของ Google แทนการใช้ 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 ไม่อนุญาตให้ใช้ค่าของนโยบายรักษาความปลอดภัยเนื้อหาบางค่าในช่อง "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 ไม่มีข้อจำกัดใหม่ดังกล่าว