跨站脚本攻击(XSS)

XSS跨站脚本攻击

跨站脚本攻击通常是通过非法注入HTML代码或JavaScript代码来操控用户浏览器的。

跨站脚本攻击主要分三种

DOM型：DOM可以通过操作JavaScript脚本动态的改变文档结构、样式和行为，它不需要服务器的参与，是属于前端的安全漏洞。
反射性（又称非持久性）：攻击者将恶意代码注入到URL中，然后提交到服务器，服务器解析后将这段恶意代码返回给浏览器，然后浏览器解析。
存储性（持久性）：攻击者将恶意代码发送给服务器，服务器保存到数据库中，当浏览器请求此数据时就会被攻击。

我们讨论一下上面三种类型的XSS攻击场景。

DOM型。

DOM型是纯粹的前端漏洞，一定不能将用户输入的内容直接通过v-html、outnerHTML或innerHTML渲染，否则很容易受到DOM型XSS攻击。

请看下面这种代码：

<body><h1 id="h1"></h1><input id="input" type="text" /></body><script>const input=document.querySelector("#input");
const h1=document.querySelector("#h1");

input.addEventListener("keydown", (e)=> {
        if (e.code==="Enter") {
            console.log(e.target); h1.innerHTML=e.target.value;
        }
    });
</script>

入侵者可以很容易通过输入框入侵，通过<script>注入恶意代码。

处理这类攻击一般可以从这几个方面入手：

尽量避免直接使用v-html、innerHTML和outerHTML，特别是要避免将用户的输入直接渲染，最好是使用vue的模板语法或v-text，如果要使用v-html，必须要确保内容的来源是可信。
对特殊字符进行转义，例如<、>等。

我们采用转义的方法看一下效果

// lt和gt为了避免被转义加上了\\，实际代码不用加\\h1.innerHTML = e.target.value                    .replace(/\\</g, "\\&\\l\\t")                    .replace(/\\>/g, "\\&\\g\\t");

能够成功防御DOM型XSS攻击。