同源策略与跨域资源共享的纠缠

赵连江发布于2019-06-27 15:05 / 2787人阅读

摘要：扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点同源策略什么是同源策略出于保护用户信息安全的目的，现在的浏览器都会实施同源策略这个政策，所谓同源策略指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。

导语
你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、乱翻你家的东西，你自然不允许，拿什么东西要通过你的允许才行。

扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点——同源策略

什么是同源策略

出于保护用户信息安全的目的，现在的浏览器都会实施“同源策略”这个政策，所谓“同源策略”指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。

试想，如果你在淘宝购物完后，带着淘宝的登陆信息又去京东，保不准京东把你给黑掉，okay这只是开个玩笑~~~

但是，在很多情况下我们又经常需要跨域访问资源，比如你要在个人博客上创建一个音乐播放器，但这个接口如果自己创建的话性价比太低了，这就需要其他源提供一个可访问的接口给你使用，这里就涉及到突破同源策略的限制的跨域访问

所谓同源：

同协议：如都是http

同域名：如都是terenyeung.applinzi.com/newapp/carousel.html和terenyeung.applinzi.com/index.html

同端口：如都是80端口

什么是跨域

而所谓的跨域，指的是突破同源策略的限制，本源的客户端脚本访问其他源的数据

跨域的实现方式

目前，实现跨域访问的方法包括：

- JSONP
- Cross-Origin Resource Sharing
- HTML5 postMessage
- 其他Hack
  - 利用hash
  -  利用window.name

这里主要讲解常用的JSONP和CORS两种跨域方法。

JSONP

JSONP的全称是JSON with Padding，

原理

- JSONP是通过script标签加载数据的方式去获取其他源的数据，然后当做js代码来执行；

- 你需要提前在文档中声明一个回调函数，该函数的函数名通过GET的方式向后台传参，后台解析到函数名后在原始数据上padding这个函数名，然后在发给前端，最终这个返回前端的字符串将作为js的一部分执行

范例解析:

//你现在所在的页面是
http://terenyeung.applinzi.com/newapp/task31/jsonp.html
//你现在的需求是想要获取另一个源http://teren.applinzi.com/jsonp.php的数据

//利用jsonp实现跨域访问的具体做法是：
//1.在该页面添加一个script标签，当加载script的时候就会向另一个源（http://teren.applinzi.com/task31/jsonp.php）发送GET的请求；
//2.存放在另一个源的后台脚本对前端发过来的查询字符串（带函数名）进行判断，如果存在则为后台返回的数据包裹上带有该函数名的字符串，即
if($callback){    
  echo $callback."(".json_encode($data).")";
}else{    
  echo $data;
}

代码

跨域实现方式——JSONP

CORS

CORS的全称是Cross-Origin Resources Sharing，它允许浏览器向跨源服务器，发出请求，从而克服了AJAX只能同源使用的限制

原理

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10；

浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息——origin字段，告诉跨域的后台这次跨域请求是由哪个源（这里是http://terenyeung.applinzi.com）
发出的

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。服务器根据前端发过来的跨域的ajax请求的origin字段，决定是否同意这次的跨域访问；
如果后台同意的话，可以在后台文档（以php后台为例）中设置如下：

添加一个头：

[注]*为允许所有的源访问

如果被允许另一个源跨域访问，则返回的头信息一定包含如下字段：
Access-Control-Allow-Origin: http://terenyeung.applinzi.com
或者
Access-Control-Allow-Origin: *

范例解析

代码

跨域实现方式——CORS

参考资料

阮一峰——浏览器同源政策及其规避方法
阮一峰——跨域资源共享 CORS 详解
知乎——「每日一题」JSONP 是什么？
饥人谷——同源策略及跨域资源共享

GPU云服务器云服务器同源策略跨域资源共享资源跨域跨域共享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/22187.html

同源策略与跨域资源共享的纠缠

摘要：扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点同源策略什么是同源策略出于保护用户信息安全的目的，现在的浏览器都会实施同源策略这个政策，所谓同源策略指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。导语你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、...

alighters 2019-08-21 11:17 评论0 收藏0
同源策略与跨域资源共享

摘要：由于浏览器的同源策略导致无法直接通过拿到后台数据。目前，如果非同源，共有三种行为受到限制。此处应有掌声参考关于跨域资源共享和浏览器的同源策略限制的具体讲解。工作中，经常会遇到需要跨域请求数据的情况。由于浏览器的同源策略,导致无法直接通过ajax拿到后台数据。解决这个问题的方式之一就是JSONP。还有一种方式更高效简单——跨域资源共享(Cross-origin Resource Sha...

darcrand 2019-08-22 18:08 评论0 收藏0
web安全一，同源策略与跨域

摘要：可以说同源策略在安全中扮演着及其重要的角色。我把这个领域的东西写成了一个系列，以后还会继续完善下去安全一同源策略与跨域安全二攻击安全三攻击之所以要将同源策略与跨域写在一起，是因为存在浏览器的同源策略，才会存在跨域问题何为同源策略同源策略是浏览器实现的一种安全策略，它限制了不同源之间的文档和脚本交互的权限。只有同一个源的脚本才会具有操作dom、读写cookie、session 、a...

cgspine 2019-08-22 14:56 评论0 收藏0
FE.B-理解浏览器的同源策略与跨域方案

摘要：方案浏览器设置一级域名。场景完全不同源的网站，需要窗口通信方案父子窗口互相写互相监听子窗口写后跳回同域父窗口读浏览器跨文档通信场景请求非同源地址方案架设服务器代理参考资料浏览器同源政策及其规避方法阮一峰前端常见跨域解决方案全跨域几种方式同源概念：协议，域名，端口相同。目的：保证用户信息的安全，防止恶意的网站窃取数据。限制的行为： Cookie、LocalStorage 和 In...

oujie 2019-08-30 15:55 评论0 收藏0
FE.B-理解浏览器的同源策略与跨域方案

摘要：方案浏览器设置一级域名。场景完全不同源的网站，需要窗口通信方案父子窗口互相写互相监听子窗口写后跳回同域父窗口读浏览器跨文档通信场景请求非同源地址方案架设服务器代理参考资料浏览器同源政策及其规避方法阮一峰前端常见跨域解决方案全跨域几种方式同源概念：协议，域名，端口相同。目的：保证用户信息的安全，防止恶意的网站窃取数据。限制的行为： Cookie、LocalStorage 和 In...

ghnor 2019-08-02 13:56 评论0 收藏0