Web 前端黑魔法

收集整理过去发表的 #前端黑魔法# 话题。

在此怀念和 @zswang 交流探讨前端黑魔法的时光。

2019

HTTP 缓存更新

使用 fetch API 可更新 HTTP 缓存数据：

fetch(url, {
  cache: 'no-cache',
})

设置 cache 选项为 no-cache 时，浏览器无视本地 HTTP 缓存，强制发起请求，并将最新内容覆盖已有缓存。

详细查看：https://www.cnblogs.com/index-html/p/http-cache-hotfix.html

检测浏览器代理

由于大部分 socks5 代理只转发数据，不转发 TCP 头，因此后端返回数据时附带一个特殊的 TCP 头，然后前端验证该头是否生效，即可推断否是存在代理。

例如后端下发 tcpwin=0 的控制信息，正常情况下前端收到后不会再往外发包，数据累计在协议栈缓冲区里。该特征可通过 WebSocket.bufferAmount 属性检测；而有代理的情况下，数据被累积在了代理服务的缓冲区，前端仍能往代理服务发包，缓冲区不会有累积。

演示：https://www.etherdream.com/proxy-detect/tcpwin.html

后端实现也很简单，NodeJS 实现 ws 服务，通过 setsockopt 给 socket 设置 mark，结合 tc 改包。

SHOW ME THE CODE

// test.js
const {setsockopt} = require('sockopt')
const {WebSocketServer} = require('ws')
const wss = new WebSocketServer({port: 8080})

wss.on('connection', (ws, req) => {
  console.log(req.socket.remoteAddress + ':' + req.socket.remotePort)
  setsockopt(req.socket, 1 /* SOL_SOCKET */, 36 /* SO_MARK */, 1 /* mark */)
  ws.send('')
  setTimeout(() => ws.terminate(), 2000)
})

# reset tc rules
tc qdisc del dev eth0 root
tc qdisc replace dev eth0 root handle 1: htb

# if mark = 1 then tcp.win = 0
tc filter add dev eth0 parent 1: u32 \
  match mark 1 0xffffffff \
  action pedit munge offset 34 u16 set 0 pipe \
  csum ip and tcp

npm install ws sockopt
node test.js

HTTPS 同样支持。但不能运行在 CloudFlare 之类的服务后面，否则 TCP 特殊头就丢失了。如果网络会自动重算 checksum，那么 pipe csum ip and tcp 可省略。