同源策略、跨域、jsonp

2016-07-24 本文已影响53人羞涩的涩

什么是同源策略

同源策略是浏览器最基本的功能，同源指得是相同的域名、协议和端口号，不同的源的客户端脚本在没有明确授权的情况下，无法相互读取对方的资源称之为同源策略。

什么是跨域？跨域有几种实现形式

跨域就是突破同源策略的限制，使一个域名的网页可以请求另一个域名的资源。实现方式：

降域 document.domain：
前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
同时为两个域设置document.domain= xxx.com(少用、慎用，有安全问题）
jsonp :
利用script的src标签的跨域属性，传递一个callback参数给服务端来获取其他源的数据
cors 跨域资源共享：
在HTTP请求里添加特殊的头，允许服务器指定特定的域名可以跨域访问。
利用hash ：
通过给b页面hash值做为参数传递数据，在a页面添加隐藏的iframe（b页面），添加定时器判断hash值有无发生变化，有变化则获取hash值，缺点是数据量较小，而且此方法比较饶，不推荐使用。
利用window.name：
此方法比较饶，需要跳转两次页面。参考博客window.name实现的跨域数据传输
HTML5 postMssage： html5引入的API,可以实现跨文档、多窗口、跨域消息的传递。
可参考博客html5 postMessage解决跨域、跨窗口消息传递

jsonp的原理是什么

jsonp即json with padding,主要是利用script的src标签的跨域属性，传递一个callback参数给服务端，让服务器端返回可执行的Javascript函数，参数为要回发的数据。有两个问题（缺点）：

可能会被注入callback = alert(1); 解决办法为设置字符串过滤出其中的左右括号。如：callback = callback.replace(/\(/g,"")
只能用get传输数据，无法使用post方式进行传输。
需要验证身份（token），解决办法是为callback参数设置两个页面共有cookie作为参数

JSON及JSONP的区别主要参考这篇博客

CORS是什么

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing），避开了浏览器的同源策略，通过在http请求里添加特殊的头，允许服务器指定哪些跨域请求是允许的，与jsonp使用目的相同，但是要比jsonp更强大，缺点是不兼容老的IE浏览器。如：
header("Access-Control-Allow-Origin:http://jiuyi.com") //指定http://jiuyi.com 这个域可以请求它；
header("Access-Control-Allow-Origin:*") //指定所有域都可以请求它；