记一次修改浏览器端js脚本的实践

在我的记忆中，很多朋友和我说，浏览器端的js校验对于开发人员是无效的。

今天正好有一个实践，我公司OA系统的某个流程有一个js校验弹窗，这个弹框的逻辑不正确，我要让我的同事把他修改正确，而此时我突然想起了上面这句话，冒出要尝试一把的冲动，看看绕过前台js校验到底是个什么样的操作难度。

1、首先我使用浏览器自带的开发人员工具，找到了这个页面的链接。

2、通过元素选择工具，定位到这个按钮的触发的方法。

3、我很开心，觉得在元素界面把js改掉立刻就可以达成我想要的结果，现实是在这个界面的元素显示界面中不存在单击事件对应的方法定义，我一头雾水，看来是靠这个方法不能达到效果呀。

4、接着我切换到sources标签尝试debug的方式，发现我要的内容（单击事件对应的方法的定义）竟然在一个iframe里面，而且还是用jq在文档加载后动态绑定的方法，断点后，依然debug不到，也无法通过watch去修改相应变量的值，虽然陷入困境，但我相信还有其他的办法，只是我不会而已。

5、然后我通过google，找到开发工具中有一个叫local orverrides的功能，意思是说，可以把页面保存到本地，用本地的文件代替远程文件进行渲染，我惊呆了，还有这种事，那岂不是想做什么就做什么了吗？现实很骨感，我对这个功能做了一些测试，确实可以修改一些js css 以及xhr，甚至是documents都可以修改，但是我不知道为什么，我要修改的这个页面是不生效的！我把本地对应文件清空，远程依然生效，我想可能是和iframe有关系吧，这未经证实。因此我得出结论，如果是单纯的页面没有iframe的情况下，经过上面几步应该大部分情况下可以修改成功。但是它没有解决今天我的问题。

6、经过分析，因为这些js是直接返回在documents的源文件之中的，因此我想可否采用中间人欺骗直接修改返回的documents的源文件，最终通过中间搭建的代理，成功的在代理中把对应文档的源代码修改，禁用掉或者修改了某段js。

在此简单记录，至于如何使用中间代理来修改，因为这项技术可能会被别有用心之人非法利用，因此请自行搜索，这里不便传播。