XMLHttpRequest แบบข้ามต้นทาง

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

ที่มาของส่วนขยาย

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

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere.
xhr.open("GET", chrome.extension.getURL('/config_resources/config.json'), true);
xhr.send();

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

กำลังขอสิทธิ์แบบข้ามต้นทาง

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

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

ค่าสิทธิ์แบบข้ามต้นทางอาจเป็นชื่อโฮสต์ที่ตรงตามเกณฑ์ทั้งหมด เช่น

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

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

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

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

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

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

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

การหลีกเลี่ยงช่องโหว่ในการเขียนสคริปต์ข้ามเว็บไซต์

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

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // WARNING! Might be evaluating an evil script!
    var resp = eval("(" + xhr.responseText + ")");
    ...
  }
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // WARNING! Might be injecting a malicious script!
    document.getElementById("resp").innerHTML = xhr.responseText;
    ...
  }
}
xhr.send();

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

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON.parse does not evaluate the attacker's scripts.
    var resp = JSON.parse(xhr.responseText);
  }
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // innerText does not let the attacker inject HTML elements.
    document.getElementById("resp").innerText = xhr.responseText;
  }
}
xhr.send();

การจํากัดการเข้าถึงสคริปต์เนื้อหาให้คําขอข้ามต้นทาง

เมื่อดำเนินการคำขอข้ามต้นทางในนามของสคริปต์เนื้อหา ให้ระมัดระวังป้องกันหน้าเว็บที่เป็นอันตรายที่อาจพยายามแอบอ้างเป็นสคริปต์เนื้อหา โดยเฉพาะอย่างยิ่ง ไม่อนุญาตให้สคริปต์เนื้อหาขอ 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') {
        var 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 อย่างชัดแจ้ง