同源与跨域
2019-06-15 本文已影响0人
清苑折纸
同源
同源是浏览器最基本也是最核心的安全功能，必须协议，域名，端口，是为了保护用户数据，防止恶意网站窃取数据。（其中域名包括主域名和子域名）
注意： 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域。
跨域
由于同源策略的限制，会阻止一个域的js脚本和另一个域的内容进行交互，所以有了跨域，当请求的URL的协议或者域名或者端口与当前页面不同时就产生了跨域。（其中域名包括主域名和子域名）
跨域的实现方法有：JSONP，CORS，降域和postMessage
JSONP
- JSONP工作原理：动态创建<script>标签，然后利用script标签的src属性不会被同源限制来获取数据。
- JSONP主要由两个部分构成：回调函数和数据。
- 实现方法
在当前页面http://a.com/a.html动态创建一个<script>标签，创建handleResponse函数，用来处理请求页http://b.com/1.txt返回的数据，在创建一个fun函数用来动态创建<script>标签，src属性向服务器发送请求，请求地址为http://b.com/1.txt，请求页中设置返回函数为handleResponse。
a.html代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域</title>
<script type="text/javascript">
function handleResponse(response){ //处理服务器返回的数据
console.log(response);
}
function fun() {
var script = document.createElement("script");
script.src = "http://192.168.0.103/1.txt"; //设置请求的链接以及处理返回数据的回调函数
document.body.insertBefore(script, document.body.firstChild);
}
</script>
</head>
<body>
<button id="btn" onclick="fun()">确定</button>
</body>
</html>
---------------------
原文：https://blog.csdn.net/qq_36119192/article/details/82931250
1.txt代码为下
handleResponse([ { "name":"aaa",
"sex" :"man",
"id" : "26" },
{ "name":"bbb",
"sex" :"woman",
"id" : "27" },
{ "name":"ccc",
"sex" :"woman",
"id" : "28" }]
)
---------------------
原文：https://blog.csdn.net/qq_36119192/article/details/82931250
注意：
- 所有网站都可以拿到b.com内的数据
- 只能是GET方式获取
- 可能被注入恶意代码，可通过字符串过滤规避该问题
CORS
全称“跨域资源共享”，它允许ajax跨域获取数据，需要在请求的b.com中添加响应头声明允许a.com访问
Access-Control-Allow-Origin: http://a.com
注意：此方法IE8以下完全不支持，IE8-10部分支持
降域
浏览器通过document.domain来判断两个页面是否同源，所以可以通过将两个网站都设置 document.domain = 'test.com';实现跨域，此时两个页面共享cookie。
需要注意的是：
- 只能在父域名与子域名之间使用，且将 xxx.child1.a.com域名设置为a.com后，不能再设置成child1.a.com
- 存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞
- 这种方法只适用于 Cookie 和 iframe 窗口
postMessage
跨域通信API：window.postMessage()
调用postMessage方法实现a窗口http://a.com向b窗口http://b.com发消息（b窗口同样可以通过该方法发送消息给a窗口）
// a窗口打开一个b窗口
var openWindow = window.open('http://b.com', 'title');
// a窗口向b窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://b.com');
调用message事件，监听对方发送的消息
// 监听 message 消息
window.addEventListener('message', function (e) {
console.log(e.source); // e.source 发送消息的窗口
console.log(e.origin); // e.origin 消息发向的网址
console.log(e.data); // e.data 发送的消息
},false);
