xss.haozi.me

0x03 审查源码我们发现,括号, 方括号都被过滤了

这段代码是一个简单的 JavaScript 函数,名为 `render`。它接受一个字符串 `input` 作为参数,并返回一个新的字符串,其中所有圆括号 `(` 和 `)` 都被移除了。

函数内部定义了一个正则表达式 `stripBracketsRe`,它匹配所有的圆括号字符。然后使用 `String.prototype.replace` 方法和这个正则表达式来替换字符串中的所有圆括号为空字符串(即删除它们)。最后,函数返回处理后的字符串。

例如,如果你调用 `render("Hello (world)!")`,它将返回 `Hello world!`。

0x06

函数的工作流程如下:

  1. 使用 String.prototype.replace 方法和正则表达式 /auto|on.*=|>/ig 来替换 input 字符串中的特定内容。这个正则表达式匹配以下内容:

    • auto:字面意义上的 "auto" 字符串。
    • on.*=:以 "on" 开头,后面跟着任何字符(. 表示任何字符,* 表示前面的字符可以出现零次或多次),直到遇到等号 "=" 的字符串。
    • >:字面意义上的大于号 ">"。

    i 修饰符表示不区分大小写,g 修饰符表示全局匹配,即匹配字符串中的所有可能实例。

  2. 所有匹配到的字符串都会被替换为下划线 _

  3. 函数返回一个新的字符串,该字符串是一个 <input> 元素,其 value 属性被设置为 1,并且 input 字符串被插入到 <input> 元素的属性中。

分析regex表达式:

/auto|on.*=|>/ig

它匹配了: auto 、以on开头且以=结尾的字符串、 >

所以过滤了autofocus和onerror等事件, 以及防止input标签被闭合

但是它并没有匹配换行符, 可以通过换行来绕过匹配

type="image" src="" onerror

=alert(1)

0x07

这题也是正则表达式, 将匹配到的替换为空:

分析正则表达式:

/<\/?[^>]+>/gi

这里分为三部分来分析: /<\/?[^>]+>/gi

<\/?

\转义符与/结合, 从而转义了/, 进而含义是匹配: </

再加上+ (匹配前面的子表达式一次或多次), 所以是匹配: < 或者 </

\^\>\]+ 首先要明白, 中括号的用法: \[abc\] =\> 匹配abc中的任意一个; 然后\^符号的两种用法: 1. 限定开头: 比如, /\^A/会匹配"An e"中的A,但是不会匹配"ab A"中的A 2. 取反(仅处于中括号中成立): 比如,\[\^a-zA-Z0-9\]表示 "找到一个非字母也非数字的字符"。 最后是+的含义:匹配前面的子表达式一次或多次。 所以,总的来说,\[\^\>\]+ 匹配了除了^的任意字符的一次或者多次 \> 单纯匹配>。 总的表达式就是,匹配: \, 而且 /i 过滤了大小写 匹配了尖括号\<\>开头结尾的字符串替换为空.可以通过少输入一个\>来绕过正则,但仍然可以执行. 函数的工作流程如下: 1. 定义了一个名为 `stripTagsRe` 的正则表达式,用于匹配 HTML 标签。这个正则表达式可以匹配: * 开始标签 `<` 后面跟着任意不是 `>` 的字符,直到 `>` 的序列。 * 结束标签 `` 的字符,直到 `>` 的序列。 `<` 和 `>` 是 HTML 标签的定界符,而 `gi` 修饰符中的 `g` 表示全局匹配(即匹配整个输入字符串中的所有标签),`i` 表示不区分大小写。 2. 使用 `String.prototype.replace` 方法和 `stripTagsRe` 正则表达式来替换 `input` 字符串中的所有 HTML 标签为空字符串(即删除它们)。 3. 函数返回一个新的字符串,该字符串是一个 `

` 元素,其内容是处理后的 `input` 字符串。

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试