旺角报摊

每天上班的路上,我都会路过一个报摊。这个报摊刚好位于街角的转弯处,路人每次走路转弯都会很自然地看到报摊上销售的杂志报纸。

利益最大化

为了利益最大化,报摊摊主在长年的经营中不断调整自己的策略,最后自然地演变出了现在这个状态:

  1. 巧妙地占用公共空间,摆放和展示更多的货物。这种占用空间的比例多少,是长时间慢慢磨合过程。最后路人觉得走起来也没什么问题不投诉,食环署也觉得没什么问题不整改,摊主就慢慢占到了便宜。
  2. 还记得前文提到说,路人可以很自然地看到报摊上的杂志吗?这个曝光度最大的位置,摆放的其实是著名的四大地道香港成人杂志。我每天路过都会很自然的扫几眼,而且总会觉得自己不小心就会把桌子上的杂志撞到到地上。

为什么摊主会把成人杂志放在最明显的位置

(一般情况下🔞杂志都是放在不明显的位置。)

我一直在思考这个摆方方式背后的原因,如何才能照顾好买家的情绪得体地面对面卖出一些尴尬的商品(这类商品包括:1.低情商技术宅直男在人多的便利店买安全套。2. 温柔贤惠的少妇妈咪在便利店买烟。),我为了方便理解,我设想了下面的场景:

  • 某啤酒肚男:要个《xx马经》,顺便要埋呢个。(左手顺势把马经叠在杂志上面,右手给出了50)
  • 摊主:(摊主见状,直接收50,找钱,交易完毕,不用说一句话。)

注意:

  1. 啤酒肚男为何能快速把马经叠在上面?因为这里最明显的位置就是客人最方便的位置,你只要站在报摊前面,杂志就在你最顺手的位置。
  2. 而且,摊主把《xx马经》交给你,你把《xx马经》放在桌子上掏钱时,马经已经跌在杂志上了。

人性

我观察了一下,这个报摊主要卖:

  1. 成人杂志 (黄)
  2. 马经 (赌)
  3. 烟(毒)
  4. 水 (基本需求)
  5. 口含润喉的陈皮(服务第3点,吸烟人喜欢的东西)

有没有发现这个报摊其实完全在销售符合人性原始欲望的东西。这里是旺角,想想你脑海里对旺角的印象或者电影之类的,这个报摊有没有觉得很切合旺角的风格?

最近在看云云姐(温云云)刑诉法讲解,一个人犯罪动机大概分为:财欲、性欲和攻击欲三大类。攻击欲是什么东西?当我看到这个报刊对面的有家五金店的招牌写着《浩男 五金装饰材料有限公司》,我茅塞顿开。

*本文提到的报摊位于上海街和砵兰街之间的某个街区。

[教表弟搭博客]📝课程记录 20200517 启用http/2 (Apache WordPress)

副标题:在表弟面前翻车是种什么样的感觉?🤔

视频工具: 腾讯会议

时长:约2小时

课程内容:

  1. 介绍 http/2.0
  2. 如何看出才能看到自己用了http/2.0
  3. 记录升级前后的测试结果,by Pingdom
  4. 登陆服务器更改Apache配置
    1. 安装http/2 模块
    2. 配置VirtualHost,启用http/2
  5. 翻车过程

一切都是按剧情进行。

介绍如何查看当前浏览器使用的 http 协议版本。

更新为 http/2.0 之前的 PingDom 测试。
https://tools.pingdom.com/#5c8858e403800000

启用 http/2 模块。重启 apache 。

配置 Apache VirtualHost 也是按照节奏进行。

翻车过程

弄完上面的各个步骤,我和表弟马上使用 Chrome 查看了协议版本,然而发现 http/2 并没有生效。

虽然我们是隔着屏幕教学,然而我还是略觉得尴尬😅,怎么又翻车了,说好的半个小时弄好,最后用了2个小时。

这个时候我的疑问是:

  1. 我的也是 Bitnami wordpress,也是 按照上述步骤配置好的,怎么表弟的网站不行?(后面会解答)
  2. 难道是阿里云有什么神秘的东西?(其实并没有)
  3. 是不是有 typo ?(我再三检查了一下,发现没有typo)

经过一番 Google Search, 我发现了apache 启用 http/2的必须条件,以及我表弟网站的支持情况:

  1. 网站要支持 https (虽然http/2 也可以支持 http 非安全方式链接 (h2c) 但是大多数浏览器只支持 https 的 2.0版本) ✅
  2. Apache 版本 要大于 2.4.24 ✅
  3. 要使用 php-fpm ❌
  4. 关于Apache MPM(Multi-Processing Modules), http/2 不支持 Prefork 模式,需要使用 Event 模式 ❌

启用 php-fpm 和 MPM Event Mode

只需要根据这篇文章操作就可以启用:https://docs.bitnami.com/aws/apps/wordpress/administration/enable-phpfpm/

解答一下上面的疑问一:

我的 Bitnami WordPress 是默认启用的,因为我使用 EC2 AMI Marketplace 直接安装Wordpress。

我表弟的Bitnami WordPress是使用阿里云ECS手动安装,过程很多特性并没有默认启用,比如 Apache MPM event 模式是没有启用的,这是因为 Prefork 模式有跟好的操作系统兼容性(来源)。

延伸内容

如果你想继续更深入了解,可以看看 Apache 的 Multi-Processing Modules (MPMs)。 以及三种 MPM 的工作模式:prefork, worker, 和 event。

这个链接在:https://httpd.apache.org/docs/2.4/mpm.html

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