实战 | 使用 Chrome 开发者工具修改网页源码跳过前端校验

文章目录

一、问题背景

最近买了一台新路由器,但是在路由器的管理员密码设置处有强制校验:必须包含三种字母,数字,特殊字符三种类型

wifi 名设置的地方有校验:仅允许字母、数字、下划线、中划线、@、&、空格、中文或.

这给我们配置路由器带来非常不方便,因此希望寻求方法去解决这样的限制。

本文将通过一次实战,通过使用 Chrome开发者工具 解除网页的前端校验,以达到解除路由器系统中对部分功能的限制。

二、打开开发者工具

首先,我们先在需要修改功能的网页中,按 F12 打开 开发者工具,窗口切换到 源代码/来源,切换到 替换,然后点击 选择放置替换项的文件夹,选择一个用于放置修改后源码的文件夹,此时即可修改网页源码,并执行修改后的源码。

三、定位源码

首先,我们需要解除管理员的限制,可以通过搜索出现的提示语:必须包含三种字母,数字,特殊字符三种类型,找到此校验出现的地方:

可以看到,这是一个在 app5e0887cf78a6a3357739.js 文件中定义的 passwdTypeFailure 常量的文件内容。我们再搜索 passwdTypeFailure 常量使用的地方,可以找到有一处如下的代码:

js 复制代码
var n = /[A-Za-z]/.test(t)
  , a = /[0-9]/.test(t)
  , o = /[\.\@\$\!\%\*\#\_\-\~\?\&\^\`\(\)\+\=\<\>\:\"\{\}\|\]\[\,\;\/\\\' ]/.test(t)
  , r = /^[0-9a-zA-Z\.\@\$\!\%\*\#\_\-\~\?\&\^\`\(\)\+\=\<\>\:\"\{\}\|\]\[\,\;\/\\\' ]+$/.test(t)
  , c = [n, a, o].filter(function(e) {
    return e
})
  , l = !!(c.length >= e.includeType && r);
c.length < e.includeType ? e.message = e.message || I18N.t("rules.passwdTypeFailure") : e.message = r ? e.message || I18N.t("rules.passwdIllegal") : e.message || I18N.t("rules.comm_pass_format"),
s(l, e, i)

我们推测这段逻辑是会有所影响的,因此我们可以点击行号添加断点,以便验证我们的推论。

此时可以看到断电正常的停下来了,变量 t 为即为输入到新管理员密码,此时 t 分别使用 字母,0-9,以及特殊符号使用 test 方法进行搜索,

js 复制代码
n = /[A-Za-z]/.test(t)
a = /[0-9]/.test(t)
o = /[\.\@\$\!\%\*\#\_\-\~\?\&\^\`\(\)\+\=\<\>\:\"\{\}\|\]\[\,\;\/\\\' ]/.test(t)

而在 jsRegExp 实例的 test() 方法使用正则表达式在指定字符串中执行搜索。如果存在匹配,则返回 true, 否则返回 false。因此,可以清晰的知道,这段代码就是对密码中是否包括三种类型的校验。

因此,为了使其跳过校验,只需要对三个类型的判断恒为true即可,即将代码修改为如下:

此时按 ctrl + S 保存源码,此时刷新重新设置密码,则会按新源码进行运行,跳过规则校,可正常写入。


我们再来看 Wifi 名的设置。我们搜索 仅允许字母、数字、下划线、中划线、@、&、空格、中文或.,可以找到 wifi_name_rule 的常量,随后可以找到使用的地方:

同上分析可以知道,

js 复制代码
var n = /^[\d\w_\-@&\s\u4e00-\u9fa5\.]+$/g.test(t);

这一句就是对 wifi 名校验的核心代码,将其修改为

js 复制代码
var n = true

即可跳过 wifi 名的校验,存入任意字符。

四、总结

对于部分网页应用来说,很多都只是只有前端校验,而无后端校验,我们可以通过修改网页源码,解除前端校验的规则,实现一些特殊的业务操作。

相关推荐
合肥烂南瓜2 小时前
浏览器的事件循环EventLoop
前端·面试
golang学习记2 小时前
从0死磕全栈之Next.js after 函数详解:在响应完成后执行异步任务
前端
程序新视界3 小时前
MySQL中,日期、时间与时间戳三种数据类型的区别
数据库·后端·mysql
阿星AI工作室3 小时前
1分钟搞定高级感PPT演示!Obsidian+Excalidraw神级玩法,手残党亲测有效
前端
liangshanbo12153 小时前
React 19 新特性:原生支持在组件中渲染 <meta> 与 <link>
前端·javascript·react.js
小小工匠3 小时前
基于 Spring AI 的多平台多模型动态切换实战
后端
浩男孩3 小时前
🍀发现个有趣的工具可以用来随机头像🚀🚀
前端
咸菜一世3 小时前
scala中class的使用
后端