xmlHttpRequest 跨域和上传或下载进度条
跨域 XMLHttpRequest 请求
普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可,就可以进行跨域请求。
需要特别注意的是:在请求信息中,浏览器使用 Origin 这个 HTTP 头来标识该请求来自于 http://xxx:801;在返回的响应信息中,使用 Access-Control-Allow-Origin 头来控制哪些域名的脚本可以访问该资源。如果设置 Access-Control-Allow-Origin:*,则允许所有域名的脚本访问该资源。如果有多个,则只需要使用逗号分隔开即可。
Response.AddHeader("Access-Control-Allow-Origin", "http://xxx:801");
跨域允许设置可以使用完整域名, 例如:
- "http://www.google.com/"
- "http://www.gmail.com/"
或者使用模式匹配, 例如:
- "http://*.google.com/"
- "http://*/"
模式匹配"http://*/" 表示可以发起到所有域的HTTP请求. 注意在这里, 模式匹配有点像内容脚本匹配, 但是这里的任何域名后的路径信息都被忽略
ie 下提示no transport,表示跨域,jquery.support.cors只是对CORS协议的一种实现,具体可以看jQuery的源代码,这里不多说。
安全性考虑
每当使用通过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协议.
XMLHttpRequest upload 属性(进度条)
新版本的XMLHttpRequest对象,传送数据的时候,有一个progress事件,用来返回进度信息。
它分成上传和下载两种情况
1)下载的progress事件属于XMLHttpRequest对象
2)上传的progress事件属于XMLHttpRequest.upload对象。
我 们先定义progress事件的回调函数。
- xhr.onprogress = updateProgress;
- xhr.upload.onprogress = updateProgress;
然后,在回调函数里面,使用这个事件的一些属性。
- function updateProgress(event) {
- if(event.lengthComputable) {
- var percentComplete = event.loaded / event.total;
- }
- }
上面的代码中,event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0。
与progress事件相关的,还有其他五个事件,可以分别指定回调函数:
* load事件:传输成功完成。
* abort事件:传输被用户取消。
* error事件:传输中出现错误。
* loadstart事件:传输开始。
* loadEnd事件:传输结束,但是不知道成功还是失败。
xmlHttpRequest 跨域和上传或下载进度条的更多相关文章
- Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验 从服务器上压缩下载: 从 ...
- Ueditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!
再写配置方法之前先吐槽一下网上的各种教程,TM没一个有卵用,一群傻屌不会写就别写,写了就要负责. 百度google搜了半天,全是配置什么document.domain,根域名什么的,我只想对你说: 好 ...
- 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法
关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...
- jq 上传下载进度条
里面只演示了下载的,挂载的是我的七牛服务器上的内容,上传事件和下载是一模一样的,为了大家不乱上传东西到我的服务器,而且我的服务器容量也不大,这里只展示了下载.代码: <!DOCTYPE html ...
- html5上传图片(一)一跨域上传
最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...
- 从Ueditor跨域上传,总结的一次跨域上传的爬坑经历
项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...
- Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件
写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...
- webuploader 跨域上传demo(还没有写记录一下)
webuploader 跨域上传demo(还没有写记录一下)
- js跨域上传文件 iframe
封装好的jq插件 (function () { var iframe = '<iframe name="jqUploadIframe" style="display ...
随机推荐
- PGM学习之二 PGM模型的分类与简介
废话:和上一次的文章确实隔了太久,希望趁暑期打酱油的时间,将之前学习的东西深入理解一下,同时尝试用Python写相关的机器学习代码. 一 PGM模型的分类 通过上一篇文章的介绍,相信大家对PGM的定义 ...
- Backdooring a OS VM
Backdooring a OS VM 来源 https://www.cnblogs.com/studyskill/p/6524672.html 提示: 1.经过实验,fortios 5.4 be ...
- cmake 常用变量和常用环境变量查表手册
cmake 常用变量和常用环境变量查表手册 一,cmake 变量引用的方式: 前面我们已经提到了,使用${}进行变量的引用.在 IF 等语句中,是直接使用变量名而不通过${}取值 二,cmake 自定 ...
- python 求两个时间差
def timeInterval(self): today = datetime.date.today() print today modifiedTime = os.stat(filename).s ...
- 【刷题】BZOJ 3531 [Sdoi2014]旅行
Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰 ...
- 阿里大鱼短信发送,放到项目中报错Java.lang.NoClassDefFoundError:com/aliyuncs/exceptions/ClientException,已解决
由于项目中使用的短信服务发送的消息太慢,所以把采用了阿里大鱼的短信服务,花费了几个小时,通过审核,发现可以单独运行.但是,放到web项目中会报错(Java.lang.NoClassDefFoundEr ...
- BZOJ 2745: [HEOI2012]Bridge
2745: [HEOI2012]Bridge Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 199 Solved: 90[Submit][Statu ...
- 51nod 1421 最大MOD值 | 暴力
题面 有一个a数组,里面有n个整数.现在要从中找到两个数字(可以是同一个) ai,aj ,使得 ai mod aj 最大并且 ai ≥ aj. Input 单组测试数据. 第一行包含一个整数n,表示数 ...
- zookeeper和PHP zookeeper和kafka 扩展安装
http://blog.csdn.net/fenglailea/article/details/52458737#t3 目录(?)[-] 安装zookeeper 1直接安装zookeeper无须编 ...
- CAS使用心得
1.理解CAS实现SSO需要哪些组成部分 2.理解CAS实现SSO流程,包括登陆.注销.二次登陆.其他应用登陆 3.CAS部署需要SSL支持,理解容器如何开启SSL.服务端证书.jre证书信任.创建以 ...