คำขอเครือข่ายแบบข้ามต้นทาง

หน้าเว็บทั่วไปสามารถใช้ fetch() หรือ XMLHttpRequest API เพื่อส่งและรับข้อมูลจากเซิร์ฟเวอร์ระยะไกลได้ แต่จะถูกจํากัดโดยนโยบายต้นทางเดียวกัน สคริปต์เนื้อหาจะส่งคำขอในนามของต้นทางเว็บที่มีการแทรกสคริปต์เนื้อหา ดังนั้นสคริปต์เนื้อหาจึงอยู่ภายใต้นโยบายต้นทางเดียวกันด้วย ต้นทางของส่วนขยายไม่ได้ถูกจํากัดมากนัก สคริปต์ที่ทำงานในเวิร์กเกอร์บริการส่วนขยายหรือแท็บที่ทำงานอยู่เบื้องหน้าสามารถสื่อสารกับเซิร์ฟเวอร์ระยะไกลนอกต้นทางได้ ตราบใดที่ส่วนขยายขอสิทธิ์ของโฮสต์

ต้นทางของส่วนขยาย

ส่วนขยายที่ใช้งานอยู่แต่ละรายการจะอยู่ในแหล่งที่มาของความปลอดภัยแยกต่างหาก โดยที่ไม่ต้องขอสิทธิ์เพิ่มเติม ส่วนขยายสามารถเรียกใช้ fetch() เพื่อรับทรัพยากรภายในการติดตั้งได้ ตัวอย่างเช่น หากส่วนขยายมีไฟล์การกําหนดค่า JSON ชื่อ config.json ในโฟลเดอร์ config_resources/ ส่วนขยายจะดึงข้อมูลเนื้อหาของไฟล์ได้ดังนี้

const response = await fetch('/config_resources/config.json');
const jsonData = await response.json();

หากส่วนขยายพยายามขอเนื้อหาจากต้นทางความปลอดภัยอื่นที่ไม่ใช่ของตนเอง เช่น https://www.google.com ระบบจะถือว่าคำขอนี้เป็นคำขอข้ามแหล่งที่มา เว้นแต่ว่าส่วนขยายจะมีสิทธิ์เข้าถึงโฮสต์ ระบบจะถือว่าคำขอข้ามแหล่งที่มาเป็นคำขอข้ามแหล่งที่มาเสมอในสคริปต์เนื้อหา แม้ว่าส่วนขยายจะมีสิทธิ์เข้าถึงโฮสต์ก็ตาม

ขอสิทธิ์ข้ามแหล่งที่มา

หากต้องการขอสิทธิ์เข้าถึงเซิร์ฟเวอร์ระยะไกลนอกต้นทางของส่วนขยาย ให้เพิ่มโฮสต์ รูปแบบการจับคู่ หรือทั้ง 2 อย่างลงในส่วน host_permissions ของไฟล์ manifest

{
  "name": "My extension",
  ...
  "host_permissions": [
    "https://www.google.com/"
  ],
  ...
}

ค่าสิทธิ์ข้ามแหล่งที่มาอาจเป็นชื่อโฮสต์แบบเต็ม เช่น

• "https://www.google.com/"
• "https://www.gmail.com/"

หรืออาจเป็นรูปแบบการจับคู่ เช่น

• "https://*.google.com/"
• "https://*/"

รูปแบบการจับคู่ "https://*/" อนุญาตการเข้าถึง HTTPS ไปยังโดเมนทั้งหมดที่เข้าถึงได้ โปรดทราบว่ารูปแบบการจับคู่ที่นี่คล้ายกับรูปแบบการจับคู่สคริปต์เนื้อหา แต่ระบบจะไม่สนใจข้อมูลเส้นทางที่อยู่หลังโฮสต์

นอกจากนี้ โปรดทราบว่าสิทธิ์เข้าถึงจะกำหนดทั้งตามโฮสต์และรูปแบบ หากส่วนขยายต้องการทั้งสิทธิ์เข้าถึง HTTP ที่ปลอดภัยและไม่ปลอดภัยในโฮสต์หรือชุดโฮสต์หนึ่งๆ จะต้องประกาศสิทธิ์แยกกัน ดังนี้

"host_permissions": [
  "http://www.google.com/",
  "https://www.google.com/"
]

Fetch() เทียบกับ XMLHttpRequest()

fetch() สร้างขึ้นเพื่อ Service Worker โดยเฉพาะ และเป็นไปตามเทรนด์เว็บที่กว้างขึ้นซึ่งหันไปใช้งานแบบไม่พร้อมกัน ส่วนขยายนอก Service Worker รองรับ XMLHttpRequest() API และการเรียกใช้จะทริกเกอร์ตัวแฮนเดิลการดึงข้อมูลของ Service Worker ของส่วนขยาย งานใหม่ควรใช้ fetch() ทุกครั้งที่เป็นไปได้

ข้อควรพิจารณาด้านความปลอดภัย

หลีกเลี่ยงช่องโหว่ของ Cross-site Scripting

เมื่อใช้ทรัพยากรที่ดึงข้อมูลผ่าน fetch() โปรดระมัดระวังไม่ให้เอกสารนอกหน้าจอ แผงด้านข้าง หรือป๊อปอัปตกเป็นเหยื่อของสคริปต์ข้ามเว็บไซต์ โดยเฉพาะอย่างยิ่ง ให้หลีกเลี่ยงการใช้ API ที่อันตราย เช่น innerHTML เช่น

const response = await fetch("https://api.example.com/data.json");
const jsonData = await response.json();
// WARNING! Might be injecting a malicious script!
document.getElementById("resp").innerHTML = jsonData;
    ...

แต่ให้ใช้ API ที่ปลอดภัยกว่าซึ่งไม่เรียกใช้สคริปต์แทน

const response = await fetch("https://api.example.com/data.json");
const jsonData = await response.json();
// JSON.parse does not evaluate the attacker's scripts.
let resp = JSON.parse(jsonData);

const response = await fetch("https://api.example.com/data.json");
const jsonData = response.json();
// textContent does not let the attacker inject HTML elements.
document.getElementById("resp").textContent = jsonData;

จำกัดการเข้าถึงสคริปต์เนื้อหาสำหรับคำขอข้ามแหล่งที่มา

เมื่อทำการส่งคำขอข้ามแหล่งที่มาในนามของสคริปต์เนื้อหา โปรดระมัดระวังในการป้องกันหน้าเว็บที่เป็นอันตรายซึ่งอาจพยายามแอบอ้างเป็นสคริปต์เนื้อหา โดยเฉพาะอย่างยิ่ง ไม่อนุญาตให้สคริปต์เนื้อหาขอ URL ที่กำหนดเอง

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

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == 'fetchUrl') {
      // WARNING: SECURITY PROBLEM - a malicious web page may abuse
      // the message handler to get access to arbitrary cross-origin
      // resources.
      fetch(request.url)
        .then(response => response.text())
        .then(text => sendResponse(text))
        .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  }
);

chrome.runtime.sendMessage(
  {
    contentScriptQuery: 'fetchUrl',
    url: `https://another-site.com/price-query?itemId=${encodeURIComponent(request.itemId)}`
  },
  response => parsePrice(response.text())
);

ในแนวทางข้างต้น สคริปต์เนื้อหาจะขอให้ส่วนขยายดึงข้อมูล URL ใดก็ได้ที่ส่วนขยายมีสิทธิ์เข้าถึง หน้าเว็บที่เป็นอันตรายอาจปลอมข้อความดังกล่าวและหลอกลวงส่วนขยายให้มอบสิทธิ์เข้าถึงแหล่งข้อมูลข้ามแหล่งที่มา

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

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == 'queryPrice') {
      const url = `https://another-site.com/price-query?itemId=${encodeURIComponent(request.itemId)}`
      fetch(url)
        .then(response => response.text())
        .then(text => parsePrice(text))
        .then(price => sendResponse(price))
        .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  }
);

chrome.runtime.sendMessage(
  {contentScriptQuery: 'queryPrice', itemId: 12345},
  price => ...
);

ใช้ HTTPS แทน HTTP

นอกจากนี้ โปรดระมัดระวังเป็นพิเศษเกี่ยวกับทรัพยากรที่ดึงข้อมูลผ่าน HTTP หากมีการใช้ส่วนขยายในเครือข่ายที่เป็นอันตราย ผู้โจมตีเครือข่าย (หรือที่เรียกว่า"man-in-the-middle") อาจแก้ไขการตอบกลับและอาจโจมตีส่วนขยายของคุณ แต่ให้ใช้ HTTPS ทุกครั้งที่ทำได้

ปรับนโยบายการรักษาความปลอดภัยเนื้อหา

หากคุณแก้ไขนโยบายรักษาความปลอดภัยเนื้อหาเริ่มต้นสำหรับส่วนขยายโดยการเพิ่มแอตทริบิวต์ content_security_policy ลงในไฟล์ Manifest คุณจะต้องตรวจสอบว่าโฮสต์ที่คุณต้องการเชื่อมต่อได้รับอนุญาต แม้ว่านโยบายเริ่มต้นจะไม่จํากัดการเชื่อมต่อกับโฮสต์ แต่โปรดระมัดระวังเมื่อเพิ่มคําสั่ง connect-src หรือ default-src อย่างชัดเจน