imooc（四）

1.通信类

什么是同源策略及限制 → 前后端如何通信 → 如何创建Ajax → 跨域通信的几种方式

1.1什么是同源策略及其限制

所谓”同源”指的是”三个相同：协议相同、域名相同、端口相同。指一段脚本只能读取来自同一来源的窗口和文档的属性。

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

同源策略的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

限制范围：

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

1.2 前后端如何通信

一、Ajax（Aajx请求只能发给同源的网址）

二、WebSocket（该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。）

三、CORS（Cross-Origin Resource Sharing）（同源跨域都支持）

1.3 如何创建一个Ajax

Ajax和Http状态字

一、XMLHttpRequest对象的工作流程

二、兼容性处理

三、事件的触发条件

四、事件的触发顺序

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function () {
    if (xhr.readyState==4) {
        if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
            //代码
        }
    }
}

xhr.open("get","./",true);
xhr.send(null);

1.4 跨域通信的几种方式

JSONP

Hash （hash改变，页面不会刷新）

postMessage（H5新增）

WebSocket（不受同源策略限制）

CORS（可理解为支持跨域通信的Ajax）

JSONP跨域原理：

基本原理：利用script标签的异步加载特性实现
给服务端传一个回调函数，服务器返回一个传递过去的回调函数名称的JS代码

在remote.com 上有remote.js文件，内容如下：

1	callback({"result": "data from remote.com"});

我们本地的jsonp.html页面中包含了如下JavaScript代码：

<script type="text/javascript">
var callback = function(data){
    alert('receive data from remote:' + data.result);
};
</script>
<script type="text/javascript" src="http://remote.com/remote.js"></script>

在浏览器打开jsonp.html，我们会看到弹出窗，内容为：

1	receive data from remote: data from remote.com

利用<script src="remote.js">不受同源策略限制的后门，达到向remote URL获取数据然后更新本地页面DOM的目的。这就是JSONP的核心。

WebSocket教程

跨域资源共享 CORS 详解

2. 安全类

2.1 CSRF（跨站请求伪造）

浅谈CSRF攻击方式

一、基本概念

CSRF（Cross-site request forgery）：跨站请求伪造。可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账……造成的问题包括：个人隐私泄露以及财产安全。

二、攻击原理

三、防御措施

Token 验证
Referer 验证
隐藏令牌

2.2 XSS（跨站脚本攻击）

指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

Web安全-XSS

3. 算法类

排序 → 堆栈、队列、链表 → 递归 → 波兰式和逆波兰式

3.1 排序

冒泡排序：

快速排序：

选择排序：

希尔排序：