当时做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跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
AJAX(XMLHttpRequest)进行跨域请求方法详解
Android跨域请求获取Java后端数据,登录界面例子,完整代码,运行需要安装有eclice和Android Studio开发软件
微软模块框架abp的跨域请求配置Nuget包,配置跨域api请求规则。
cross-request 3.1 YApi 跨域请求 谷歌浏览器
服务支持跨域请求的配置服务支持跨域请求的配置服务支持跨域请求的配置服务支持跨域请求的配置
跨域访问数据,获取JSON数据,XML数据
ajax跨域请求解决方案。有详细配置方案,轻松解决ajax请求数据是的跨域问题。
asp.net jquery 跨域提交请求数据
基于jQuery的jsonp ajax跨域请求,
跨域请求jar包跨域请求jar包跨域请求jar包跨域请求jar包跨域请求jar包
一个ajax跨域请求的demo实例,前端采用jquery的ajax,后端采用tomcat集成的HttpServlet的方法接受前端的数据和返回数据
ASP.NET WebApi跨域请求的配置引用dll文件,完美实现了跨域请求问题。
Jquery跨域访问Web服务的demo源码
基于ajax方式的跨域请求jsonp的前后台代码
springboot做前后端分离,ajax跨域请求问题 前后端分离:即将后端服务层与前端展示层分别开发和部署,因而产生两个需要打包发布的项目, 将两个分别部署后,前端再去请求后端就会产生跨域请求的问题。 两种解决方案
跨域请求百度天气预报跨域请求百度天气预报跨域请求百度天气预报跨域请求百度天气预报跨域请求百度天气预报跨域请求百度天气预报跨域请求百度天气预报跨域请求百度天气预报
解决跨域发送请求,跨域请求资源的问题。
ajax跨域请求WebService.asmx,程序非常完美的跑起来了。辛苦了一下午整理出来的。怕的就是以后自己忘记了。
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据