前端安全问题场景

Daisy_D
198 阅读2分钟

「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」。

XSS攻击

xss攻击（全称cross-site scripting）跨站脚本攻击，是指在浏览器中插入一段恶意的脚本，从而窃取信息或者模仿你本人进行操作。

xss攻击分为三种类型：反射型xss、基于dom的xss及持久型xss。

反射型xss

反射型xss通常出现在前后端一体的网页中，提交给服务端的数据立即用于结果的展示，就容易受到攻击。 比如下面这段代码：

<!DOCTYPE html><html>
    <body>
        <form role="search" action="" method="GET">
            <input type="text" name="search" placeholder="请输入要搜索的内容">          
            <button type="submit">搜索</button>
        </form>
        <?php
         if (isset($_GET['search']) && !empty($_GET['search'])) {
             $search = $_GET['search'];
             echo "<h3>你搜索的结果内容是：" . $search . "</h3>";
          }
        ?>
   </body>
</html>

页面会从query里取数据展示到html里 如果攻击者构建一个链接：http://localhost/index.php?search=<%2Fh3>

基于DOM的xss

在前后端分离的页面里，前端页面与后端服务隔离，但是如果处理不当，把外部输入内容直接插入到dom中，依然有xss的风险。 如下面这段代码：

<!DOCTYPE html>
<html>

<body>
  <form role="search" action="" method="GET"> <input type="text" name="search" placeholder="请输入要搜索的内容"> <button
      type="submit">搜索</button> </form>
  <script>
    var search = location.search.substring(8); document.write('你搜索的结果内容是：' + decodeURIComponent(search));
  </script>
</body>

</html>

直接把query里的内容塞入到dom中，导致了和上面反射型xss一样的结果。 所以说，不要随便点一些乱七八糟的链接。

持久型xss

以上两种攻击类型因为攻击内容没有存到后端服务，所以只有打开链接的用户受到影响，危害有限。持久型xss就是攻击内容存到了后端服务中，所以展示相应内容的用户都会收到攻击。 如：用户提交评论, 服务端将这条评论直接存到了服务器，并展示给其它用户，那么所有访问到这个评论的用户都会收到攻击。

如何应对xss攻击

验证输入/输出，一切用户输入都不可信，可以采用白名单的方式对用户的输入进行验证。如输入手机号只让输入数字。 且在需要展示的时候对内容进行验证。通常来说，前端框架在展示端都有对进行处理及过滤，按框架推荐规范去展示数据能很大程度规避问题，如尽量不用v-html等危险的语法。 W3C 提出了 CSP（Content Security Policy，内容安全策略）来提升 Web 的安全性。所谓 CSP，就是在服务端返回的 HTTP header 里面添加一个 Content-Security-Policy 选项，然后定义资源的白名单域名。浏览器就会识别这个字段，并限制对非白名单资源的访问。这个策略之所以有效，是因为直接攻击内容（url或者评论内容）长度有限，通常会加载三方js代码去执行实际的攻击逻辑。

avatar
文章
阅读
粉丝