跨域限制原因及常见跨域方法

Posted 2021-01-01 sefaultment

跨域

游览器的同源策略(浏览器对javascript施加的安全限制)(也就是说服务端不受限制)

同源策略：

1.DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。

2.XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

定义：协议、域名、端口任意一个不同，就产生跨域

PS:协议不同 如http、https

跨域限制的原因：

1.AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。http://evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。而且由于Ajax在后台执行，用户无法感知这一过程。

2.DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

解决跨域的方法：

1.跨域资源共享(CORS)
服务端通过设置

//指定允许其他域名访问
‘Access-Control-Allow-Origin:*‘//或指定域
//响应类型
‘Access-Control-Allow-Methods:GET,POST‘
//响应头设置
‘Access-Control-Allow-Headers:x-requested-with,content-type‘

2.jsonp

由回调函数和数据

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

<?php
$callback = $_GET[‘callback‘];//得到回调函数名
$data = array(‘a‘,‘b‘,‘c‘);//要返回的数据
echo $callback.‘(‘.json_encode($data).‘)‘;//输出
?>

缺点：只支持GET请求

3.H5 postMessage方法

window.postMessage(message,targetOrigin) 

4.websocket

需要服务器支持

5.正向代理服务器

实例Node.js代理服务器