首页
登录 | 注册

浏览器跨域

浏览器同源策略:同源指协议、域名、端口皆相同

使用同源策略的原因:出于安全考虑,主要时为了防止CSRF攻击【利用用户的登录专改发起恶意请求】

=>跨域主要时为了阻止用户读取到另一个域下的内容

请求跨域的结果是,请求被发送出去了,但是相应被浏览器拦截了。

跨域的几种方式:

  • JSONP(JSON with Padding)
  • CORS(跨域资源共享)
  • postMessage
  • document.domain

1、JSONP:JSONP是JSON的一种使用模式

  原理:利用<script>标签没有跨域限制的漏洞,通过<script>指向ige需要访问的地址并提供一个回调函数来接收数据

1 <script src="http://domain/api?param1=a&parma2=b&callback=jsonp"></script>
2 <script>
3     function jsonp(data){
4 
5     }
6 </script>

  缺点:仅限于get请求

  数据接收原理:jsonP本质上是通过将情趣模拟为<script>加载,通常带有其他参数和一个callback函数名,然后服务器根据接收到的参数里的回调函数名如   callback({data...}),拼装数据导函数里,然后脚本加载成功,执行本地同名回调函数,从而达到跨域。

2、CORS(跨域资源共享)

  CORS需要浏览器和后端同时支持

  浏览器会自动进行CORS通信,实现CORS通信的关键是通过后端,只要后端实现了CORS,就实现了跨域

  服务端设置Access-Control-Allow-Origin就可以开启CORS,该属性表示哪些域名可以访问资源,若设置通配符则表示所有网站都可以访问资源

3、postMessage

  常用于获取嵌入页面中的第三方页面的数据,一个页面发消息,另一个页面判断来源并接收消息

  1)发送端:

  window.parent.postMessage('message','http://test.com');

  2)接收端

  var mc = new MessageChannel();

  mc.addEventListener('message',event=>{

    var origin = event.origin || event.originalEvent.origin;

    if(origin == 'http://test.com'){

      console.log('验证通过');

    }

  });

4、document.domain

  只能用于主域名相同的情况下,如a.test.com和b.test.com

  著需要给页面添加document.domain = 'test.com',表示主域名相同即可

 


相关文章

  • 1.什么是跨越? 一个网页向另一个不同域名/不同协议/不同端口的网页请求资源,这就是跨域. 跨域原因产生:在当前域名请求网站中,默认不允许通过ajax请求发送其他域名. 2.为什么会产生跨域请求? 因为浏览器使用了同源策略 3.什么是同源策 ...
  • 1.前言 最近在写一个小项目,里面主要涉及的就是表与表之间复杂的关系.当真正开发起来的时候,才发现自己对复杂的表关系间的查询有点混乱,趁着这几天的时间,重新梳理了一下. 2.概念 在开始之前,先明确几个基础概念: 正向查询:关联字段所在的表 ...
  • 补习系列(20)-大话 WebSocket 与 &quot;尬聊&quot;的实现
    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...
  • 页面性能优化-原生JS实现图片懒加载
         在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的 ...
  • ERP不规范,同事两行泪
    最近的很多次对外交流,都聊到了ERP建设的话题,并且无一例外的不那么让人省心,回想我这么多年走过的ERP坑坑路,在这里也写下经验和总结,希望能给正在或者即将走上ERP建设路的企业一些思考和帮助. 导读 1.几个瞎眼而普遍的案例 2.ERP的 ...
  • 汝之蜜糖,吾之砒霜——聊聊软件开发中的最佳实践
        "描述一个事物,唯有一个名词定义它的概念,唯有一个动词揭露它的行为,唯有一个形容词表现它的特征.要做的,就是用心去寻找那个名词.那个动词.那个形容词--" -- 福楼拜 (Gustave Flaubert)   ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.079 s.
京ICP备10005923号