Month: April 2020

最近比较无聊。看看有什么东西可以给这个网站加上。这也是我用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的效果

为什么快了

为什么快了，我们可以从HTTP/1.x为什么慢来看。

网站一般是由许多小的资源文件构成，比如 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的地址。

完。

跟技术沾边的东西，一般总是冷冰冰，要冷静、精确、逻辑、严谨，不能容忍一点误差，失之毫厘 谬以千里。

正如本文标题，技术是刻度，艺术是温度。如何让技术更加有温度，有关怀，拉近和使用者的距离，甚至是让技术变的可爱呢？

我总结了几个措施：

1. 产品名字
   1. Apple Lisa，1983年推出。最早使用图形用户界面（GUI）的个人计算机系统之一。就是乔布斯的女儿的名字。对比于以前叫Apple III, Apple II Plus。
   2. Django，致敬：Django Reinhardt
   3. macOS，从10.8 (“Mountain Lion”) 之后开始用加州的地名山名
2. 产品版本发布的Codename
   1. WordPress 每次发布产品都是有个Jazzer https://wordpress.org/about/history/
   2. Ubuntu 的每次版本更新都有个动物 https://wiki.ubuntu.com/Releases
3. 吉祥物
   1. Go Lang 主页 https://golang.org/ Gopher好可爱
   2. Docker logo, 一个鲸鱼抬起箱子
   3. docker swarm，很多鲸鱼抬起箱子
4. IT团队有个名字，而不是生硬的软件团队。可以酒，饮料，或者某个动物等等
5. 团队内部，可以让每个同事对版本发布代码的命名权。

完。