同源策略、跨域、jsonp

2016-12-26 本文已影响0人墨月千楼

1.什么是同源策略

协议、域名、端口一样是同源。
同源策略是：不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。

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

跨域是获取不同源的页面的数据。
有以下几种实现形式:
1.domain 降域
2.JSONP

JSONP 的问题
1.只能进行GET请求
2.可被注入（callback=alert(1);）
3.需要校验身份（Token）

3.CORS
4.HTML5 postMessage
window.postMessage() 方法可以安全的进行跨域通信。通常情况下，不同页面上的脚本，当且仅当这些页面URL的协议、端口、域名相同的时候才可以进行相互访问。而 window.postMessage() 方法则提供了一种可控机制以便在需要的情况下安全的绕过这些限制。
浏览器兼容性:

可以看到大部分浏览器都可以用,而且比较安全。
5.window.name
利用一个窗口的window.name值一直不变,可以在页面中添加iframe标签,利用iframe和window.name实现两个不同源页面的通信。
6.hash

推荐的是CORS和postMessage方式，操作方便，应用安全。

3.jsonp 的原理是什么

JSONP是JSON with Padding的简称。就是利用<script>标签没有跨域限制的特点来达到读写不同源的网页的目的。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

4.CORS是什么

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了AJAX只能同源使用的限制。
浏览器兼容情况:

Paste_Image.png

大部分浏览器都支持。

操作

1、本地搭建服务器，演示同源策略

修改本地hosts，a.com和b.com都指向本地地址127.0.0.1。
在a.com中写下以下代码：

打开a.com网页,发现有下面的错误。

这就是同源策略的影响。

2、至少使用一种方式解决跨域问题

1.降域的方式
降域之前：

加上iframe，

降域之后:

2.jsonp的方式

index.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="background: grey;">
    我是一个文件
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
    var script=document.createElement('script');
    window.xxx=function(data){
        alert(data);
    }
    script.src="//b.com/data.php?callback=xxx";
    document.body.appendChild(script);
    </script>
</body>
</html>

data.php代码

<?php
$callback=$_GET['callback'];
$data=array('a','b','c');
echo $callback.'('.json_encode($data).')';
?>

结果:

本文版权归本人和饥人谷所有，转载请注明出处