跨域 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:

  1. background.html
  2. ===============
  3. var xhr = new XMLHttpRequest();
  4. xhr.open("GET", "http://api.example.com/data.json", true);
  5. xhr.onreadystatechange = function() {
  6. if (xhr.readyState == 4) {
  7. // 警告! 这里有可能执行了一段恶意脚本!
  8. var resp = eval("(" + xhr.responseText + ")");
  9. ...
  10. }
  11. }
  12. xhr.send();
  13.  
  14. background.html
  15. ===============
  16. var xhr = new XMLHttpRequest();
  17. xhr.open("GET", "http://api.example.com/data.json", true);
  18. xhr.onreadystatechange = function() {
  19. if (xhr.readyState == 4) {
  20. // 警告! 这样处理有可能被注入恶意脚本!
  21. document.getElementById("resp").innerHTML = xhr.responseText;
  22. ...
  23. }
  24. }
  25. xhr.send();

实际上我们应该首选不会执行脚本的安全API:

  1. background.html
  2. ===============
  3. var xhr = new XMLHttpRequest();
  4. xhr.open("GET", "http://api.example.com/data.json", true);
  5. xhr.onreadystatechange = function() {
  6. if (xhr.readyState == 4) {
  7. // JSON解析器不会执行攻击者设计的脚本.
  8. var resp = JSON.parse(xhr.responseText);
  9. }
  10. }
  11. xhr.send();
  12.  
  13. background.html
  14. ===============
  15. var xhr = new XMLHttpRequest();
  16. xhr.open("GET", "http://api.example.com/data.json", true);
  17. xhr.onreadystatechange = function() {
  18. if (xhr.readyState == 4) {
  19. // innerText不会给攻击者注入HTML元素的机会.
  20. document.getElementById("resp").innerText = xhr.responseText;
  21. }
  22. }
  23. xhr.send();

另外在使用通过协议HTTP获取的资源时要特别小心. 如果你开发的扩展被应用在恶意网络环境中,网络攻击者(又叫 "中间人攻击") 可能篡改服务器响应内容从而可能攻击你编写的扩展. 事实上,你应该尽可能地首选使用HTTPS协议.

XMLHttpRequest upload 属性(进度条)

新版本的XMLHttpRequest对象,传送数据的时候,有一个progress事件,用来返回进度信息。

它分成上传和下载两种情况

1)下载的progress事件属于XMLHttpRequest对象

2)上传的progress事件属于XMLHttpRequest.upload对象。

们先定义progress事件的回调函数。

  1. xhr.onprogress = updateProgress;
  2. xhr.upload.onprogress = updateProgress;

然后,在回调函数里面,使用这个事件的一些属性。

  1. function updateProgress(event) {
  2. if(event.lengthComputable) {
  3. var percentComplete = event.loaded / event.total;
  4. }
  5. }

上面的代码中,event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0。

与progress事件相关的,还有其他五个事件,可以分别指定回调函数:
* load事件:传输成功完成。

* abort事件:传输被用户取消。

* error事件:传输中出现错误。

* loadstart事件:传输开始。

* loadEnd事件:传输结束,但是不知道成功还是失败。

xmlHttpRequest 跨域和上传或下载进度条的更多相关文章

  1. Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)

    先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验 从服务器上压缩下载: 从 ...

  2. Ueditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!

    再写配置方法之前先吐槽一下网上的各种教程,TM没一个有卵用,一群傻屌不会写就别写,写了就要负责. 百度google搜了半天,全是配置什么document.domain,根域名什么的,我只想对你说: 好 ...

  3. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  4. jq 上传下载进度条

    里面只演示了下载的,挂载的是我的七牛服务器上的内容,上传事件和下载是一模一样的,为了大家不乱上传东西到我的服务器,而且我的服务器容量也不大,这里只展示了下载.代码: <!DOCTYPE html ...

  5. html5上传图片(一)一跨域上传

    最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...

  6. 从Ueditor跨域上传,总结的一次跨域上传的爬坑经历

    项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...

  7. Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件

    写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...

  8. webuploader 跨域上传demo(还没有写记录一下)

    webuploader 跨域上传demo(还没有写记录一下)

  9. js跨域上传文件 iframe

    封装好的jq插件 (function () { var iframe = '<iframe name="jqUploadIframe" style="display ...

随机推荐

  1. BZOJ3277 串(后缀数组+二分答案+主席树)

    因为不会SAM,考虑SA.将所有串连起来并加分隔符,每次考虑计算以某个位置开始的子串有多少个合法. 对此首先二分答案,找到名次数组上的一个区间,那么只需要统计有多少个所给串在该区间内出现就可以了.这是 ...

  2. noi.acNOIP模拟赛5-count

    题目链接 戳我 题意简述 你有一个n+1个数的序列,都是1~n,其中只有一个有重复,求每个长度的本质不同的子序列个数.\(mod 1e9+7\). sol 说起来也很简单,设相同的数出现的位置为\(l ...

  3. BZOJ 2251: [2010Beijing Wc]外星联络

    2251: [2010Beijing Wc]外星联络 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 795  Solved: 477[Submit][ ...

  4. 51nod 1353 树 | 树形DP经典题!

    51nod 1353 树 | 树形DP好题! 题面 切断一棵树的任意条边,这棵树会变成一棵森林. 现要求森林中每棵树的节点个数不小于k,求有多少种切法. 数据范围:\(n \le 2000\). 题解 ...

  5. elasticsearch5使用snapshot接口备份索引

    数据备份是一个必须要考虑的问题,官网提供了 snapshot 接口来备份和恢复数据. 先来看看官方说明: 如果ES是集群,那么需要使用共享存储,支持的存储有: a.shared file system ...

  6. Educational Codeforces Round 26 D dp

    D. Round Subset time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  7. linux kill 掉所有匹配到名字的进程

    如,要 kill 掉 swoole 相关的进程 ps aux | grep swoole |  awk '{print $2}' | xargs kill -9 ps 列出所有进程, 参数: a -  ...

  8. CSS之display样式

    一.前言 行内标签:类似span,无法设置高度,宽度,padding,margin 块级标签:类似div,可以设置高度,宽度,padding,margin 默认情况下是这个样子的,但是可以通过disp ...

  9. P4310 绝世好题

    P4310 绝世好题 题目描述 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 说明 对于100%的数据,1<=n ...

  10. Java基础-字符串(String)常用方法

    Java基础-字符串(String)常用方法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.java的API概念 Java的API(API:Application(应用) Pr ...