add file：CSRF和XSS安全问题

2018-03-07 20:07:38 +08:00 · 2018-03-07 20:07:38 +08:00 · 1c9ff02100
commit 1c9ff02100
parent 8e4b71cab5
3 changed files with 233 additions and 11 deletions
--- a/06-前端基础/07-跨域通信类.md
+++ b/06-前端基础/07-跨域通信类.md
@ -60,7 +60,7 @@ Ajax在前后端通信中经常用到。做业务时，可以借助第三方的

 ## 如何创建Ajax

-> 关于Ajax请求，可以看本人的基础文章：
+> 关于Ajax请求，可以看本人的基础文章：[Ajax入门和发送http请求](https://github.com/smyhvae/Web/blob/master/08-Ajax/02-Ajax%E5%85%A5%E9%97%A8%E5%92%8C%E5%8F%91%E9%80%81http%E8%AF%B7%E6%B1%82.md)

 在回答 Ajax 的问题时，要回答以下几个方面：

@ -92,7 +92,7 @@ XMLHttpRequest有很多触发事件，每个事件是怎么触发的。

 ### 发送 get 请求和 post 请求

-（1）get请求举例：
+get请求举例：

 ```html
 <!DOCTYPE html>
@ -208,7 +208,7 @@ readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）
 - [你真的会使用XMLHttpRequest吗？](https://segmentfault.com/a/1190000004322487)


-### 实际开发中用的 Ajax请求
+### 实际开发中用的 原生Ajax请求

 ```javascript

@ -300,7 +300,7 @@ Ajax 的推荐链接：<https://segmentfault.com/a/1190000006669043>

 在CORS和postMessage以前，我们一直都是通过JSONP来做跨域通信的。

-**JSONP的原理**：通过`<script>`标签的异步加载来实现的。比如说，head标签里，可以通过`<script>`标签的src，里面放url，加载很多在线的插件。
+**JSONP的原理**：通过`<script>`标签的异步加载来实现的。比如说，实际开发中，我们发现，head标签里，可以通过`<script>`标签的src，里面放url，加载很多在线的插件。这就是用到了JSONP。

 **JSONP的实现：**

@ -420,7 +420,7 @@ Websocket的推荐链接：<http://www.ruanyifeng.com/blog/2017/05/websocket.htm

 ### 3、CORS

-CORS 可以理解成是**既可以同步、也可以异步***的Ajax。
+CORS 可以理解成是**既可以同步、也可以异步**的Ajax。

 fetch 是一个比较新的API，用来实现CORS通信。用法如下：

@ -441,13 +441,13 @@ fetch 是一个比较新的API，用来实现CORS通信。用法如下：

 另外，如果面试官问：“CORS为什么支持跨域的通信？”

-答案：跨域时，浏览器会拦截Ajax请求，并在http头中加arange。
+答案：跨域时，浏览器会拦截Ajax请求，并在http头中加Origin。

 ### 4、Hash

 url的`#`后面的内容就叫Hash。**Hash的改变，页面不会刷新**。这就是用 Hash 做跨域通信的基本原理。

-补充：url的`?`后面的内容叫search。Search的改变，会导致页面刷新，因此不能做跨域通信。
+补充：url的`?`后面的内容叫Search。Search的改变，会导致页面刷新，因此不能做跨域通信。

 **使用举例：**

@ -476,9 +476,9 @@ url的`#`后面的内容就叫Hash。**Hash的改变，页面不会刷新**。

 > H5中新增的postMessage()方法，可以用来做跨域通信。既然是H5中新增的，那就一定要提到。

-**场景：**窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息。步骤如下。
+**场景：**窗口 A (`http:A.com`)向跨域的窗口 B (`http:B.com`)发送信息。步骤如下。

-（1）在A窗口中操作如下：向B窗口发送数据
+（1）在A窗口中操作如下：向B窗口发送数据：


 ```javascript
@ -490,8 +490,8 @@ url的`#`后面的内容就叫Hash。**Hash的改变，页面不会刷新**。

 ```javascript
    // 在窗口B中监听 message 事件
-    Awindow.addEventListener('message', function (event) {
-        console.log(event.origin);  //获取：http://A.com
+    Awindow.addEventListener('message', function (event) {   //这里强调的是B窗口里的window对象
+        console.log(event.origin);  //获取 ：url。这里指：http://A.com
        console.log(event.source);  //获取：A window对象
        console.log(event.data);    //获取传过来的数据
    }, false);
--- a/06-前端基础/08-安全问题：CSRF和XSS.md
+++ b/06-前端基础/08-安全问题：CSRF和XSS.md
@ -0,0 +1,210 @@
+
+## 前言
+
+面试中的安全问题，明确来说，就两个方面：
+
+- CSRF：基本概念、攻击方式、防御措施
+
+- XSS：基本概念、攻击方式、防御措施
+
+这两个问题，一般不会问太难。
+
+有人问：SQL注入算吗？答案：这个其实跟前端的关系不是很大。
+
+
+## CSRF
+
+问的不难，一般问：
+
+- CSRF的基本概念、缩写、全称
+
+- 攻击原理
+
+- 防御措施
+
+如果把**攻击原理**和**防御措施**掌握好，基本没什么问题。
+
+
+### 1、CSRF的基本概念、缩写、全称
+
+CSRF（Cross-site request forgery）：**跨站请求伪造**。
+
+PS：中文名一定要记住。英文全称，如果记不住也拉倒。
+
+
+### 2、CSRF的攻击原理
+
+
+20180307_1735.png
+
+用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。
+
+
+从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：
+
+（1）登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
+
+（2）在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。
+
+我们在讲CSRF时，一定要把上面的两点说清楚。
+
+温馨提示一下，网站B其实拿不到 cookie。cookie保证了用户可以处于登录状态。
+
+
+举个例子，前端事假你，微博网站有个api接口有漏洞，导致很多用户的粉丝暴增。
+
+### 3、CSRF如何防御
+
+**方法一、Token 验证：**（用的最多）
+
+
+（1）服务器发送给客户端一个token；
+
+（2）客户端提交的表单中带着这个token。
+
+（3）如果这个 token 不合法，那么服务器拒绝这个请求。
+
+
+**方法二：隐藏令牌：**
+
+把 token隐藏在 http 的 head头中。
+
+
+方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。
+
+
+**方法三、Referer 验证：**
+
+Referer 指的是页面请求来源。意思是，**只接受本站的请求，服务器才做响应**；如果不是，就拦截。
+
+
+## XSS
+
+### 1、XSS的基本概念
+
+XSS（Cross Site Scripting）：**跨域脚本攻击**。
+
+
+接下来，我们详细讲一下 XSS 的内容。
+
+> 预备知识：HTTP、Cookie、Ajax。
+
+
+
+### XSS的攻击原理
+
+XSS攻击的核心原理是：不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。
+
+最后导致的结果可能是：
+
+- 盗用Cookie
+
+- 破坏页面的正常结构，插入广告等恶意内容
+
+- D-doss攻击
+
+
+### XSS的攻击方式
+
+
+- 1、反射型
+
+发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS。
+
+- 2、存储型
+
+
+存储型XSS和反射型XSS的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求时目标页面时不用再提交XSS代码。
+
+
+
+
+### XSS的防范措施
+
+XSS的防范措施主要有三个：
+
+
+**1、编码**：
+
+对用户输入的数据进行`HTML Entity`编码。
+
+
+如上图所示，把字符转换成 转义字符。
+
+
+**2、过滤：**
+
+- 移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言是，过滤掉一些不安全的内容）
+
+- 移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，可是支持跨域的呀，一定要移除）。
+
+
+
+**3、校正**
+
+- 避免直接对`HTML Entity`进行解码。
+
+- 使用`DOM Parse`转换，校正不配对的DOM标签。
+
+备注：我们应该去了解一下`DOM Parse`这个概念，它的作用是把文本解析成DOM结构。
+
+
+比较常用的做法是，通过第一步的编码转成文本，然后第三步转成DOM对象，然后经过第二步的过滤。
+
+
+**还有一种简洁的答案：**
+
+首先是encode，如果是富文本，就白名单。
+
+
+
+
+## CSRF 和 XSS 的区别
+
+面试官还可能喜欢问二者的区别。
+
+区别一：
+
+- CSRF：需要用户先登录网站A，获取 cookie。
+
+- XSS：不需要登录。
+
+
+区别二：（原理的区别）
+
+- CSRF：是利用网站A本身的漏洞，去请求网站A的api。
+
+- XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。
+
+
+
+## 其他
+
+
+### XSS
+
+关于XSS，推荐几个网站：
+
+- <http://html5sec.org/>
+
+里面列出了很多XSS的例子，可以长见识。如果你专门研究XSS，可以看看。
+
+
+- [FreeBuf网站上的专栏作者：Black-Hole](http://www.freebuf.com/author/black-hole)
+
+比如，他的第一篇文章就讲到了[XSS的原理分析与解剖](http://www.freebuf.com/articles/web/40520.html)。有句话摘抄如下：弹窗只是测试xss的存在性和使用性。
+
+比如，这个人还有篇文章写[自动化检测CSRF（第一章）](http://www.freebuf.com/articles/web/107207.html)。大公司做网站，一般会做嗅探服务（比如自动化工具做CSRF的检测、自动化的方式控制安全风险）。
+
+另外，可能还有些工具，可以扫描代码本身有没有一些安全问题。
+
+- [GitHub | Cure53](https://github.com/cure53)
+
+这是GitHub上的一个德国组织。
+
+上面的项目都跟安全相关，有些仓库是可以直接运行的。如果你不需要定制，就可以直接用别人的，没必要自己写XSS库、XSS的过滤之类的，避免麻烦。
+
+
+
+
+
--- a/06-前端基础/09-算法问题.md
+++ b/06-前端基础/09-算法问题.md
@ -0,0 +1,12 @@
+
+
+## 前言
+
+
+算法主要包括：
+
+- 排序
+
+- 堆栈、队列
+
+链表