最近比较无聊。看看有什么东西可以给这个网站加上。这也是我用Apache + WordPress的原因,够原始,很多东西都要自己动手去搞,过程中顺便学学新东西。

HSTS
HSTS是HTTP Strict Transport Security的简称,中文叫作HTTP严格传输安全。这个协议是为了追求更加极致的HTTP安全。
它要解决的情景是这样的:
很多人在浏览器输入网址时,是不会输入https协议头的,而是直接输入adamliu.net, 或者www.adamliu.net。浏览器会自动填充协议头HTTP,再发生请求。(就算你的网址支持HTTPS也没用,浏览器不知道啊,因为浏览器使用HTTP是最大机会能打开网站的)
这个时候服务器收到你的HTTP请求,然后返回一个3xx重定向,让你的浏览器使用HTTPS协议再次打开网页。之后你点我网址内容的超链接(当然,我的网址超链接是使用//或者https://开头,如果写死了HTTP://开头那就是SB了),都会使用HTTPS协议。
然而
一个黑帽黑客Moxie Marlinspike在2009年做了个SSL Stripping的demo,使用中间人攻击 (Man-in-the-middle attack,简称MITM)在这个3xx重定的过程中,把用户的HTTP请求劫持了。
他为了试验这个新型攻击方式,在某个Tor network节点挂了一个嗅探脚本,等了24小时后,他有了下面的收获。

有个简单的图例,说明这种攻击方式。
Hacker可以直接作为中间人,一直和你保持HTTP链接,这样你发的东西都会被看到。然后把你的请求转发到WEB Server,hacker和WEB Server的链接过程是是HTTPS的。

这个时候你的浏览器会显示网站证书不正确,比如现代的谷歌浏览器会显示大大的警告。

为了不复述内容,你可以参考下面的链接了解HSTS的前世今生以及SSL Stripping攻击:
1. 从 HTTP 到 HTTPS 再到 HSTS https://zhuanlan.zhihu.com/p/28874099
2. 针对SSL的中间人攻击演示和防范 https://www.linuxde.net/2011/11/2522.html
开启HSTS (Apache)
sudo vi /opt/bitnami/apps/wordpress/conf/httpd-app.conf #在 <Directory> </Directory> 之间加入 Header always add Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
參考:
https://blog.myssl.com/https-security-best-practices/
https://juejin.im/entry/5981c5df518825359a2b9476
HTTP/2
使用HTTP/2的效果

源码在:https://github.com/adamliuxy/http012-speed-test
Chrome HAR文件:https://github.com/adamliuxy/http012-speed-test/tree/master/har
为什么快了
为什么快了,我们可以从HTTP/1.x为什么慢来看。

来源:https://hpbn.co/primer-on-latency-and-bandwidth/
网站一般是由许多小的资源文件构成,比如 JS , CSS,还有图片。这种资源文件一般就是几十几百KB,现在家庭或者4G网络完全够了。每个HTTP请求都会是浏览器到服务器的一个网络来回(Roundtrip),如果两者之间的延时很大(比如两者距离太远),加上请求数量很多,最终效果就是网站的加载时间会很长。
所以网站要快,就要低延时!低延时!低延时!
🤫如果你的是SPA,请不要让你的 chunk 这么大,记得 split 一下。
HTTP/1.0

HTTP/1.1

HTTP/2

为什么 HTTP/1.1 会是6个链接?
各大浏览器允许的最大同时连接数是很少的,基本都在6个左右。你可以在这里看具体的数量: https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser
比如使用Chrome,针对同一个域(Orign),只允许同时开启 6 个 TCP 链接(来源)。
所以我的测试网站需要 530 个请求,最大的能重用的 TCP 链接也就是 6 个。
问题来了,如果浏览器多开一些并发的 TCP 链接不就可以缩短加载时间吗?
问题是,网站资源请求和响应是严格顺序的,第一次的 index HTML 文档请求优先级是最高的,之后才会根据 DOM的解析顺序去获取 JS, CSS, IMG(你可以使用preload来提升资源请求优先级)。一些浏览器已经知道要马上发送的请求,但是又没有 TCP 链接可以去使用,这些资源请求就会被 Queueing和Stalled(Waterfall的白色和灰色区域)。
HTTP/1.x有个限制是,不允许在同一连接上有来自多个 Response 的数据进行交织,每个Response 都需要完全返回,才能去处理下一个请求的 Response。
建议看这本书的这一章,获取更清楚解析;https://hpbn.co/http1x/#using-multiple-tcp-connections
为什么使用HTTP/2,本网站也没快多少?
因为你的网站请求数量不够多,而且可能你的网络延时本来就低。6个 TCP 并发链接已经够处理了。

开启HTTP2.0(Apache)
STEP 1: 安装模块
sudo vi /opt/bitnami/apache2/conf/httpd.conf # uncomment this line LoadModule http2_module modules/mod_http2.so # restart apache sudo /opt/bitnami/ctlscript.sh restart apache sudo apachectl -M | grep http2
STEP 2: 启用HTTP2.0
https://docs.bitnami.com/aws/apps/trac/administration/enable-http2-apache/
sudo vi /opt/bitnami/apache2/conf/bitnami/bitnami.conf # add the "Protocols" line <VirtualHost _default_:80> ... Protocols h2 h2c http/1.1 </VirtualHost> ... <VirtualHost _default_:443> ... Protocols h2 h2c http/1.1 </VirtualHost> sudo /opt/bitnami/ctlscript.sh restart apache
IPv6
尴尬😅。我现在的网络运营商并不支持IPv6…..
如要支持的话,我需要更新这个网站服务器的网络配置,比如配置AWS VPC,还有就是配置Apache服务器,使其支持IPv6的地址。
完。