认识XSS跨站脚本攻击｜青训营笔记在前端web开发中，安全是重中之重的问题。我们在本篇文章中来了解 XSS 网络攻击

这是我参与「第四届青训营」笔记创作活动的的第2天

前言

在前端web开发中，安全是重中之重的问题。我们在本篇文章中来了解XSS网络攻击，以及如何处理防御XSS网络攻击。

认识 XSS 跨站脚本攻击

XSS攻击即攻击者将恶意脚本字符串注入页面DOM(例如功能是直接将用户提交的数据渲染到div中, 结果用户提交了一个<script></script>)

该攻击方式能做什么？

获取页面数据
获取Cookies
劫持前端逻辑
发送请求到攻击者自己的网站实现资料的盗取
偷取网站任意数据
偷取用户密码和登陆状态
改变按钮的逻辑

分类

XSS攻击分为以下三种：

存储型(Store) XSS

持久化，恶意脚本存储到数据库中（比如视频中）, 所有读取数据的人都会被攻击，因此这种XSS比较危险，

反射型XSS攻击

非持久化，有点像服务器端渲染, 用户把包含script标签的内容作为参数发送到服务器, 服务器返回含有script标签的处理结果

例如: 希望实现一个功能, 用户提交自己的名字name=username, 服务器返回<div>hello username</div>, 但是我提交了一个name=<script>alert('I can run')</script>

基于DOM的XSS攻击

通过修改页面的DOM节点形成的XSS, 称之为DOM Based XSS，不经过后端。从效果来说, 与反射型XSS类似。但是它们的区别是它们完成注入脚本的地方不同：反射型XSS脚本注入是在服务器端完成的，而基于DOM的XSS注入脚本的过程完全在浏览器端完成。反射型和存储型是服务端将提交的内容反馈到了html源码内, 导致触发XSS. 也就是说返回到HTML源码中可以看到触发XSS的代码. DOM型XSS只与客户端上的JS交互, 也就是说提交的恶意代码, 被放到了JS中执行, 然后显示出来。

基于Mutation XSS攻击

利用浏览器的渲染DOM特性发起XSS攻击, 这种攻击一般是对特异浏览器的, 难以被XSS过滤工具检测

如何防御 XSS 攻击

永远不要相信用户提交的内容, 永远不要将用户提交的内容转化为DOM

防御`XSS`的现成工具

    - 前端防御函数: `google-closure-library` , 流行框架直接集成
    - 后端防御函数: `DOMPurify`


其他防御

    - `String`转义
    - `SVG`扫描(SVG是XML格式的, 可以内置`<script>`)
    - 尽量禁止用户设置自定义跳转链接，如果需要也要做好过滤。
    - 尽量禁止用户自定义样式（可以在样式文件里写url(...)）

认识XSS跨站脚本攻击｜ 青训营笔记

前言