JSONP_跨域

题目1: 什么是同源策略

所谓"同源"指的是"三个相同"。协议相同、域名相同、端口相同。
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?
很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。
由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。

题目2: 什么是跨域?跨域有几种实现形式

跨域:从一个页面去请求读或者写另一个页面的资源,突破同源策略的限制。
跨域的几种方式:

  • 主域名相同,子域不同的,如:child.a.html和a.html可通过设置document.domain = a.html达到降域的目的,实现跨域访问。问题:
    1、安全性,当一个站点(b.a.com)被攻击后,另一个站点(c.a.com)会引起安全漏洞。
    2、如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain。
  • JSONP(json with padding),只支持get请求,无法判断请求是否失败(不会返回各种HTTP状态码),安全性不高,假如提供jsonp的服务存在页面注入漏洞,那么所有调用这个jsonp的网站都会存在漏洞。但它的兼容性很好,在许多老版本浏览器上都可以运行,不想XMLHttpRequest对象实现的Ajax请求那样收到同源策略的限制。
  • CORS (cross-origin-resource-sharing)
  • html5中新规定的window.postMessage来实现跨域。

题目3: JSONP 的原理是什么

原理是利用script标签的可跨域性,在网页中动态的创建,并添加script标签,请求需要访问的页面资源的url,服务器将数据放在一个知道指定名字的回调函数给传回来,由于网页已经定义的该函数,参数被返回后,便会立即执行。

题目4: CORS是什么

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。CORS与JSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

题目5: 根据视频里的讲解演示三种以上跨域的解决方式

  • 更改host文件
  • 使用JSONP解决跨域
    前端html中写入JavaScript:
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Task31</title>
</head>
<body>
<h3>JSONP跨域</h3>
<script>
  window.jsonpFunction = function(data){
      console.log(data);
  }
  var script = document.createElement('script');
  script.src = "//b.com/Ajax/advance13/advance13.php?callback=jsonpFunction";
  document.body.appendChild(script);
</script>
</body>
</html>

后端php

$message = "检测接收";
jsonpFunction($message);
  • 使用CORS跨域
    前端html中写入JavaScript:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Task31</title>
</head>
<body>
<h1>演示跨域</h1>
<script src="jquery-1.11.1.js"></script>
<script>
    $.ajax({
        type: 'get',
        url: '//b.com/Ajax/advance13/advance13.php',
        dataType: 'text',
        success: function (data) {
            console.log(data);
        },
        error: function () {
            console.log('error');
        }
    });
</script>
</body>
</html>
  • 后端php
header("Access-Control-Allow-Origin: http://a.com");
$message = "检测接收";
echo $message;
  • postmessage跨域
    在HTML5中新增了postMessage方法,postMessage可以实现跨文档消息传输(Cross Document Messaging),Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。
    该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。
    使用postMessage实现跨域的话原理就类似于jsonp,动态插入iframe标签,再从iframe里面拿回数据
    ,作跨页面通信更加适合.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是同源策略 同源政策(same-origin policy)是指同域名(或ip),同端口,同协议视为同一个域,...
    小囧兔阅读 3,696评论 0 1
  • 1: 什么是同源策略 最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源",所谓...
    好奇而已阅读 2,563评论 0 0
  • 1.什么是同源策略浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不...
    24_Magic阅读 3,496评论 0 0
  • 什么是同源策略 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995...
    YQY_苑阅读 2,865评论 0 0
  • 一个人的时候 站在小树林里 透过叶间斑驳 看萤火的轨迹 蝴蝶不懂你的伤心 不小心将月光洒落 碰碎了一湖涟漪 第四幅水彩
    xinanxiao阅读 5,157评论 57 111

友情链接更多精彩内容