前端跨域

一、首先，我们先说说什么是跨域？为什么要跨域？

　　跨域，通常情况下是说在两个不通过的域名下面无法进行正常的通信，或者说是无法获取其他域名下面的数据，这个主要的原因是，浏览器出于安全问题的考虑，采用了同源策略，通过浏览器对JS的限制，防止恶意用户获取非法的数据。比如这样的一个场景，恶意用户仿造一个银行的官网，在用户输入框中嵌套了银行的页面，如果是没有同源策略的限制，那么恶意用户则可以通过这样的一种方法来获取银行用户的卡号和登录密码，这样对于浏览器来说是没有安全性可言的。同时也可以有效的规避了大部分的XSS攻击(XSS攻击原理：通过向用户界面中注入script脚本，然后在脚本中获取用户的token等身份信息，然后将身份信息发送到恶意用户指定的地方，在正常用户还没有推出的时候，也就是token等身份信息还有效的时候，通过这些信息强制登录，将正常用户挤下系统。)

二、几种跨域与使用场景

　　2.1JSONP跨域　　

　　　　JSONP跨域主要的依据是利用一些HTML标签的“漏洞”，然后通过跨域的方式去调用这个在别的域名下面的脚本文件，JSONP跨域有script跨域

　　　　（说白了就是<script>支持跨域）

　　　　这个就是JSOP在实际中的应用，如果直接用ajax来实现的话，原理也是一样，只不过要把script标签换成ajax调用而已。 

　　　　如果你要全部使用jquery来实现的话，那么只需要把ajax中的dataType类型换成jsonp即可(通过上面的例子我们知道script加载实际上也是一个get请求，这个可以在network中验证)，这个有兴趣的同学可以查一查资料

　　2.2iframe跨域　　　

　　　　iframe跨域的原理跟script跨域一样，但是我们要注意的是标签自身功能的差异性，具体差异如下：

　　　　1、script单纯就是引入的作用，但是iframe标签还有一个作用是显示的作用可以把远程加载的HTML代码显示出来，也就是script无法引入HTML代码文件

　　　　2、script标签只能够从远程获取数据，无法操作远程文件执行。但是iframe可以这样

　　比如我们在www.json1.com下创建一个index.html文件代码如下：　　　　　

<body>
    <iframe src="http://www.jsonp2.com/demo.html"></iframe>
</body>

　　然后我们在另一个域名为www.json2.com下创建一个index.html文件，代码如下：

<body>
    <script type="text/javascript">
        window.localStorage.clear();
        alert("清除成功");
    </script>
</body>

　　json1中调用json2中的文件来清除json2的本地存储

　　　　script标签的跨域适用于从远程获取数据，不适用对远程的操作。

2.3关于cookie的跨域我会单独写一篇随笔

　　　　

posted @ 2019-10-11 22:18  杨超（yc）  阅读(144)  评论(0)  编辑  收藏  举报