用 DevTools Source Overrides 绕过前端文件类型校验

bytemanx
0 阅读3分钟

最近提交论文的时候遇到一个烦人的问题：学校的论文提交系统只允许上传 .docx 格式。

b932a5813cad18095d06f3da02d14321.jpg

但我知道有些学院是允许提交 PDF 的，所以我猜这个文件类型校验大概率只做在了前端。

验证这个猜测很简单，打开 DevTools 的 Sources 面板看一下就知道了。

定位校验逻辑

打开 DevTools 的 Sources 面板：

image.png

怎么找到校验代码的位置？两个思路：

  1. 事件监听断点：在 Sources 面板右侧的 Event Listener Breakpoints 里勾选 change 事件，触发文件选择后代码会自动断住，然后顺着调用栈往下找
  2. 全局搜索关键词：Ctrl + Shift + F 搜索 .docx、accept、file type 之类的关键词，直接定位到校验代码

两种方式都能找到判断文件类型的那段逻辑。

用 Local Overrides 替换 JS 文件

找到校验逻辑之后，接下来要做的就是修改它。直接在 Sources 面板里编辑是临时的，刷新就没了。这时候就要用到 Chrome DevTools 的 Local Overrides 功能。

Local Overrides 的原理很简单：把网页加载的某个文件映射到本地文件系统，浏览器加载页面时会优先使用本地的版本，而不是服务器返回的。

操作步骤：

  1. 在 Sources 面板中，找到包含校验逻辑的 JS 文件
  2. 右键点击文件，选择 Save for overrides 或者在 Sources 面板左侧切换到 Overrides tab，选择一个本地文件夹作为存储目录
  3. 修改校验逻辑——比如在判断之前把校验标志位设为 true，或者直接把允许的文件类型改成 .pdf
  4. Ctrl + S 保存

ad938a2b89f7575ad8cb43e633a1616c.png

保存之后刷新页面，文件上传组件的提示就变成了"仅支持 PDF"，说明本地修改的 JS 已经生效了。

验证结果

选择一个 PDF 文件上传，成功了。

00b1389fff8836dd4057b2437573973a.png

后端确实支持 PDF，只是前端加了一层类型校验把 PDF 挡在了外面。

Local Overrides 还能干什么

这次用 Overrides 绕过文件校验只是一个场景。日常开发中这个功能用处不少：

  • 调试线上问题：线上页面出了 bug，直接改本地 JS 加日志、改逻辑，不用等发版
  • 测试接口返回：拦截某个请求的响应，改成你想要的数据结构，测试前端的异常处理
  • 绕过各种前端限制：复制限制、右键菜单禁用、输入框长度限制之类的，都可以通过修改对应的 JS 来解除
  • 样式调试：CSS 文件也可以 override，调好了直接复制回项目里

注意事项

有几点需要注意：

  1. Overrides 只在当前浏览器生效，换个浏览器或者清除 DevTools 设置就没了
  2. 网站更新后可能失效，因为 JS 文件名带 hash，文件一变 override 就对不上了
  3. 只能绕过前端校验，如果后端也做了校验，改前端没用。这次能成功是因为后端本身就支持 PDF
avatar
文章
阅读
粉丝