论【前端】跨域问题

212 阅读2分钟

问题汇总 ?

  • 知道什么情况下会才生跨域 ?
  • 知道跨域不能做那些操作 ?
  • 知道子域名和主域名 ?
  • 知道https与http 默认端口不同
  • 知道那些标签可以实现跨域访问/通信/请求

什么是跨域 ?

浏览器的同源策略规定,协议号-域名-端口号这三者必须都相同才符合同源策略

image.png

同源策略内可以做的事情

如果有一个 不相同,就会出现跨域问题,不符合同源策略导致的后果有

  • 1、LocalStorge、SessionStorge、Cookie等浏览器内存无法跨域访问
  • 2、DOM节点无法跨域操作
  • 3、Ajax请求无法跨域请求 注意点:一个IP是可以注册多个不同域名的,也就是多个域名可能指向同一个IP,即使是这样,他们也不符合同源策略
// 例如 我们经常修改host,http://dev-b.awtio.com与http://dev-g.awtio.com 都指向了同一个ip
#127.0.0.1 http://test.lcmall.net/sys
#127.0.0.1 http://dev-b.awtio.com/
#127.0.0.1 http://dev-g.awtio.com/

image.png

跨域的辩证?

我们来看一个域名组成,我们以 http://www.hahaha.com/abc/a.js 为例

  • http:// --> 协议
  • www --> 子域名
  • hahaha.com --> 主域名
  • 80 --> 端口(http:// 默认端口是80)
  • abc/a.js --> 请求资源路径

http 默认端口是80,https默认端口号是443

// /杠后面是路径
   URL                                 说明                是否允许通信
   
http://www.a.com/a.js            // 都是(http协议、www.a.com域名、端口80)
http://www.a.com/b.js            同一域名下 他们隐藏的端口号是80   允许

http://www.a.com/lab/a.js        // 都是(http协议、www.a.com域名、端口80)
http://www.a.com/script/b.js     同一域名下不同文件夹     允许

http://www.a.com:8000/a.js      (http协议、www.a.com域名、端口80/端口8000)
http://www.a.com/b.js            同一域名,不同端口 8000与80 端口不一样  不允许

http://www.a.com/a.js         (http协议/https协议、www.a.com域名、端口80/端口443)
https://www.a.com/b.js           同一域名,不同协议 不允许

http://www.a.com/a.js            域名不一样
http://70.32.92.74/b.js          域名和域名对应ip 不允许

http://www.a.com/a.js
http://script.a.com/b.js         主域相同,子域不同 不允许(cookie这种情况下也不允许访问)

http://www.a.com/a.js
http://a.com/b.js                同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)

http://www.cnblogs.com/a.js
http://www.a.com/b.js            不同域名 不允许

但是有三个标签是允许跨域加载资源:

  • <img src=XXX>
  • <link href=XXX>
  • <script src=XXX>
// 所以上面这三个标签可能会利用跨域 去实现攻击,
解决方法就是把字符 < > 进行转义

解决跨域的手段 ?

总结?