文章

前端安全

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>注入恶意代码。

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

  1. 尽量避免直接使用v-html、innerHTML和outerHTML，特别是要避免将用户的输入直接渲染，最好是使用vue的模板语法或v-text，如果要使用v-html，必须要确保内容的来源是可信。

  2. 对特殊字符进行转义，例如<、>等。

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

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

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

反射型

攻击者将恶意代码注入到web服务器中，服务器将这段恶意代码返回给浏览器，由于浏览器相信服务器是“可信任的”，因此会执行脚本。

我们常常利用URL实现页面传参或者是get方法的HTTP请求，而攻击者很容易利用浏览器的地址栏来实现入侵。

const h1 = document.querySelector("#h1");
const param = decodeURIComponent(
    window.location.search.substring(1).split("=")[1]
);
const scr = document.createElement("script");
scr.src = \`http://example.com?param=${param}&callback=fn\`;
document.body.appendChild(scr);
function fn(data) {
    h1.innerHTML = data;
}

以上代码通过URL来进行页面传参，先获取URL中的参数，并将其传给后端，利用JSONP来实现跨域，即通过script标签来加载后端数据，后端将参数处理后传回。

// 后端传回
fn("<p style='color: red'>" + param + "</p>")

打开浏览器在后面加上参数

?param=你好

但是如果攻击者传入HTML代码，前端和后端都不做检查处理的话就会直接被入侵。

// 地址栏加上参数
?tag=</p> <i>入侵</i><p>
// 甚至可以加入script标签注入恶意代码
</p> <script src="恶意代码网址"></script> <p>
// 这时HTML变为了
<h1 id="h1">
    <p style="color: red"></p> 
    <script src="恶意代码网址"></script>
<p></p></h1>

通过<p>和<p>来闭合原本的标签，然后注入恶意代码。

防御反射型XSS攻击的方式和防止DOM型类似，可以通过验证参数格式，避免使用innerHTML和v-html和对关键字符转义等方式防御此类攻击。

存储型

存储型是危害最大的一种XSS攻击方式，攻击者将恶意代码发送给服务器，并长久地保存在服务器中，当浏览器请求此数据时就会被攻击。一旦攻击者成功将恶意代码注入到服务器中，那么任何加载这段恶意代码的用户都会受到攻击。

试想一下，在一个说说社区，一个用户将恶意代码作为说说发布，如果前端和后端都没做任何防御措施，后端会将其当做普通说说存储到数据库中，而所有用户一旦打开说说社区加载到了这条说说，那么就有可能被入侵。

存储型和反射型类似，但是不同的是存储型XSS攻击会将恶意代码存入到数据库中，实现长久攻击，因此存储型XSS攻击也被称为长期型XSS攻击。

防御的手段有

  1. 进行数据验证，避免输入非法字符，严格规定输入数据的格式，从根本上阻止恶意代码被注入到数据库中，后端也应该做此限制，因为攻击者可能会绕开前端直接发送http请求。
  2. 转义特殊字符，原理同上。

总结

XSS攻击本质上是通过注入非法的HTML代码来实现入侵，因此只要针对它的攻击特点做出针对性的防御措施，就能抵御攻击。

总结针对XSS攻击最有效的防御手段有

  • 尽量避免直接使用v-html、innerHTML和outerHTML，特别是要避免将用户的输入直接渲染，最好是使用vue的模板语法或v-text，如果要使用v-html，必须要确保内容的来源是可信。
  • 对用户输入的表单格式进行验证，严格限制用户输入的格式，比如注册时手机号必需要是11位的纯数字。不仅前端需要验证，后端也需要验证。
  • 对特殊字符转义

常用的转义字符

  • < &lt
  • > &gt
  • " &quot
  • ’ &#39
  • & &amp;
  • / &#x2F

除此之外还有

  1. 使用在响应头Set-Cookie加上httpOnly,这样可以避免js访问此cookie，这并不能阻止XSS，但是可以减少损失。

CSRF跨站点请求伪造攻击

跨站脚本攻击就是当受害者登录网站后，攻击者引导受害者进入第三方网站，在第三方网站发送跨站请求，利用受害者在被攻击网站中已经获取的注册凭证等信息，绕过后端验证。

在跨站点伪造请求攻击中，攻击者无法直接获取cookie等信息，只能使用。

用户首先登陆一个网站，登录成功后会保存该域名下的cookie，这里面就有登录凭证等信息，此后攻击者引用用户进入恶意网站，恶意网站会自动发送伪造请求，而cookie会被自动携带上，由于用户之前已经登录了该网站，并且有该网站包含登录凭证的cookie，因此网站很可能会认为这是用户自己发送的一个请求，从而被攻击。

为了方便理解做个例子，首先我们登录baidu.com网站，此时我们就收到了服务器传来的cookie，假设里面有登录凭证。

然后我们写个恶意网站，这个网站只有一个img标签，打开这个网站

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
 </head>
 <body>
  <img src="https://www.baidu.com" />
 </body>
</html>

image-20211224133102478

cookie被自动携带了，即使恶意网站不是baidu.com域名，但是发送请求的Host是baidu.com，那么baidu.com域名下的cookie也会被自动携带上，因为浏览器是允许发送第三方cookie的。

假如这是段恶意代码，比如是删除用户账号的请求，并且网站没有做防护措施，那么用户就很可能被攻击成功。

防御：

  • 使用token，即将token一同发送给后端，后端验证token，由于攻击者无法获取到token，也无法伪造、借用token，因此无法伪造用户请求，所以达到了防御的目的。而token可以存入sessionStorage、localStorage或内存中，这样不容易泄露。
  • SameSite。SameSite 是HTTP响应头 [Set-Cookie 的属性之一。它允许声明该Cookie是否仅限于第一方或者同一站点上下文。以前 None 是默认值，但最近的浏览器版本将 Lax 作为默认值，以便对某些类型的跨站请求伪造 （CSRF） 攻击具有相当强的防御能力。
  • 同源策略，验证请求发起的源，这个在 Origin 和 Referer头可以看到

SameSite 接受下面三个值：

  • LaxCookies允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送。这是浏览器中的默认值。
  • StrictCookies只会在第一方上下文中发送，即禁止跨域发送。
  • NoneCookie将在所有上下文中发送，即允许跨域发送。

在HTTP协议中，每一个异步请求都会携带两个Header，用于标记来源域名：

  • Origin Header
  • Referer Header

这两个Header在浏览器发起请求时，大多数情况会自动带上，并且不能由前端自定义内容。 服务器可以通过解析这两个Header中的域名，确定请求的来源域。但是注意这种方式并不完全可靠，因为攻击者可以绕开前端直接攻击，因此只能作为辅助手段。

参考

《白帽子讲Web安全(纪念版)》