Attack on Life ⚔️

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

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

Wireshark定位

网络协议分析工具

正如一开始所说，Chrome只可以看到应用层协议，比如HTTP，WebSocket，而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