【HTTP基础】HTTP2.0简介及web安全

HTTP2.0

HTTP2.0的目的就是通过支持请求与响应的多路复用来减少延迟、通过压缩HTTP首部字段将协议开销降至最低，同时增加对请求优先级和服务器端推送的支持，HTTP2.0不会改动HTTP的语义、HTTP方法、状态码、URI和首部字段等这些核心概念，但是HTTP2.0修改了数据传输的方式和数据格式化的方式。

二进制分帧层

在传输层和应用层之间新增了二进制分帧层，它位于应用层之内，处于应用层可见的高层HTTP API之下的一个新机制，HTTP的语义不受影响，只是在传输期间对数据的编码方式做出修改，HTTP1.x以换行符作为纯文本的分隔符，而HTTP2.0将所有传输的信息分割为更小的消息和帧，并对它们采用二进制格式的编码。

HTTP2.0中的新概念：

1. 流，已建立连接上的双向字节流；
2. 消息，与逻辑消息对应的完整的一系列数据帧，比如请求、响应等；
3. 帧，HTTP2.0通信的最小单位，每个帧的首部含有流标识符。

所有的HTTP2.0的通信都是在一个TCP连接上完成，这个TCP连接可以承载任意数量的双向数据流，相应的，每个数据流以消息的形式发送，而消息由一个或多个帧组成，这些帧可以乱序发送，然后再根据每个帧首部的流标识符重新组装。由于所有的帧都采用二进制编码，所以首部字段都会被压缩。

在HTTP1.x中，如果客户端想发送多个并行的请求以改进性能，就必须使用多个TCP连接，HTTP2.0实现了多路复用，客户端和服务器可以把HTTP消息分解为互不依赖的帧，然后乱序发送，最后在另一端把它们重新组装起来。这样就可以只使用一个TCP连接即可并行发送多个请求和响应。

请求优先级

把HTTP消息分解为很多独立的帧之后，就可以通过优化这些帧的交错和传输顺序，进一步提升性能，为了做到这一点，每个流都可以携带有31bites的优先值。服务器可以根据流的优先级，控制资源的分配，而在响应数据准备好之后，优先将最高优先级的帧发送给浏览器。

服务器推送

在HTTP2.0，服务器可以额外的向浏览器推送资源，当浏览器请求资源A时，而服务器知道它很可能也需要资源B，服务器可以在浏览器发送请求前，主动将资源推送给客户端。这个功能可以帮助客户端将资源B放进缓存。

首部压缩

HTTP1.x的每一次通信都会携带一组首部，用于描述传输的资源及其属性，这通常会增加500-800字节的开销，为了减少这些开销提升性能：

1. HTTP2.0会使用首部表来跟踪和存储之前发送的键值对，对于相同的数据，不再通过每次请求和响应发送；
2. 首部表在HTTP2.0连接持续期内始终存在，由服务器和浏览器渐进的更新；
3. 每个新的首部字段要么被追加到当前首部表的末尾，要么替换首部表之前的值；

在上面的例子中，第二次发送请求只需要发送变化了的字段，从而显著的减少了每个请求的开销。

web安全

常见的前端安全问题包括以下几点：

1. XSS攻击
2. iframe带来的风险
3. CSRF攻击
4. 网络劫持攻击

XSS攻击

XSS是跨站脚本攻击的简称，这类安全问题的本质原因在于：浏览器错误的将攻击者提供的用户输入数据当做JavaScript脚本给执行了。

1：用户输入框输入的数据不经过处理直接展示在页面上，该攻击手段最简单的防御方法就是将前端输入的数据都进行转义，比如将"<"、">"转义为"&lt;","&gt;"实体字符，这样输入数据里面的<script></script>就不会被浏览器当做脚本执行了。但是在Jquery中，append()在添加元素的时候，会使用eval将参数里面的<script>标签脚本执行一遍，如果在攻击时将"<",">"使用unicode码伪装起来，比如："u003cscriptu003ealert('a')"，接下来在对输入字符进行转义的时候，伪装成"u003c"的"<"就会被漏掉，append的时候，则会被重新调用。这个时候需要将unicode码的开头"\"进行转义处理。

2：img标签的攻击，img标签在图片加载失败的时候，会调用该元素上的onerror事件，攻击者可以利用该机制进行攻击。比如<img src="/" onerror="javaScript:alert(document.cookie);" />

3：如果后端从URL上获取GET请求的参数时，直接使用该参数，就会把URL上的脚本带到页面上来。所以需要在前端对该参数进行html字符转义。

但是很多时候XSS攻击都防不胜防，如果页面中被XSS攻击了，页面中用户的敏感信息主要是存储在cookie上的，这个时候应该使用cookie的HttpOnly属性，把cookie设置为只能HTTP请求使用，这样JavaScript脚本就不能读写cookie了。

iframe带来的风险

前端页面有时会用到第三方的页面组件，通常会以iframe的方式来引入，这样会带来不少的安全隐患。攻击者可以在iframe中运行JavaScript脚本，破坏前端的用户体验。如果iframe中的域名因过期而被攻击者抢注，或者被第三方黑客攻破，iframe中的内容被替换掉，从而利用用户浏览器中的安全漏洞下载安全木马等等。

在HTML5中，iframe有sandbox的安全属性，通过该属性可以对ifame的行为进行各种限制，充分实现“最小权限”原则。sandbox属性的参数有以下值：(IE10+)

• allow-forms：允许iframe中提交form表单
• allow-scripts：允许ifame中执行JavaScript
• allow-same-origin：允许将内容作为普通来源对待，如果不使用该关键字，嵌入内容将被视为一个独立的源。
• allow-top-navigation：允许iframe能够主导window.top进行页面跳转
• allow-popups：允许iframe中弹出新窗口,比如,window.open,target="_blank"
• allow-pointer-lock：在iframe中可以锁定鼠标

如果sandbox只添加这个属性而保持属性为空，那么浏览器就对ifame实施最严厉的限制，就是除了允许显示静态资源以外，其他什么都做不了，比如不准提交表单，不准弹窗，不准执行脚本，连Origin都会被强制重新分配一个唯一的值，这样iframe中的页面访问自己的服务器都会被算作跨域。

CSRF

CSRF是跨站请求伪造的简称，HTTP请求是无状态的，为了记录用户的状态，服务器端一般会使用session技术，在某一次请求响应时(一般是登录请求)，服务器会将sessionId作为cookie返回浏览器缓存起来，在接下来的每次请求中，请求头都会携带该cookie传输给服务器，而CSRF攻击就是利用用户的cookie去完成一些恶意操作。

GET型CSRF：后台程序为了省事，会把应该提交数据的请求做成GET请求，删除博客的请求/delete?id=1，那么攻击者只需要在评论区上传<img src="/delete?id=1" />的脚本，只要页面加载该评论，这篇博客就会被删除掉。这样就要严格要求提交数据的请求严格按照POST请求去做，更不要使用JSONP去做提交型接口。

POST型CSRF：诱导用户点击进入一个新的页面，该页面含有自动提交的表单，由于新窗口是具有当前会话的，所以该表单的请求就会携带上用户的cookie，从而进行恶意的操作，例如用户登录www.bank.com网站之后，被诱惑登录www.hacker.com链接，该链接页面发起一个post请求，由于请求的域名为www.bank.com，所以会携带该用户的sessionId，然后进行转账等操作。

预防手段：1：在HTTP协议中，请求头有referer字段，记录该http请求的原地址，攻击者伪造请求的页面的域名为www.hacker.com，所以服务器端就可以判断该请求非法，但是referer也有可能被篡改。2：token验证，在用户登录时，将服务器随机生成的token返回给前端缓存下来，在每次请求时自动携带上该token，这样CSRF攻击者没法知道token的值，该请求就被判断为非法。

网络劫持攻击

很多时候，我们的网站不是直接就访问我们的服务器，中间会经过很多层的代理，如果在某一个环节，数据被中间层的劫持者所截获，这样就能获取到用户的账号密码等保密数据，比如用户使用攻击者建立的wife热点，那么攻击者就能获取该用户收发的所有数据，这里最好是都使用https访问网站。

当使用https访问网站的时候，最常见的攻击方式就是SSL劫持攻击和SSL剥离攻击，SSL劫持需要将攻击者接入到用户和服务器中间，在传输的过程中伪造SSL证书并发给浏览器，这种攻击方式会引起浏览器的证书错误提示，如果用户选择继续操作，那么https传输的数据就能被攻击者破解，SSL剥离攻击也需要将攻击者设置为中间人，是利用http协议的重定向，将https协议访问的网站重新重定向为http协议访问，由于http协议传输的数据是明文的，这样数据就能被攻击者获取。