同源策略和解决跨域问题

1、什么是同源

一、什么是源

　　源（origin）就是协议、域名、端口号。

　　以上url的源就是：https://www.cnblogs.com：80

　　若地址里面的协议、域名、端口号相同则属于同源

　　如下是相对于 http://www.a.com/test/index.html 的同源检测
　　• http://www.a.com/dir/page.html ----成功
　　• http://www.child.a.com/test/index.html ----失败，域名不一样
　　• https://www.a.com/test/index.html ----失败，协议不一样
　　• http://www.a.com:8080/test/index.html ----失败，端口号不一样

 

二、什么是同源策略 ？

　　同源策略是一个浏览器的安全功能，不一样源的客户端脚本在没有明确受权的状况下，不能读写对方的资源。因此a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

　• 不受同源策略限制的：

　　（1）、页面中的连接。重定向以及表单提交是不受同源策略影响的

　　（2）、跨域的引入。可是js不能读写加载内容。如嵌入到页面中的<script src="...">　　　　</script>，<img>，<link>，<iframe>等。

---

 

2、跨域

一、什么是跨域：

受同源的影响。不一样源的脚本不能操做其余源下的对象。要想操做不一样源的对象就要跨域

 

二、跨域的实现形式：

• 降域 document.domain
同源策略认为域和子域属于不一样的域，如：
child1.a.com 与 a.com，
child1.a.com 与 child2.a.com，
xxx.child1.a.com 与 child1.a.com
两两不一样源，能够经过设置 document.damain='a.com'，浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通讯，两个页面必须都设置documen.damain='a.com'。
此方式的特色：
1. 只能在父域名与子域名之间使用，且将 xxx.child1.a.com域名设置为a.com后，不能再设置成child1.a.com。
2. 存在安全性问题，当一个站点被攻击后，另外一个站点会引发安全漏洞。
3. 这种方法只适用于 Cookie 和 iframe 窗口。

• JSONP跨域
JSONP和JSON并无什么关系！
JSONP的原理：（举例：a.com/jsonp.html想获得b.com/main.js中的数据）在a.com的jsonp.html里建立一个回调函数xxx，动态添加<script>元素，向服务器发送请求，请求地址后面加上查询字符串，经过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx，而且以JSON数据形式做为参数传递，完成回调。咱们来看看代码：
• // a.com/jsonp.html中的代码

•

 1 function addScriptTag(src) { 
 2 •    var script = document.createElement('script'); 
 3 •    script.setAttribute("type","text/javascript"); 
 4 •    script.src = src; 
 5 •    document.body.appendChild(script);
 6 •    }
 7 •    window.onload = function () { 
 8 •    addScriptTag('http://b.com/main.js?callback=foo');
 9 •    } //window.onload是为了让页面加载完成后再执行
10 •    function foo(data) { 
11 •    console.log(data.name+"欢迎您");
12 •    };

•//b.com/main.js中的代码
　　foo({name:"hl"})

•JSONP的缺点

1. 使用这种方法，只要是个网站均可以拿到b.com里的数据，存在安全性问题。须要网站双方商议基础token的身份验证，这里不详述。
2. 只能是GET，不能POST。
3. 可能被注入恶意代码，篡改页面内容，能够采用字符串过滤来规避此问题。

---

 

3、其余方法

1. HTML5的postMessage方法2. window.name3. location.hash