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

news/2024/4/27 13:33:07/文章来源:https://blog.csdn.net/dangelrose/article/details/84237481

当时做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协议.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_838616.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站进度条完美解决方案

对网站的进度条感兴趣开始于使用360安全卫土时!由于这个软件的绿色进度条,我感觉这个软件很新奇、很神秘、技术含量很技高、细节性东西做得不错,用四个字来概括就是“焕然一新”。其实没使用这个软件之前,我觉得这东西并没不是那么…

生成网站缩略图代码(C#)

这几天博客园都在讨论这个,看了How to take screenshot (thumbnail) of a web site with ASP.NET 2.0?,根据VB.NET代码,搞出来一个C#版本的,看看效果还不错,百度不能正常显示,其他几个大站(google,sohu)显…

一个图标搜索网站

http://www.iconlet.com/ 里面的图标很全,你需要的几乎都能找到,并且是 png 的哟,做平面的这下爽啦! 贴几张图,馋馋大家: 对于我个人来说,我非常喜欢上面的这种风格…

开发视频网站,asp.net视频文件转换.fla格式

最经公司有一个小项目需要把视频转换成FLASH文件,效果就是像用户注册youku网一样,自己可以视频上传,转换成flash格式播放。 苦于以前没有做过,于是马上搜索了相关的文章,看了 http://www.cnblogs.com/xiucai/ 和 http…

ASP.NET2.0实现网站的自动升级

网站的自动升级主要是要实现从一台服务器上下载某些文件到本服务器上,然后对下载下来的文件进行更新等操作。比如,现在有服务器A,服务器B和客户端C。作为COM公司开发的产品DIV网站系统被安装到服务器B上,而它的更新设置及更新文件则在服务器A…

谈谈wordpress网站固定链接URL如何设置好?

有不少站长不知道wordpress网站固定链接URL如何设置好,今天福利吧就来仔细给你分析一下。很多人已经都知道了wordpress默认的网址形式是带问号的,这种网址对SEO 来说很不好,是动态的网址,影响搜索引擎的排名和收录。 那么wordpres…

【seo】网页开发 代码优化 1

URL要静态,不能是动态或者伪静态。网站图片 img标签添加alt和title属性。 Title“这张图片的内容”,比如这是一张人物图片,那么就是title“人物名” Alt “XXX-建中集团”,这里的XXX指人、物名或栏目名。例子同上alt“人物名-建…

【seo】网页开发 代码优化 2

超链接<a> 目前<a>标签隐藏在CSS里&#xff0c;不能被搜索引擎抓取&#xff0c;应直接放在前端<div>代码中&#xff0c;不要放在样式里&#xff0c;也不要用任何方式隐藏。 参考案例&#xff1a;百度百科 CSS CSS放在统一的样式文件中&#xff0c;需要使用的…

【seo】网页开发 代码优化 3

TDK A.首页 title:中商碳素研究院-铝及铝用碳素企业探索者 Keywords:中商碳素研究院&#xff0c;碳素&#xff0c;铝用碳素&#xff0c;有色金属 Description&#xff1a;中商碳素研究院总部位于上海&#xff0c;是有色金属、铝及铝用碳素行业国内首家互联网科技、工业、贸易…

【seo】网站优化工具 - 5118 入门教程

网站工具&#xff1a; https://www.5118.com/ 1、 打开官网 2、安装浏览器插件 3、开始SEO的工作

盘点:144个免费学习网站,全网最全资源合集

亲测整理144个免费学习网站&#xff0c;强烈推荐其中44个&#xff0c;正文多图预警。 先看目录&#xff1a; 一、国内MOOC类网站&#xff08;多综合类&#xff09; 小科普&#xff1a;MOOC&#xff08;massive open online courses&#xff09;&#xff0c;即大型开放式网络课…

大型网站之分布式会话管理

为什么80%的码农都做不了架构师&#xff1f;>>> 随着网站的功能和用户越来越多&#xff0c;单机器服务部署的Web应用已经不能再支持了。这时候就需要优化或调整目前的架构&#xff0c;具体怎么优化&#xff0c;或先优化哪部分&#xff0c;这取决于网站的具体情况&a…

15个优秀的PHP免费在线学习网站

PHP是一种功能强大的服务器端脚本语言&#xff0c;旨在帮助Web开发人员快速开发动态页面。 本文为您介绍15个优秀的PHP免费在线学习网站&#xff0c;希望对您学习PHP有所帮助。 01. The official PHP website – PHP Manual 02. W3 Schools PHP Tutorial 03. Tizag.co…

图文解说Win7系统机器上发布C#+ASP.NET网站

1. 概述 在一台干净的Win7机器上发布ASP.NET网站需要准备的有&#xff1a; a) .NET Framework 环境 b) 数据库 c) IIS 互联网信息服务 d) 待发布的网站代码 其中.NETFramework环境一般安装了VS2008 或者VS2010都会自带&#xff0c;也可以下载独…

子目录下的文件如何include网站根目录下的文件

2019独角兽企业重金招聘Python工程师标准>>> ###问题 目录./aaa/bbb/ccc下的index.php需include网站根目录下的conn.php。 解答思路 ###问题归结于如何获取网站的根目录。 $dir $_SERVER[DOCUMENT_ROOT]; //获取到网站的根目录 include($dir.conn.php); //成功将根…

Java学习免费网站

Java学习免费网站论 给一些喜欢自学的&#xff0c;且口袋与我一样轻的小伙伴介绍一个学习网站&#xff01;&#xff01;&#xff01; 第一种 &#xff0c;阿里云 第二种 java学习网站地址 https://how2j.cn/k/number-string/number-string-string/324.html?p182240

网站使用阿里大鱼(阿里大于)发送短信DEMO及步骤

阿里大鱼的短息一条4分5&#xff0c;比起市场上7分5的短信&#xff0c;便宜多了&#xff0c;而且大平台&#xff0c;相信之后选择用它的人也会越来越多。 --------以上为2016-04-16写这篇博客时的题记&#xff0c;今天是2017-07-18&#xff0c;时间过去了一年多&#xff0c;“阿…

第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

html5css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计&#xff0c;去掉滚动条为1263像素。 项目是PC端的固定布局&#xff0c;会采用像素(px)单位。 网站结构语义 在没有任何思路的情况下&#xff0c;可以参考大量同类型的网站&#xff0c;了解一下大…

你想建设一个能承受500万PV/每天的网站吗?服务器每秒要处理多少个请求才能应对?...

2019独角兽企业重金招聘Python工程师标准>>> 你想建设一个能承受500万PV/每天的网站吗&#xff1f; 500万PV是什么概念&#xff1f;服务器每秒要处理多少个请求才能应对&#xff1f;如果计算呢&#xff1f; PV是什么&#xff1a; PV是page view的简写。PV是指页面的…