31.同源策略、跨域、jsonp

2017-01-24  本文已影响74人  鸿鹄飞天

问答

1.什么是同源策略

①源(orgin)的定义

②同源策略

③注意

  1: <script src="http://www.artech.com/scripts/common.js"></script>
  2: <script src="http://www.jinnan.me/scripts/utility.js"></script>

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

①跨域：只要协议、域名、端口有任何一个不同，都被当作是不同的域。为了突破同源策略的限制，跨域是指从一个网页去请求另一个不同域的网页的资源。
②跨域实现形式：
1.降域:
对于主域相同而子域不同的例子，通过设置document.domain和iframe。
比如：可以在http://child1.a.com/a.html和http://child2.a.com/b.html两个文件中分别加上document.domain = ‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了.
2.jsonp（json with padding）
由于直接用 XMLHttpRequest 请求不同域上的数据是不可以的。这种方式主要是通过动态插入一个 script 标签。浏览器对 script 的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下） 。但只支持get请求，安全性不高
3.CORS(Cross-Origin Resource Sharing):
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。

实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头： Origin ，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头： Access-Control-Allow-Origin ; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
4.HTML5 postMessage
即跨文档消息传输，通过postMessage方法指明需要传递的数据，以及目标域名，接收端添加事件监听message，通过事件的origin属性判断发送请求的域名，符合要求就接收数据，客户端的方法和服务端的监听必须配套使用。
**5.其他Hack(利用hash、利用window.name) **
利用iframe和location.hash和window.name实现的跨域数据传输等
同源策略&跨域请求
JavaScript跨域总结与解决办法

3.jsonp 的原理是什么

原理是利用script标签的可跨域性，在网页中动态的创建并添加script标签，然后在请求页面的url上添加一个callback函数名作为参数。后台服务器将数据放在一个指定名字的callback函数给传回来，由于网页已经定义的callback函数，参数被返回后，便会立即执行。

4.CORS是什么

header("Access-Control-Allow-Origin:*"); 
//*表示允许任何域向我们的服务端提交需求
header("Access-Control-Allow-Origin:http://www.test1.com") 
//这样就允许来自http://www.test1.com的需求了

跨资源共享 CORS 详解

代码

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

本地搭建服务器（如果使用 SAE 可创建不同的代码版本，这样可通过1.xxx.sinapp.com和2.xxx.sinapp.com访问了）。 修改 本地host，通过不同域名访问本地服务器。比如访问http://a.com/index.html, http://b.com/ajax.php，本质是 在 index.html 里使用 ajax 接口访问 http://b.com/ajax.php 里的数据，查看输出报错

1.第一步，找到hosts文件


Paste_Image.png

2.第二部，打开hosts。然后给本地默认IP 127.0.0.1 绑定几个域名，用于测试


Paste_Image.png
4.第三步，用a.com/origin.html下的ajax给b.com/origin.php发请求，看跨域的时候数据能否从b.com发过来。
①origin.html代码 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
  <div>a.com 页面</div>
  <script>
    $.get('//b.com/origin.php',function(response){
        console.log(response);
    })
  </script> 
</body>
</html>

②origin.php代码

<?php
    echo 1234;
?>

③测试结果


Paste_Image.png

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

1.jsonp方式

//  a.com/origin.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
  <div>a.com 页面</div>

  <script>
    function xxx(data){
      alert(data);
    };
    var script=document.createElement('script');//添加动态脚本
    script.src="//b.com/origin.php?callback=xxx"; //此处callback的值，与上面xxx函数名要一致
    document.body.appendChild(script);
  </script> 
</body>
</html>

// b.com/origin.php
<?php
    $data=$_GET['callback'];
    echo $data .'('. 123 .')';
?>

打印结果：

Paste_Image.png

2.CORS的方式

//  a.com/origin.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
  <div>a.com 页面</div>

  <script>
    $.get('//b.com/origin.php',function(response){
      alert(response);
    })

  </script>
</body>
</html>

//  b.com/origin.php
//在origin.php文件内，设置标头，以及要传输的数据：
<?php
    header("Access-Control-Allow-Origin:http://a.com");
    echo '数据获取成功';
?>

打印结果：

Paste_Image.png
上一篇 下一篇

猜你喜欢

热点阅读