หน้าเว็บปกติจะใช้ออบเจ็กต์ 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
อย่างชัดแจ้ง