`
gstarwd
  • 浏览: 1526807 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Chrome Extension中跨域请求访问外部网站数据方法

 
阅读更多

当时做Chrome扩展,用Javascript调用外部API总是不成功,会出现across origin error。后来发现跨域了,如果想在Chrome扩展中访问其他网站数据,只需在manifest.json文件中的”permission“中声明,再用xmlhttpRequest即可。详细介绍如下(转自360chrome的开发文档,同时可参考Chrome extension):

跨域 XMLHttpRequest 请求

普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可,就可以进行跨域请求。

注意:页面内容脚本不能直接发起跨域请求. 然而, 任何一个页面内容脚本都可以发送消息给父扩展,请求父扩展发起一次跨域请求。关于使用这一技术的例子,请参照contentscript_xhr example.

扩展所属域

每个正在运行的扩展都存在于自己独立的安全域里. 当没有获取其他权限时,扩展能够使用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文件的permissions段, 该扩展就拥有了访问除了自己所属域以外的其他域的访问权限.

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

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

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

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

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

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

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

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

安全性考虑

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

分享到:
评论

相关推荐

    html通过 ajax jsonp跨域请求接收和传送数据

    在Web开发中,跨域(Cross-Origin)是一个常见的问题,由于浏览器的安全策略限制,JavaScript通常不能直接访问不同源(协议+域名+端口)的资源。然而,为了实现某些功能,比如用户登录、数据获取等,我们需要打破这...

    ajax跨域请求WebService.asmx

    2. **跨域请求**:默认情况下,浏览器遵循同源策略,禁止了跨域请求,以保护用户数据安全。但是,可以通过CORS(Cross-Origin Resource Sharing,跨源资源共享)机制实现跨域。在服务端,需要在响应头中添加`Access-...

    Android跨域请求获取Java后端数据,登录界面例子

    这个例子主要涉及的是如何在Android客户端通过跨域请求获取Java服务器上的数据,并展示在登录界面。首先,我们需要理解什么是跨域请求以及如何在Android中实现它。 跨域请求是指浏览器安全策略的一种限制,即一个源...

    chrome 浏览器跨域插件下载

    1. 同源策略:这是浏览器为了安全考虑实施的一项规定,只允许来自相同协议、域名和端口的请求访问资源,防止恶意网站窃取数据。 2. CORS(Cross-Origin Resource Sharing):一种通过设置HTTP头部信息来允许跨域请求...

    Jquery跨域Ajax请求测试

    在Web开发中,由于同源策略的限制,JavaScript通常无法直接访问不同源的资源,但随着Web服务的广泛应用,跨域请求的需求日益增加。jQuery,作为一个强大的JavaScript库,提供了便捷的方式来处理这种问题,特别是通过...

    jsonpajax跨域请求

    JSONP(JSON with Padding)和AJAX是两种常见的在JavaScript中实现跨域数据请求的技术。在Web开发中,由于浏览器的同源策略限制,JavaScript不能直接向其他域名发送请求,但JSONP和AJAX通过特定的方式绕过了这个限制...

    跨域访问数据-DEMO

    跨域访问数据是Web开发中的一个关键概念,特别是在构建分布式应用程序和API接口时。这个"跨域访问数据-DEMO"可能是一个示例项目,旨在演示如何在浏览器环境中跨越源限制,即同源策略,来获取JSON或XML数据。下面我们...

    abp跨域请求配置包

    微软模块框架abp的跨域请求配置Nuget包,配置跨域api请求规则。

    解决ajax跨域请求问题

    在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的异步更新,使得用户无需刷新整个页面就能获取和...在实际操作中,根据项目需求和安全性考虑选择合适的方法,确保跨域请求的顺利进行。

    ajax跨域请求demo.zip

    总结来说,这个压缩包提供的示例展示了如何使用jQuery的Ajax进行跨域请求,并在Tomcat服务器上的Java Servlet中处理这些请求。这个例子对于理解和解决实际项目中可能出现的跨域问题非常有帮助。开发者需要理解CORS...

    asp.net jquery 跨域提交请求数据

    本文将深入探讨如何在ASP.NET中配置允许jQuery进行跨域提交请求数据的方法。 首先,了解CORS的工作原理。CORS通过在HTTP头信息中添加`Access-Control-Allow-*`字段来实现跨域访问。服务器需要明确允许哪些源可以...

    服务支持跨域请求的配置

    本文详细介绍了如何在Java Web应用中配置跨域请求支持。通过在`web.xml`文件中定义过滤器,并在`cors.properties`文件中进行细致的配置,可以有效地解决跨域问题。这不仅提高了应用程序的安全性,也增强了其与其他...

    ajax处理跨域请求

    在jQuery中,使用$.ajax()方法发起AJAX请求时,可以设置`crossDomain`参数为`true`来开启跨域请求。例如: ```javascript $.ajax({ url: 'http://example.com/api/data', // 跨域的URL type: 'GET', crossDomain...

    cross-request 3.1 YApi 跨域请求 谷歌浏览器

    cross-request 3.1 YApi 跨域请求 谷歌浏览器

    跨域cors扩展插件chrome

    在实际开发中,例如当使用Vue.js创建单页面应用并需要从不同的域名获取数据时,这个插件能够帮助开发者快速验证和调试这些跨域请求。开发者只需安装这个插件,然后在浏览器中开启,就可以临时绕过同源策略,使得...

    ajax跨域请求

    在`@RequestMapping`注解的方法中,需要设置响应头以允许跨域访问。同时,通过获取`jsonpCallback`参数并将其与JSON数据一起包装成一个函数调用的形式返回给客户端,从而实现JSONP的跨域请求。 ```java @...

    jQuery跨域请求,获取返回值

    然而,jQuery提供了一种跨域请求的方法,允许我们绕过这一限制,获取远程服务器的数据。这篇博客将探讨如何使用jQuery实现跨域请求以及如何获取返回值。 首先,我们需要理解什么是跨域请求。跨域请求是指一个域下的...

    通过nginx实现跨域请求

    标题 "通过nginx实现跨域请求" 涉及的核心知识点是网络编程中的跨域问题以及如何利用Nginx服务器作为代理来解决这个问题。Nginx是一个高性能的HTTP和反向代理服务器,它常用于配置和管理网站的访问规则,包括处理...

    ASP.NET WebApi跨域请求配置dll文件

    在实际应用中,由于同源策略的限制,WebApi默认不支持跨域请求,即一个域下的网页不能直接访问另一个域下的资源。因此,为了解决这个问题,我们需要进行跨域请求的配置。 `System.Web.Http.Cors.dll` 是ASP.NET Web...

Global site tag (gtag.js) - Google Analytics