进阶13

作者: 512a36a11b8c | 来源:发表于2017-12-11 21:08 被阅读10次

题目1: 什么是同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。目的就是为了保证用户信息的安全,防止恶意的网站窃取数据。
那什么是源呢?如果协议、域名、端口对于两个页面是相同的,则两个页面具有相同的源。
举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下:
http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)
参考文章:

阮一峰同源策略

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

一个网站访问非同源页面的对象就是跨域;
有四种常见的方式:

  1. CORS(跨域资源共享);
  2. JSONP;
  3. 降域;
  4. PostMessage

题目3: JSONP 的原理是什么

通过script标签的src来跨域访问js文件,在请求的query中传入约定好的函数名,构建callback(JSON)的格式,事先在HTML中定义好function callback(),然后返回的字符串callback(JSON)会当做JS执行,把想要的信息放在页面上。

题目4: CORS是什么

CORS(Cross-Origin Resource Sharing)即跨域资源共享,是一种ajax跨域请求资源的方式,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。

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

跨域

跨域

当 Web 资源请求由其它域名或端口(不同源)提供的资源时,就发生了跨域请求。跨域有几种实现形式

1.JSONP
例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。

function getData(data){
    //这里是对获取的数据的相关操作
    console.log(data);
    //数据获取到后移除创建的script标签
    document.body.removeChild(originData);
}
var originData = document.createElement('script');
originData.src = 'http://www.jesse.com/data.js';
originData.setAttribute("type", "text/javascript");
document.body.appendChild(originData);

2.CORS
跨源资源共享(CORS)定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。它是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等),来限制哪些域的请求和哪些请求类型可以接受,而客户端在发起请求时必须声明自己的源(Orgin),否则服务器将不予处理,如果客户端不作声明,请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较,只有同域的请求才会处理。
3.降域
对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。 具体的做法是可以在http://www.a.com/a.htmlhttp://script.a.com/b.html两个文件中分别加上 document.domain = "a.com";然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以 “交互”了。
4.postMessage
window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

相关文章

  • Python(七十四)selenium进阶

    13_selenium进阶/01_selenium动作.py: 13_selenium进阶/02_selenium...

  • webpack进阶【15】: 打包提取公共模块配置

    webpack : 打包前提取公共模块配置、 注意:本进阶是在 webpack 进阶 【13】的基础上进行衍生。...

  • 进阶13

    题目1: 什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略。浏览器出于安全方面的考虑,只允...

  • 进阶13

    题目1: 什么是同源策略 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜...

  • JS进阶之DOM

    layout: posttitle: "JS进阶之DOM"date: 2016-05-31 13:28:27 +0...

  • 进阶13作业

    题目1: 什么是同源策略。 浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的...

  • 进阶任务-13

    什么是同源策略 什么是同源简单点儿理解字面的意思就是“同一源头”这也就意味着两边:协议必须要一样,要么都是http...

  • 进阶任务13

    1、什么是同源策略 同源策略:浏览器出于安全方面的考虑,只允许本域下的接口交互;不同源的客户端脚本在没有明确授权的...

  • 进阶-任务13

    同源策略 如果非同源,以下三种行为将受到限制: Cookie、LocalStorage 和 IndexedDB 无...

  • 英文字母编码法和记忆英语单词(一)

    进阶右脑开发课堂V2 9.30 13/21 【26个英文字母编码学习】

网友评论

      本文标题:进阶13

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