[教表弟搭博客]📝课程记录 20200503 启用HTTPS&添加网站统计功能

视频工具: 腾讯会议

时长:约2小时

课程内容:

1 . 介绍一些计算机常用英文单词 enable, valid, renew, space-separated

2 . 介绍ChromeDev Tool的使用

3 . 动手把网址升级为HTTPS

4. 动手给网站添加统计分析功能(百度网站统计)

遇到的问题:

1 . HTTPS

使用 Bitnami 安装 WordPress 可以直接使用内置的命令 ./bncert-tool 根据命令指引完成HTTPS 证书的配置。

然而,我们遇到了这个问题, acme 400 Timeout during connect (likely firewall problem):

阿里云的 VM,包括 AWS 的 EC2 都是默认可以访问公网的。没有防火墙拦住。

这个问题卡了我们挺久的,时间问题,这次课程我们决定跳过HTTPS的配置。

最后我发现,原来没有给阿里云的 VM 开启443 访问端口。。。。尴尬呀😅。这个脚本 bncert-tool 会配置Apache的服务器开启443, 让 Let’s Encrypt 能访问你的443端口完成 Challenge。

2 . 添加百度网站统计功能

这个没遇到什么问题,验证完成的方式也很简单,直接在 Chrome Dev Tool 看源码就好了。

修改的是 WordPress 主题 header.php 文件

完。

[WordPress] 一些网站优化加固措施(HSTS, HTTP/2)

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

本网站已经通过 ATS 和 PCI DSS(支付卡行业安全标准)安全合规,评级是最高级别的A+,详情请看: https://myssl.com/adamliu.net?domain=adamliu.net&status=success

HSTS

HSTSHTTP 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 Strippingdemo,使用中间人攻击 (Man-in-the-middle attack,简称MITM)在这个3xx重定的过程中,把用户的HTTP请求劫持了。

他为了试验这个新型攻击方式,在某个Tor network节点挂了一个嗅探脚本,等了24小时后,他有了下面的收获。

视频截图来源:https://www.youtube.com/watch?v=MFol6IMbZ7Y&t=1757s

有个简单的图例,说明这种攻击方式。

Hacker可以直接作为中间人,一直和你保持HTTP链接,这样你发的东西都会被看到。然后把你的请求转发到WEB Server,hacker和WEB Server的链接过程是是HTTPS的。

视频截图来源自: https://www.youtube.com/watch?v=I8yKkBa-nUk

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

大大的警告

为了不复述内容,你可以参考下面的链接了解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://h0.adamliu.net (http/1.0),https://h1.adamliu.net(http/1.1) , https://h2.adamliu.net(http1.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
网站 https://h0.adamliu.net 需要 530资源请求,每个请求都需要 TCP 握手建立链接。你看看 Waterfall 里面的橙色有多少。因为 http/1.0会真的需要 530 TCP链接,注意不是并发 530个。HAR 文件可以在我的 Github 下载。
HTTP/1.1
还是 530 个资源请求。 但是只需要 6 个TCP链接(你数一数绿色的条条,这个并发请求)。也就是握手建立链接的时间少了,客户端和服务器直接的Roundtrip也少了。这主要归功于于 keep-alive 特性, 所以你看到 transferred 的大小会比 http/1.0大了一点,因为 keep-alive 去要在 HTTP 头部注明。
HTTP/2
什么情况,怎么就一条线。因为只需要一个 TCP 链接!什么 TCP 握手啥的,一次就够了!不是说低延时就能快速打开网站么? 是的,一次链接一次握手就可以了。

为什么 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 并发链接已经够处理了。

这是我测试的内容。每个协议我分别跑了三次。https://h2.adamliu.net 需要530个请求才能完成。这种极端情况,会体会出HTTP/2的效果。特别注意的是,为什么

开启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. 团队内部,可以让每个同事对版本发布代码的命名权。

梦境推荐算法

最近天气多变,工作内容多,连日高强度写代码,弄得我头脑亢奋,做梦特别多。

我拾取了其中一天梦到的内容,于是有了这篇文章。

故事一

我和ED创业的故事,被某知名投资机构得知。这个机构邀请我们见面,想对我们进行投资。投资人为了保险起见,派人对我做背景调查。他们请了黑帽黑客黑了我的米家监控摄像头以及电脑的摄像头。之后的某天,ED转发了机构黑到的视频截图给我。图片是我在家做的一些猥琐的事。

看到这信息后,我尴尬万分,不知道怎么回。我对着屏幕,想了想,似乎也没什么。现在已经是一个可以有人直播吃便便的年代,观众的底线已经越来越低。我的猥琐事已经不足为奇。

我淡定地回复了: 😅。

故事二

我坐在电脑面前,准备打打游戏轻松一下,发泄被发现了秘密的不爽。我登录了某个对战平台,随便选了一个魔兽争霸RPG剧情地图,点进去某个房间后,电脑突然一黑,我马上进入了游戏。

我完全不知道这个游戏的玩法,随便选了一个游戏角色后,我看到了游戏的主场景。屏幕中间是一座高大的雕塑建筑,上面写着:雅典娜。

突然一阵号角声传来,这应该是敌人要来了。我朝前面走过去准备迎战,然而敌人却是从我后面过来的。他们抄着家伙朝着雅典娜一顿猛砸,建筑物倒塌。

游戏结束。

故事三

本来是让人爽的游戏也让人有点尴尬。我起身走到阳台,心里还咒骂着那些不安全的摄像头。在对面楼的阳台,有个高个子男子,用很北方的大嗓门在打电话,我们盯着他看,直到他留意到我,也开始看着我。

我大喊:LG,原来你也在这里住呀。

他喊道:balabalabala

我大喊并挥手示意说,我听不清他在说什么。

他就掉头准备朝我走来。我开门迎接他,和他一起来的还有一位身材高挑的女子,我问他们为什么会搬到这里,这个女子抢先回答道,搬过来这里是为了能优先拿到第三期公寓的入住资格。

我带他们参观了我住的房子,房子有些脏乱。我用仓促的口吻解析了这些脏乱的原因,有一种被母亲突击检查房间的感觉。

故事完。

醒了

我打开通讯录找到了同学LG,聊天页面显示上次聊天的时间是:2015年3月17日。

时隔5年后,我发出了一个:hi。


梦境推荐算法

做梦的时候,一些沉积在大脑深处的故事和人总会时不时冒出来。那些遥远的旧朋友和记忆点,在不断改变的生活环境里,可能已经没有了能再次被触发的条件。这可能就是为什么有人去写日记,拍照片和记录原因。

如果不写日记,也不拍照。能唤起一些旧时记忆点和人的,貌似也就只能做梦了。

我不禁感叹,这是基于什么生物原理可以这样随机而有效地推荐筛选出这些人和事件。

于是,我在知乎找到了这个答案:

关于梦,伦敦大学学院神经科学博士赵思家认为,在神经科学角度理解,梦的本质是脑干所产生的随机神经信号。

https://www.zhihu.com/question/60701070/answer/781829248

作为一个IT从业人员,这种推荐信息的方式难道没有一套算法模拟么?

我马上想到了一个名字,梦境推荐算法。

为了满足好奇心,我谷歌了一下,找到如下内容:

有一种比较类似的算法叫做随机漫步算法(Random Walk)。这是一个算法也是一个数学模型,可以用来模拟一些自然现象,比如滴入水中的墨水和气味扩散等布朗运动现象。

这个算法已经成功地应用在各种领域。比如在信息检索领域,Google搜索引擎特别出名的PageRank算法就有使用Random Walk算法。据说,早起的雅虎搜索是根据关键字来匹配实信息搜索,这个方式很容易被人故意增加关键词频率而欺骗,导致搜索结果正确率很低。直到PageRank算法提出后,雅虎根据其改进了自家的算法才让搜索的正确率有所改善[1]。

然而,这个算法可能不是很适合梦境的情况。随机漫步算法的每一次随机动作,都是基于上一次的动作进行推导。梦境出现的事件,很多时候是直接推导,类似于人的直觉可以从大脑库里面直接提取事件或者人物。

那么这种算法是什么呢?我没有继续再查下去,那就留给下次做梦的时候再告诉我答案吧。

完。

参考:

[1] 初识随机游走:https://yq.aliyun.com/articles/288544

本文写作耗时约3小时。