# 跨域 XMLHttpRequest 請求 普通網頁能夠使用[XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/)對象發送或者接受服務器數據, 但是它們受限于[同源策略](http://en.wikipedia.org/wiki/Same_origin_policy). 擴展可以不受該限制. 任何擴展只要它先獲取了跨域請求許可，就可以進行跨域請求。 **注意:**頁面內容腳本不能直接發起跨域請求. 然而, 任何一個頁面內容腳本都可以發送消息給父擴展，請求父擴展發起一次跨域請求。關于使用這一技術的例子，請參照[contentscript_xhr example](http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/howto/contentscript_xhr). ## 擴展所屬域 每個正在運行的擴展都存在于自己獨立的安全域里. 當沒有獲取其他權限時，擴展能夠使用XMLHttpRequest獲取來自安裝該擴展的域的資源. 例如, 假設有一個擴展包含一個叫config.json的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(); ``` 如果某個擴展希望訪問自己所屬域以外的資源，比如說來自http://www.google.com的資源(假設該擴展不是來自www.google.com), 瀏覽器不會允許這樣的請求，除非該擴展獲得了相應的跨域請求允許。 ## 獲取跨域請求允許 通過添加域名或者域名匹配到[manifest](manifest.html)文件的[permissions](manifest.html#permissions_)段, 該擴展就擁有了訪問除了自己所屬域以外的其他域的訪問權限. ``` { "name": "My extension", ... **"permissions": [ "http://www.google.com/" ]**, ... } ``` 跨域允許設置可以使用完整域名, 例如: * "http://www.google.com/" * "http://www.gmail.com/" 或者使用模式匹配, 例如: * "http://*.google.com/" * "http://*/" 模式匹配"http://*/" 表示可以發起到所有域的HTTP請求. 注意在這里, 模式匹配有點像[內容腳本匹配](match_patterns.html), 但是這里的任何域名后的路徑信息都被忽略 這里還需要注意訪問權限是根據訪問協議(匹配模式里的http或者https或者其他協議名)及域名來授予的. 例如某個擴展希望同時基于https和http協議訪問某個域或者某些域, 那么它必須分別獲取基于這兩種協議的訪問允許(類似下面這樣的聲明): ``` "permissions": [ "http://www.google.com/", "https://www.google.com/" ] ``` ## 安全性考慮 每當使用通過XMLHttpRequest獲取的資源時, 你編寫的背景頁需要注意不要成為[跨域腳本](http://en.wikipedia.org/wiki/Cross-site_scripting)的犧牲品. 特別注意避免使用像下面這樣的危險API: ``` background.html =============== var xhr = new XMLHttpRequest(); xhr.open("GET", "http://api.example.com/data.json", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // 警告! 這里有可能執行了一段惡意腳本! var resp = eval("(" + xhr.responseText + ")"); ... } } xhr.send(); background.html =============== var xhr = new XMLHttpRequest(); xhr.open("GET", "http://api.example.com/data.json", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // 警告! 這樣處理有可能被注入惡意腳本! document.getElementById("resp").innerHTML = xhr.responseText; ... } } xhr.send(); ``` 實際上我們應該首選不會執行腳本的安全API: ``` background.html =============== var xhr = new XMLHttpRequest(); xhr.open("GET", "http://api.example.com/data.json", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // JSON解析器不會執行攻擊者設計的腳本. var resp = JSON.parse(xhr.responseText); } } xhr.send(); background.html =============== var xhr = new XMLHttpRequest(); xhr.open("GET", "http://api.example.com/data.json", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // innerText不會給攻擊者注入HTML元素的機會. document.getElementById("resp").innerText = xhr.responseText; } } xhr.send(); ``` 另外在使用通過協議HTTP獲取的資源時要特別小心. 如果你開發的擴展被應用在惡意網絡環境中，網絡攻擊者(又叫 ["中間人攻擊"](http://en.wikipedia.org/wiki/Man-in-the-middle_attack)) 可能篡改服務器響應內容從而可能攻擊你編寫的擴展. 事實上，你應該盡可能地首選使用HTTPS協議.