浏览器安全

什么叫同源

源其实指的就是URL，同源的条件是两个网站的协议、域名、端口都一致，才能称为同源。

同源策略

同源策略出于网站安全性的考虑，限制不同源之间资源访问的一种策略，简单来说有如下几种：

• AJAX请求不能发送

• 无法读取DOM元素并进行操作

• 无法读取cookie，localstrotage、IndexDB。

值得一提的是，有些请求是不受到跨域限制。例如：WebSocket，script、img、iframe、video、audio标签的src属性等,即使是https请求也不受限制。

如何解决跨域问题

常见的三种解决跨域的方案如下：

1. 在后台使用proxy代理，因为同源策略实现应用在浏览器前端，后台并没有限制，前台调用同源的接口，到了后台将该接口请求转发到非同源的地址。

2. 利用W3c颁发的CORS标准（跨域资源共享cross-origin-resource-sharing），在服务器响应头设置 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials，就可以跨域请求并传递cookie，传递cookie还有一个前提， 就是还需要在客户端在发送ajax请求中设置withCredentials属性为true。

3. josnP方案，使用不受同源策略影响的标签<script src>等，向请求目的地传一个callback函数，服务的查出数据后用callback包裹后返回给客户端。JQuery的ajax请求封装了jsonP，datatype时传递：jsonP，并且传递一个jsonP参数，值为callback就可以了。

josnP方式详解

服务端代码如下：

jsonp-server

result = callback + "(" + result + ")";

return result

前端代码有两种：

1.使用原生script标签：

script-client


$('#btn').click(function(){

$("head").append("<script src='url?callback=showData'><\/script>");

});

function showData(data){

/*do something*/

}

因为服务端返回的是callback值包裹的数据，即showData(data),在脚本中会发现有一个showData函数，因此会调用它来处理data数据。

2.ajax封装

前端代码如下：

ajax-client

$.ajax({

url:url.... /*不需要加callback参数*/

type:get,

dataType:"jsonP",

success:function(data){

/*do something*/

}

});

封装的ajax会自动生成一个callback，并且将返回的数据传递的给function（data）处理，因为开发者不需要关注callback参数。

尝试不适用jsonP也能获取阿里官网logo，查看reponse返回的access-control-allow-origin参数值为*,所有不受同源策略影响。

相关链接

​解决同源策略的方案​

​cookie作​用域和跨域