chrome插件开发之发送网络请求v3版本

Dear 丶 2023-10-04 20:22 132阅读 0赞

如果某个扩展希望访问自己所属域以外的资源，比如说来自http://www.google.com的资源(假设该扩展不是来自www.google.com), 浏览器不会允许这样的请求，除非该扩展获得了相应的跨域请求允许。  
获取跨域请求允许  
通过添加域名或者域名匹配到manifest文件的permissions段, 该扩展就拥有了访问除了自己所属域以外的其他域的访问权限.

v3版本的添加权限方式：![d17d4dea3c294bc4a4750711a904d9dd.png][]

"host_permissions": ["*://*.xunfs.com/*"]

如果你还在使用v2的方式添加权限：Permission is unknown or URL pattern is malformed

![format_png][]

跨域允许设置可以使用完整域名, 例如:

*  "[http://www.google.com/][http_www.google.com]"
 *  "[http://www.gmail.com/][http_www.gmail.com]"

或者使用模式匹配, 例如:

*  "http://\*.google.com/"
 *  "http://\*/"

模式匹配"http://\*/" 表示可以发起到所有域的HTTP请求. 注意在这里, 模式匹配有点像[内容脚本匹配][Link 1], 但是这里的任何域名后的路径信息都被忽略

这里还需要注意访问权限是根据访问协议(匹配模式里的http或者https或者其他协议名)及域名来授予的. 例如某个扩展希望同时基于https和http协议访问某个域或者某些域, 那么它必须分别获取基于这两种协议的访问允许。

### 安全性考虑 ###

每当使用通过XMLHttpRequest获取的资源时, 你编写的背景页需要注意不要成为[跨域脚本][Link 2]的牺牲品. 特别注意避免使用像下面这样的危险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获取的资源时要特别小心. 如果你开发的扩展被应用在恶意网络环境中，网络攻击者(又叫 ["中间人攻击"][Link 3]) 可能篡改服务器响应内容从而可能攻击你编写的扩展. 事实上，你应该尽可能地首选使用HTTPS协议.

[d17d4dea3c294bc4a4750711a904d9dd.png]: https://img-blog.csdnimg.cn/d17d4dea3c294bc4a4750711a904d9dd.png
[format_png]: https://img-blog.csdnimg.cn/img_convert/2c4c5503866542aef5df91288a16f18d.webp?x-oss-process=image/format,png
[http_www.google.com]: http://www.google.com/
[http_www.gmail.com]: http://www.gmail.com/
[Link 1]: https://wizardforcel.gitbooks.io/chrome-doc/content/match_patterns.html
[Link 2]: http://en.wikipedia.org/wiki/Cross-site_scripting
[Link 3]: http://en.wikipedia.org/wiki/Man-in-the-middle_attack