实战 | 使用 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 名的校验,存入任意字符。

四、总结

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

相关推荐
追逐时光者10 分钟前
一个开源免费、轻量级的 Avalonia UI 控件库
后端·.net
学习笔记10115 分钟前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194317 分钟前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
间彧25 分钟前
Java守护线程详解
后端
间彧35 分钟前
Java Thread类源码详解与项目实战
后端
间彧36 分钟前
🔍 Java Thread类全面解析与实战指南
后端
间彧38 分钟前
Thread类的静态方法和实例方法详解、区别、应用场景、项目实战
后端
曹牧1 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台1 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1001 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio