这是我参与「第四届青训营 」笔记创作活动的的第3天
Web开发的安全之旅
一、本堂课重点内容：
两个角度看Web安全
--- hacker——攻击 ---
1. Cross-Site Scripting(XSS)
- 通常难以从UI上感知（暗地执行脚本）
- 窃取用户信息（cookie/token）
- 绘制UI（例如弹窗），诱骗用户点击/填写表单
Stored XSS
Reflected XSS
- 不涉及数据库
- 从URL上攻击
DOM-based XSS
- 不需要服务器参与
- 恶意攻击的发起+执行，全在浏览器完成
Reflected XSS vs DOM-based XSS
Mutation-based XSS
- 利用了浏览器渲染DOM的特性（独特优化）
- 不同的浏览器，会有区别（按浏览器进行攻击）
2. Cross-site request forgery(CSRF)
- 在户不知情的前提下
- 利用用户权限（cookie）
- 构造指定HTTP请求，窃取或修改用户敏感信息
3. Injection
SQL Injection
4. SSRF
5. Denial of Service(DoS)
通过某种方式(构造特定请求)，导致服务器资源被显著消耗，来不及响应更多请求，导致请求挤压，进而雪崩效应。
基于正则表达式的DoS
Logical DoS
- 耗时的同步操作
- 数据库写入
- SQL join
- 文件备份
- 循环执行逻辑
Distributed DoS(DDos)
短时间内，来自大量僵尸设备的请求流量,服务器不能及时完成全部请求,导致请求堆积,进而雪崩效应，无法响应新请求。
攻击特点
- 直接访问IP
- 任意API
- 消耗大量带宽（耗尽)
6. 中间人攻击（传输层）
--- 开发者——防御 ---
1. Cross-Site Scripting(XSS)
- 永远不信任用户的提交内容
- 不要将用户提交的内容直接转换成DOM
同源策略
Content Security Policy(CSP)
CSP
- 哪些源（域名）被认为是安全的
- 来自安全源的脚本可以执行，否则直接抛错
- 对eval + inline script 说NO
2. Cross-site request forgery(CSRF)
3. 避免用户信息被携带：SameSite Cookie
SameSite vs CORS
4. Injection
SQL Injection
5. Denial of Service(DoS)
基于正则表达式的DoS
Logical DoS
Distributed DoS(DDos)
6. 中间人攻击（传输层）
二、详细知识点介绍：
1. HTTP与HTTPS
HTTP: 超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
HTTPS: 是身披SSL外壳的HTTP。HTTPS是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。
- PS: TLS 是传输层加密协议，前身是SSL协议，由网景公司1995年发布，有时候两者不区分。
HTTP特点：
- 无状态：协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作
- 无连接：HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，需要耗费不必要的时间和流量。
- 基于请求和响应：基本的特性，由客户端发起请求，服务端响应
- 简单快速、灵活
- 通信使用明文、请求和响应不会对通信方进行确认、无法保护数据的完整性
HTTPS特点： 基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
- 内容加密：采用混合加密技术，中间者无法直接查看明文内容
- 验证身份：通过证书认证客户端访问的是自己的服务器
- 保护数据完整性：防止传输的内容被中间人冒充或者篡改
https和http的区别
- http端口是80，而https端口是443
- http是超文本传输协议，信息是明文传输，https是SSL/TLS协议加密传输
- https协议需要到CA申请证书
- http是无状态的，https具有身份认证，校验机制，比http安全
2. HSTS（HTTP Strict Transport Security）
HSTS（HTTP Strict Transport Security） 国际互联网工程组织IETF正在推行一种新的Web安全协议。
HSTS的作用是强制客户端（如浏览器）使用HTTPS与服务器创建连接。
3. CSP
CSP全称Content-Security-Policy，内容安全策略，它的主要作用是尽量降低XSS跨站脚本攻击的可能，CSP可以在meta标签和HTTP头中使用。
这个响应头表示图片的src只能加载同源的，注意self的引号
Content-Security-Policy: img-src 'self'
www.baidu.com 的图片就可以在这个页面上加载
Content-Security-Policy: img-src http://www.baidu.com
多个安全策略的情况，同一种类的不同域名之间用空格分隔，不同种类之间用分号
Content-Security-Policy: img-src 'self' http://www.baidu.com; script-src http://xxx.com http://yyy.com
违反安全策略时，会触发securitypolicyviolation事件，可以通过addEventListener来监听该事件
4. SRI
SRI 全称 Subresource Integrity - 子资源完整性，是指浏览器通过验证资源的完整性（通常从 CDN 获取）来判断其是否被篡改的安全特性。
为什么要使用 SRI
在 Web 开发中，使用 CDN 资源可以有效减少网络请求时间，但是使用 CDN 资源也存在一个问题，CDN 资源存在于第三方服务器，在安全性上并不完全可控。
CDN 劫持是一种非常难以定位的问题，首先劫持者会利用某种算法或者随机的方式进行劫持（狡猾大大滴），所以非常难以复现，很多用户出现后刷新页面就不再出现了。之前公司有同事做游戏的下载器就遇到这个问题，用户下载游戏后解压不能玩，后面通过文件逐一对比找到原因，原来是 CDN 劫持导致的。怎么解决的呢？听说是找 xx 交了保护费，后面也是利用文件 hash 的方式，想必原理上也是跟 SRI 相同的。
所幸的是，目前大多数的 CDN 劫持只是为了做一些夹带，比如通过 iframe 插入一些贴片广告，如果劫持者别有用心，比如 xss 注入之类的，还是非常危险的。
开启 SRI 能有效保证页面引用资源的完整性，避免恶意代码执行。
三、实践练习例子：
混合加密： 结合非对称加密和对称加密技术。客户端使用对称加密生成密钥对传输数据进行加密，然后使用非对称加密的公钥再对秘钥进行加密，所以网络上传输的数据是被秘钥加密的密文和用公钥加密后的秘密秘钥，因此即使被黑客截取，由于没有私钥，无法获取到加密明文的秘钥，便无法获取到明文数据。
数字摘要： 通过单向hash函数对原文进行哈希，将需加密的明文“摘要”成一串固定长度(如128bit)的密文，不同的明文摘要成的密文其结果总是不相同，同样的明文其摘要必定一致，并且即使知道了摘要也不能反推出明文。
数字签名技术： 数字签名建立在公钥加密体制基础上，是公钥加密技术的另一类应用。它把公钥加密技术和数字摘要结合起来，形成了实用的数字签名技术。
四、课后个人总结：
1.什么是同源策略？
同源策略/SOP（Same origin policy） 是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易受到 XSS、 CSFR 等攻击。
同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。
源就是协议、域名和端口号。
协议：http,https
域名：区域的名字，每个域名都对应一个IP地址， 举个例子：域名：www.baidu.com，http://180.101.49.12/
180.101.49.12则为IP地址
2.什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
CORS（跨域资源共享）
CORS（Cross-origin resource sharing，跨域资源共享）是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
优点
- CORS 通信与同源的 AJAX 通信没有差别，代码完全一样，容易维护。
- 支持所有类型的 HTTP 请求。
缺点
- 存在兼容性问题，特别是 IE10 以下的浏览器。
- 第一次发送非简单请求时会多一次请求。
JSONP 跨域
由于
script标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。
优点
- 使用简便，没有兼容性问题，目前最流行的一种跨域方法。
缺点
- 只支持 GET 请求。
- 由于是从其它域中加载代码执行，因此如果其他域不安全，很可能会在响应中夹带一些恶意代码。
- 要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给 script 标签新增了一个 onerror 事件处理程序，但是存在兼容性问题。
图像 Ping 跨域
由于
img标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过 img 标签的 src 属性进行跨域，这也就是图像 Ping 跨域的基本原理。
优点
- 用于实现跟踪用户点击页面或动态广告曝光次数有较大的优势。
缺点
- 只支持 GET 请求。
- 只能浏览器与服务器的单向通信，因为浏览器不能访问服务器的响应文本。
