Tools

• 1: Customize Icon for Plantuml
• 2: 抓包工具分析之完全攻略
• 3: SS 全军覆没，v2ray for Macos
• 4: fencview.vim + xshell + vim + 各种中文编码问题
• 5: VIM 转 VSCODE
• 6: 从Jekyll到hugo, 迁移Github Pages

1 - Customize Icon for Plantuml

说明

记录如何定制 PlantUML 中的图标

操作

在mac下操作

• 处理图片
• 编码生成 Sprite
• 定义宏函数

处理图片

如果是png图片，则进行大小的裁剪，一般是48 * 48 px，如果非 png 图片，下面命令也会重新生成 48 像素的正方形图片。

qlmanage -t -s 48 -o . logo.svg 

qlmanage 命令为 MAC 系统自带的

对 PNG 的图片编码

java -jar ~/Downloads/plantuml.jar -encodesprite 16z logo.svg.png

生成的代码如下;

sprite $logo [48x48/16z] {
pPLNWWCX34F7zTt_n5imtbHcbhyedGYGXR6FJuRw6-YIdhn5hkdXBuZL12VbtRWa_cuO5aeLv9sQE1O8ycAHwwrRv2gqyv6hrGJiZ6yWfn6Tko6BO1UCbPSh
1GR79S1Ulvw7_E2bTVQwktHo3s94Q7jwEpqA9b1_L2Oh0txBW21gbjiF1Y5gV-9tE5LpK9EuEQMrI_5oxkVJ5WLhfXEJfYBZDr3JiBAYZpz-PMMjwr34W40E
SD0Pc_P7JlwWPMOCbOuPQT0nUclErdCxOd354tLeqtDyb9uPB-tkj3H7g9MNmhqpGPQT-eEIIht5O4hPMHBwl9H2hHZatD4eo3olpWUD0JyiueSLUaXbWNg4
PHdZ_yqt2QdGz_9vyxxitiVD-xvVJ_RhrNuztA-t-_Lylr_izwFzVhVkfxBPhpyPtm
}

定义宏函数

定义宏函数，加入资源文件里，通过 !inlcude 的方式引入资源文件。这里是为了其他地方更方便的引用。

!define EMQX(_alias, e_label) rectangle "<color:black><$emqx></color>\r e_label" as _alias <<EMQX>>

最后

…记录下来而已

2 - 抓包工具分析之完全攻略

背景

抓包分析是调式前后端协议的杀手锏，用好工具节省大量的时间去写代码优化代码。

名词解释

HTTP Strict transport security(HSTS)
HTTP严格传输安全
HSTS禁止浏览器使用无效证书。

Certificate Transparency
为了解决CA存在的问题（故意或者恶意签发证书等），目的是提供一种开发的审计和监控系统，可以让任何域名所有者或者CA确定证书是否被错误签发或者被恶意使用，从而提供HTTPS网站的安全性。
how ct works

HTTP Public Key Pinning
用来防范由「伪造或不正当的手段获得网站证书」造成中间人攻击。
工作原理： 通过响应头或者标签告诉浏览器当前网站的证书指纹，以及过期时间等其他信息.
Google已经针对不验证服务器证书的APP给出了警告，这些APP将来会有被Play store拒之门外的危险,参考

Chrome 69 版本开始移除对HPKP的支持

OCSP Stapling
OCSP(Online Certifacte Status Protocol, 在线证书状态协议)是用来检验证书合法性的在线查询服务。
TLS握手阶段，实时查询OCSP接口，并在获得结果前阻塞后续流程。但导致建立TLS连接时间变得更长。 而 OCSP Stapling, 是服务器主动获取OCSP查询结果并随着证书一起发给客户端，从而让客服端跳过自己去验证的过程，提高TLS握手效率

工具

有fiddler, charles, wiresharks,

fiddler

使用中间人（man-in-middle）的方式来实现的。

• 本地化的工具，是一个使用本地127.0.0.1:8888 的HTTP代理。 ~任何能够设置HTTP代理为127.0.0.1:8888的浏览器和应用程序都可以使用Fiddler~

为什么不能代理所有的HTTP请求

因为在操作系统层面，没有“HTTP request”这一概念，只有TCP连接。
Contacting a HTTP proxy means changing the HTTP request slightly as well as contacting the proxy server instead of the host named in the URL.
所以这个逻辑是写在发送HTTP requests的软件代码里。
curl和wget有他们自己的实现HTTP Request的代码，并使用了自己的配置文件（-x选项）。两者都没有实现基于配置的逻辑，也没有使用Mac OS 系统提供的HTTP Libraries(这个库使用了代理设置）

charles

原理类似fiddler，但是mac上使用的简单的工具.

mitmproxy

原理是中间人的方式来实现, 再加个proxy, 中间人代理软件，可以用来拦截、修改、保存HTTP/HTTPS请求。

An interactive console program than allows traffic flows to be intercepted, inspected, modified and replayed. 优点是可自定制化开发，命令行模式，适合code geek和键盘控

• Regurlar
• Transparent
• Reverse Proxy
• Upstream Proxy
• SOCKS Proxy

透明代理

重定向机制，可以将目的地为Internet上的服务器的TCP连接透明地重新路由到侦听代理服务器上。这通常采用与代理服务器相同的主机上的防火墙形式。比如Linux下的iptables\或者OSX中的pf。具体如何操作见参考中的"Mac 上使用mitmproxy对ios app进行抓包”

安装和使用

MitmProxy 使用教程 for MAC
更关心Transparent Proxying使用

Transparent Proxying 在Mac上实践

参考官方文档，对mac下进行全局抓包的尝试。如下：

• Enable IP forwarding.

sudo sysctl -w net.inet.ip.forwarding=1

• Place the following two lines in /etc/pf.conf.

rdr pass on en0 inet proto tcp to any port {80, 443} -> 127.0.0.1 port 8080

This rule tells pf to redirect all traffic destined for port 80 or 443 to the local mitmproxy instance running on port 8080. You should replace en0 with the interface on which your test device will appear.

rdr rules in pf.conf above apply only to inbound traffic. They will NOT redirect traffic coming from the box running pf itself.

• Configure pf with the rules.

sudo pfctl -f pf.conf

Mac系统默认使用/etc/pf.conf， 调式完之后需要重置

• And now enable it.

sudo pfctl -e

• Fire up mitmproxy.

You probably want a command like this:

mitmproxy --mode transparent  --showhost

The --mode transparent option turns on transparent mode, and the --showhost argument tells mitmproxy to use the value of the Host header for URL display.

• Finally, configure your test device.

Set the test device up to use the host on which mitmproxy is running as the default gateway and install the mitmproxy certificate authority on the test device

到此, 可以抓包en0显卡上的流量, 但是抓包不了Mac本地上的流量。
但是这并没有解决抓包APP里HTTPS的流量问题，因为出现如下错误：
“ warn: 192.168.2.3:56243: Client Handshake failed. The client may not trust the proxy’s certificate for e.crashlytics.com. "
解决办法见： “破解SSL Pinning”

另外上述方法也没有办法抓包本机电脑上的流量； 需要进一步设置： Work-around to redirect traffic originating from the machine itself

• pf解决Mac自身流量抓包

##The ports to redirect to proxy
redir_ports = "{http, https}"

##The address the transparent proxy is listening on
tproxy = "127.0.0.1 port 8080"
##The user the transparent proxy is running as
tproxy_user = "nobody"

##The users whose connection must be redirected.
##
##This cannot involve the user which runs the
##transparent proxy as that would cause an infinite loop.
##

rdr pass proto tcp from any to any port $redir_ports -> $tproxy
pass out route-to (lo0 127.0.0.1) proto tcp from any to any port $redir_ports user { != $tproxy_user }

转发处理nobody之外的所有用户的流量到mitmproxy上。 为了避免循环，所以以nobody用户身份来启动mitmproxy。

sudo -u nobody mitmproxy --mode transparent --showhost

** 发现有些流量不见了 ** 排查发现因为wifi下启用了socks代理，导致一些流量不见了, 转发到shadowsocks socks5代理去了。

使用socks5的方式抓包所有的流量

Tracing All Network Machine Traffic Using MITMProxy for Mac OSX
跟regular proxy一样，需要client/应用支持或者更改。比如chrome更改网络方式为代理模式。比如不能对Curl的请求抓包不了
同理，socks5也存在透明代理，不过实现的方式不一样, 比如tsocks

tsocks provides transparent network access through a SOCKS version 4 or 5 proxy (usually on a firewall). tsocks intercepts the calls applications make to establish TCP connections and transparently proxies them as necessary.

破解https的SSL Pinning TODO

APP上破解https的SSL Pinning

wireshark

抓取网卡上的所有TCP、UDP的数据

HTTPS的解密

• 通过私钥来解密, 咨询过运维，这种私钥是没办法提供的。 参考这边文档： How to Decrypt SSL and TLS Traffic Using Wireshark
• 适合浏览器通过设置环境变量截取浏览器的pre_master_secret,进而实现解密HTTPS的目的。 wireshark两种解密https方式
• 也只适合浏览器，其他客户端发送出的请求无法解密 通过mitmproxy来获取SSLKEYLOGFILE， 参考 Wireshark and SSL/TLS Master Secrets

This mechanism (SSLKEYLOGFILE) currently(2019) does not work for Safari, Microsoft Edge, and others since their TLS libraries (Microsoft SChannel / Apple SecureTransport) do not suppport this mechanism.
This mechanism works for applications other than web browser as will but it dependent on the TLS Libraries used by application. Examples of applications:

• Applicaitons using OPENSSL conld use GDB or a LB_PRELOAD trick to extract the secrets .
• For Java programs
• Python scripts can be edited to dump keys as well

参考

在Trello上记录所有待办事项。
常用的HTTP抓包工具Fiddler之使用技巧
三种解密HTTPS流量的方法
杀手锏：如果让不支持代理的软件，通过代理进行联网
如何使用透明代理抓HTTPS
Mac 上使用mitmproxy对ios app进行抓包 比较详细的操作
怎么让charles能代理所有的http(s)的请求呢？
HTTP Public Key Pinning 介绍
app 抓包利器.pdf

3 - SS 全军覆没，v2ray for Macos

简介

大国国庆，机会所有的ss挂了，查个个资料什么的确实不方便，一度使用了bing.com的“网页快照”来查看被墙的资料。
国庆期间，陪完家人，开始搬砖。
ss不能使用后，发现手机上v2ray 连上wifi时，是可以正常使用的（之前配置过服务器）.
这次配置电脑上的v2ray client, 之前安装过v2rayx, 但是使用时出现无法连接的问题，加上UI版的配置无心使用, 这次把命令行的方式献上

安装v2ray

brew tap qiwihui/v2ray   
brew install v2ray-core  

没有被强

配置v2ray

参考 config.json
修改inbound.port，outbound里的address和port，users中的id和security

vim /usr/local/etc/v2ray.config.json 

启动v2ray + SwitchyOmega

ss 也有用到SwtichyOmega，这次只需要启动v2ray

v2ray -config=/usr/local/etc/v2ray.config.json

开机启动的方式（亲测失败）

brew services start v2ray-core 

问题汇总

Network is Unavailable

A: 真的重启了就好了。 服务真的不稳定，一年挂机好多次。不过现在速度真的是快。

4 - fencview.vim + xshell + vim + 各种中文编码问题

c++ 老代码都不是utf-8编码，估计是gb2312或gbk编码，而javascript是utf-8编码
咋办？
vim中只设置过
“set encoding=gb2312 termencoding=utf-8 “fileencoding=gbk

不同编码文件，怎么通过一个设置来搞定呢？ 疑惑！！！
以前碰到不同文件后缀名能用不同的高亮，不同的格式化。
按此逻辑。。。
不同的文件编码可以用不同的配置咯。

google 就如上帝！！！

发现了 http://edyfox.codecarver.org/html/vim_fileencodings_detection.html
最后提到了统一解决办法 fencview.vim

杜绝眼高手低：搞起

一个小时…
两个小时…
搞定

1. 下载插件：fencview
2. 配置.vimrc

set encoding=utf-8
set termencoding=utf-8 "fileencoding=utf-8
set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936
let g:fencview_autodetect=1
"let g:fencview_auto_patterns='*'

最后一行注释掉： 因为不注释javascript 文件不高亮。

5 - VIM 转 VSCODE

VIM 适合折腾 VS Code 适合高效率业务开发 开始学习 VS Code 的快捷键

2021-10-24 继续使用，发现各种好特性，比如在一行中删除光标后所有字符到有括号")"，这些技巧提升了效率。以防忘记，统一在这里记录，便于翻阅。

常用的编辑快捷键

Editing

To delete forward up to character ‘X’ type dtX

To delete forward through character ‘X’ type dfX

To delete backward up to character ‘X’ type dTX

To delete backward through character ‘X’ type dFX

Aligning text with Tabular.vim :tab \/

Navigation

历史

vim-go 为什么错误这么让人不知所措，比如：

gorename: can't find package containing

gometalinter: unkown linters: govet, typecheck, unsed, gosimple

--enable-all/--disable-all can not be combined

quickfix 没有显示出来，并且仅仅提示 GoMetaLinter Failed

解决办法有很多种，而在不断尝试过程中解决问题：

• 对 vim-go 配置详细了解，比如g:go_metalinter_enabled和g:go_metalinter_autosave_enabled
• 更换最新的版本，比如 vim-go 和 golangci-lint 的最新稳定版本，比如 gorename 最新版本并不支持 go modules 项目

不深入了解 vim-go 的原理，用不来 vim-go， 期望：某天能跟 vscode golang 插件一样好用。 不过，在使用 vim-go 的过程中，对静态代码检查工具有了更多了解，比如有对 golang 代码的安全检查：gosec。

Updated At Thu Jul 18 13:34:37 2019

参考

[1] vimcasts.org Learn Essential Vim Skills

[2] Casperfeng’s Github: mastering-vim, Tring to become a proficient vim user.

6 - 从Jekyll到hugo, 迁移Github Pages

背景

原因:

• 观察到一些技术blog把评论和github issue同步了(gitalk)，这个很赞。
• 后来想到还有一个原因：原来的主题真不好看（跟写blog关系不大呀)，强迫症犯了。

于是想在jekyll搭建的blog下增加这种评论，按照教程操作。理应是一两个小时的事情，而因为GWF和Mac下Ruby环境的折腾一个大晚上。
一觉后，不应浪费时间在这些网络问题上，blog主要是思考、怎么写、怎么表达。
于是选择hugo来迁移Blog。

实践

完全参考 使用 Hugo + GitHub Pages 搭建个人博客
连风格也完全一(lan)样(ren)。。。
一天搭建完

后续

hugo有很多有趣的功能，比如shortcode, 前段时间一直想通过shortcode让blog支持流程图和思维导图
好处

• 现有的工具(xmind, 百度脑图等)生成，然后导出图片, 若更新图中内容时会比较麻烦.
  目前想到简单的办法是将xmind的源文件和图片同名保存, 更新图片内容，更新源文件的同时，导出同名的图片并覆盖.

坏处

• 如果后续迁移到其他Blog架构，会出现因为不支持shortcode显示导致页面显示流程的代码。

结论：能不用shortcode的情况，换其他表达方式。