美文网首页
31.同源策略、跨域、jsonp

31.同源策略、跨域、jsonp

作者: 鸿鹄飞天 | 来源:发表于2017-01-24 22:16 被阅读74次

问答

1.什么是同源策略

①源(orgin)的定义

  • 以百度为例,输入localtion.origin就可以得到源


    Paste_Image.png
  • 源包括协议,域名,端口号。如https://www.baidu.com/,它的协议是https;域名为www.baidu,com;默认的端口为443,所以可以省略,类似的还有http协议的默认端口为80;ftp(文本传输协议)的默认端口为21

②同源策略

  • 同源策略是浏览器的一个功能,如果浏览器有bug就有可能不支持。
  • 同源是指域名,协议,端口相同,比如http://jirengu.com/a/b.jshttp://jirengu.com/index.php (同源)
  • 同源策略的意思是只有同源的客户端脚本比如js,才可以读写对方的资源;
    不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。比如a.com下的js不能读取b.com下的资源
  • 不同源的例子:
    http://jirengu.com/main.jshttps://jirengu.com/a.php(协议不同)
    http://jirengu.com/main.jshttp://bbs.jirengu.com/a.php(域名不同,域名必须完全相同才可以)
    http://jiengu.com/main.jshttp://jirengu.com:8080/a.php (端口不同,第一个是80)

注意

  • 对于当前页面来说页面存放的JS 文件的域不重要,重要的是加载该 JS 页面所在什么域。比如<script>标签引用了来源于不同地方http://www.artech.comhttp://www.jinnan.me/的两个JavaScript脚本,它们均与当前页面同源
  1: <script src="http://www.artech.com/scripts/common.js"></script>
  2: <script src="http://www.jinnan.me/scripts/utility.js"></script>
  • 除了<script>标签,HTML还具有其它一些具有src属性的标签,比如<img><iframe><link>等,它们均具有跨域加载资源的能力,所以同源策略对它们不做限制。
    对于这些具有src属性的HTML标签来说,标签的每次加载都意味着针对目标地址的一次HTTP-GET请求。

  • 同源策略以及跨域资源共享在大部分情况下针对的是Ajax请求。同源策略主要限制了通过XMLHttpRequest实现的Ajax请求,如果请求的是一个“异源”地址,浏览器将不允许读取返回的内容

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

跨域:只要协议、域名、端口有任何一个不同,都被当作是不同的域。为了突破同源策略的限制,跨域是指从一个网页去请求另一个不同域的网页的资源。
跨域实现形式:
1.降域:
对于主域相同而子域不同的例子,通过设置document.domain和iframe。
比如:可以在http://child1.a.com/a.htmlhttp://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是什么

  • CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10;
  • 浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息——origin字段,告诉跨域的后台这次跨域请求是由哪个源发出的
  • 实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。服务器根据前端发过来的跨域的ajax请求的origin字段,决定是否同意这次的跨域访问;后台可以通过设置一个标头决定是否通信
  • 例如:假设我们现在需要从http://www.test1.comhttp://www.test2.com请求提取数据,而JSONP只支持GET方法,这时候CORS就可以成为我们的选择。
    利用CORS,http://www.test2.com只需要添加一个标头,就可以允许来自http://www.test1.com的请求。在PHP中的header()设置:
header("Access-Control-Allow-Origin:*"); 
//*表示允许任何域向我们的服务端提交需求
header("Access-Control-Allow-Origin:http://www.test1.com") 
//这样就允许来自http://www.test1.com的需求了

跨资源共享 CORS 详解

代码

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

本地搭建服务器(如果使用 SAE 可创建不同的代码版本,这样可通过1.xxx.sinapp.com2.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

相关文章

  • 前端基础(问答23)

    keywords: 同源策略、跨域、jsonp。 什么是同源策略(same origin policy) 同源:协...

  • 跨域

    主要内容: 同源策略、跨域实现形式(JSONP、CORS、降域、postMessage) 同源策略 (Same o...

  • 做demo和学习过程当中遇到的一些问题,收集的博文

    轻松搞定JSONP跨域请求--->关键字: 跨域, 同源策略, JSONP原理 git拉取远程分支到本地 git ...

  • jsonp

    jsonp的跨域原理解析 背景: 由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp就是为了解...

  • Jsonp 跨域原理

    Jsonp 跨域原理。(摘选) 浏览器的同源策略把跨域请求都禁止了,但是页面中的 标签是例外,不受同源策略限...

  • 31.同源策略、跨域、jsonp

    问答 1.什么是同源策略 ①源(orgin)的定义 以百度为例,输入localtion.origin就可以得到源P...

  • 什么是跨域

    被同源策略限制的都叫做跨域,域名,端口,协议一只就要同源策略 如果跨域 1、jsonp 2、nginx反向代理 3...

  • 同源策略与跨域

    跨域就是违背了同源策略解决跨域的方法有:jsonp,cors和服务器代理

  • 常见跨域解决方案

    跨域 JSONP 使用 标签不受同源策略影响的特性,作为Ajax传输技术称为JSONP。 使用JSONP时,需要服...

  • Jsonp的实现原理

    1. Jsonp Jsonp: 主要是用来获取跨域的请求,由于同源策略的限制,我们不能获取跨域的资源 2. Jso...

网友评论

      本文标题:31.同源策略、跨域、jsonp

      本文链接:https://www.haomeiwen.com/subject/zkpnbttx.html