• 一、XSS的防御 - 输出检查
  • 1.1 什么是输出检查
  • 1.2 5种场景的对应特性
• 二、XSS的防御 - 输出检查demo
  • 2.1 未检查前，XSS 攻击成功
  • 2.2 检查后，XSS 攻击失败
  • 2.3 注意事项

• 其他相关链接：XSS-总结

一、XSS的防御 - 输出检查

1.1 什么是输出检查

• 输出检查就是最后一道防线，根据不同的场景对数据进行处理！！（可看下图：5种场景的展示）

1.2 5种场景的对应特性

• 我们有没有想过，为什么会发起 XSS 攻击？
  • 事实上，由于我们把我们用户的输入当作代码来运行，从而导致一些意料之外的结果。

• 先看下图

• HTML执行环境
• 如果输出到 HTML 标签中、HTML 属性中，那么事实上，输出的环境是 HTML执行环境。
• 为了避免用户输入被当作 HTML 代码去执行，因此在输出之前，需要做一些工作 HtmlEncode()。
  • 即：将 HTML 中的一些特殊的字符进行转义，变成普通的文本。

• js解析环境
• 如果输出到 script 标签中、事件属性中，那么事实上，输出的环境是 js解析环境。
• 为了避免用户输入被当作 js 代码去执行，因此在输出之前，需要做一些工作 JavascriptEncode()。
  • 我们通常通过 斜杠 转义。

• URL解析环境
• 如果输出到 href 、src中，那么事实上，输出的环境是 URL解析环境。
• 为了避免用户输入被当作 URL 去执行，因此在输出之前，需要做一些工作 URLEncode()。
  • 即：把URL中一些特殊的字符进行转义，避免出现攻击的现象。

二、XSS的防御 - 输出检查demo

2.1 未检查前，XSS 攻击成功

• 点击打开demo;

• 过程

;

2.2 检查后，XSS 攻击失败

• 点击打开demo;

• 最终结果：所有弹窗都无效了！！！

2.3 注意事项

• 在做这个demo 的时候，发现将 <script> 标签直接赋值给某元素的 innerHTML，一点效果都没有。
• 原因可参考：javascript - 为什么直接把script标签赋值给innerHTML不起作用