Web之防XSS（跨站脚本攻击）

Web之防XSS（跨站脚本攻击）

一、概念

XSS（跨站脚本攻击） 是最常见的 Web 攻击之一。它的原理是：
攻击者把恶意的 JavaScript 脚本注入到页面中，让浏览器在用户端执行，从而窃取 cookie、伪造操作、劫持会话等。

例子：

比如你的页面有个输入框，用户输入内容后直接显示在页面上：

<p>用户留言：{{ message }}</p>

如果用户输入：

<script>alert('你被黑了')</script>

那么页面会变成：

<p>用户留言：<script>alert('你被黑了')</script></p>

浏览器就会执行恶意脚本，造成 XSS 攻击。

二、防御方法

1、输出转义（Output Encoding）

所谓 输出转义，就是在 页面渲染时，把用户输入中的特殊符号（< > " ' & 等）转成安全的 HTML 实体。

• < 转义成 &lt;
• > 转义成 &gt;
• " 转义成 &quot;
• ' 转义成 &#x27;
• & 转义成 &amp;

这样用户输入的脚本就不会被执行，而是当普通文本显示。

当输入<script>alert('你被黑了')</script>

那么会有<p>用户留言：&lt;script&gt;alert('你被黑了')&lt;/script&gt;</p>

而不会执行脚本。

​​​​​​​2、在常见框架里的实现

<p>{{ message }}</p>   <!-- 自动转义，安全 -->

<p v-html="message"></p> <!-- 不转义，有风险 -->

所以输出转义 = 在渲染到页面前，把危险字符转成 HTML 实体，避免脚本被执行。
它是防御 XSS 的最重要手段之一。