今天访问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只可以看到应用层协议,比如HTTPWebSocket,而Surge只可以抓到HTTP请求,如果想完整的学习分析网络协议,Wireshark就非常合适。

阅读全文 »

最近在跟后端对接压缩包下载遇到了下载OK,解压报错inappropriate file type or format,尝试使用postman却可以正常下载解压,所以很是奇怪。毕竟postman可以,后端不改的基础上前端一定是有解的,于是继续摸索,最终因为进度所赶,改用base64编码传输,解决了这个问题,但没有根本搞清root cause。

借着周末,研究输出下。

报错

报错如上

代码

阅读全文 »

最近team收到通知,安全团队扫描WEB是遇到有人提交了.DS_Store文件到公司CDN,于是告之告知大家注意这个文件,不要提交。

那问题来了,为什么这个文件会影响安全,我们又如何最大程度规避这个呢,这里总结下。

.DS_Store

先了解下该文件 .DS_Store是Mac系统中产生的一个隐藏文件,记录文件或目录的一些自定义属性

比如,这里我创建一个空文件夹,创建一个文件,然后命令行浏览会看到.DS_Store

阅读全文 »

Surge Module之前一直忽视,我也安装过一些别人贡献的module,但没有仔细对比体会作用。最近看了些资料,经过实践,觉得有些场景下非常适合使用,顿时觉得真香。

module介绍

关于module先介绍几点,方便了解。

  1. 用官方的话说module即给当前profile打patch补丁,因此可以是配置的一部分
    • 有限支持Rule,MitM等,具体看这里
  2. Module的配置优先级高于当前Profile,且多个Module按照顺序执行,即后覆盖前
  3. Module开启状态并不进行设备间同步,当然配置本身是会同步
  4. profile现在支持include profile片段了,比如可以将rule部分单独一个文件,然后在主profile包含即可。但要了解profile片段必须是完整的部分,不存在主profile/profile子文件都有rule的情况。这点与module还是不同

Module修改

阅读全文 »

开发时,有时会遇到 ESLint: Component definition is missing display name (react/display-name),这个原因是什么及如何处理呢,这里讨论下。

react/display-name

组件添加display-name唯一的好处是服务于调试,如下图,在react拓展程序调试时会方便我们找到对应的组件,从而再找到文件。

但日常开发,很多时候我们没有明确写display-name,那这些名字如何来的,因为react会帮我们赋值,一般组件创建有两种方式

  1. 函数,函数名称即display-name
  2. 类,类名称即display-name
阅读全文 »

由于历史原因,项目代码中还有一些函数使用arguments,而同时公司定下的lintRule对于arguments只是warning,因此有些还是没人去修改。

那么arguments还有必要存在吗,这里总结下

arguments vs rest parameters

  • arguments是类数组,但并不是数组,因此没有map,filter等方法,而rest parameters是数组
  • arguments的迭代器方法IE下不支持
  • arguments是es3时的规范,而rest parameters是es6
  • rest parameters可以用于获取函数所有参数,可以完全提到arguments

综上,可以确定我们完全可以使用rest parameters来解决参数获取

prefer-rest-params

阅读全文 »
0%