Attack on Life ⚔️

今天访问Web突然报错，原来是网站被重定向到HTTPS，而请求API服务仍然是HTTP，Chrome安全策略进行了拦截，从而报错。

为什么会突然出现重定向到HTTPS呢，经过排查，最终发现原来是Chrome下的HSTS导致。

这里围绕着这个问题排查过程总结梳理下。

307

通过network，查看请求在发起后307重定向到HTTPS。而HTTPS安全链接下发起不安全的HTTP请求，浏览器会实现拦截，报错即如此。

307是由谁发起的呢，理论上后台/浏览器都可以做到，查看response ，发现header中有这样一个字段

1

Non-Authoritative-Reason: HSTS

最近在做开源项目，因此可以脱离公司成熟的CI/CD，自己搞搞。为了降低用户部署门槛，因此决定使用Docker来构建部署镜像，解决部署效率问题。

dockerfile

这里贴下构建镜像文件，文件名称比如是build.Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

FROM node:14.17.0 as builder

ENV NODE_ENV production

RUN echo " ------------------Web打包 --------------------"

WORKDIR /management-web

COPY . /management-web

RUN npm install --registry=https://registry.npm.taobao.org
RUN npm run build

RUN echo " ------------------Web容器部署启动 --------------------"

FROM nginx:1.19.2
COPY --from=builder /management-web/build /usr/share/nginx/html
COPY deploy/nginx/conf.d /etc/nginx/conf.d
EXPOSE 80

说明

对于我当前所在team来说，TS几乎已是JS项目标配，估计其他厂也类似。原因很简单，就是类型检测可以为项目保驾护航，同时也TS类型声明本身充当了一部分文档的作用。

不知不觉，使用TS也好多年头，但是有些类型并不常用，必须承认原因就是没懂。因此，这里根据实践和学习，Mark下。

never

关于never需要有几点认识

1. never是底部类型
2. 常用于逻辑分支判断，确保新增的逻辑不会被遗忘
3. void 表示返回为空，即返回undefined，没有任何类型，never 表示永远不存在的值的类型，永不返回。

使用场景

最近生产环境监控系统报告一个前端渲染报错。于是着手分析了下，这里记录总结下

报错信息

this.service.apply(…).then(…).catch(…).finally is not a function

报错环境

• Mac OS 10.14.6 Mojave
• Chrome 92.0.4515.131 最新版
• WebKit 537.36
• ahooks v2.9.6

Web请求抓包，一般使用Chrome network进行分析，如果是HTTPS解密抓包，或者Mac下对iPhone进行抓包，我会使用Surge，但是如果我想具体查看HTTP请求/响应的原始数据，同时了解HTTP应用层之下的传输层等数据的话，那就得更专业的工具，比如说Wireshark。

最近因为分析一个下载问题，了解和使用了Wireshark，觉得Wireshark很强大，同时网上的资料太分散，这里总结下，兴许也可以帮到一些小伙伴。

Wireshark定位

网络协议分析工具

正如一开始所说，Chrome只可以看到应用层协议，比如HTTP，WebSocket，而Surge只可以抓到HTTP请求，如果想完整的学习分析网络协议，Wireshark就非常合适。