前端安全系列-xss攻击

沐晓
839 阅读3分钟

安全对于企业和项目来说都是个很重要的话题，在前端领域也是如此。虽然在平常的工作中你可能没有关注，但是我们不能不去了解它。熟练掌握安全问题，才能让我们面对自己的代码更加自信，也避免在面试中给面试官留下不好印象。

什么是xss攻击

xss 全称跨站脚本攻击（Cross-Site Scripting），是指攻击者在网站中注入恶意脚本，使之在用户浏览器运行，进而窃取用户数据或者做出其它对用户不利的行为。

为了和 css 作出区别，故而名为 xss

xss分类

xss类型存储区漏洞位置
反射型服务端获取的URL服务端代码
存储型数据库服务端代码
DOM型URL/输入框前端代码

URL不仅指网页地址URL，还包括 IMG，A 等标签的 src/href 属性

1. 反射型xss

攻击步骤:

  1. 攻击者构造出包含恶意代码的URL

  2. 服务端解析请求URL并返回

  3. 浏览器执行恶意脚本

攻击示例

攻击者构造出包含恶意脚本的URL

http://xxx.com/?q=<script>alert(1)</script>

服务端解析请求URL并返回（node）

const url = require('url');
const http = require('http');


const server = http.createServer((req, res) => {
    const q = url.parse(req.url, true).query.q);

    res.write(q);
});

浏览器执行服务端返回脚本，弹出恶意提示

示例只是构造了简单的弹出效果，如果攻击者的脚本是更有侵犯性的，比如跳转第三方网站（造成流量劫持），获取用户cookie数据并发送，其实是非常危险的安全漏洞

2. 存储型xss

攻击步骤：

  1. 攻击者利用用户输入功能（如评论），向数据库存入恶意脚本

  2. 服务端从数据库读取恶意脚本并返回

  3. 浏览器执行恶意脚本

存储型 xss 和 反射型 xss 其实很相似，都是服务端解析恶意脚本返回浏览器运行，不同之处仅在于对于存储型 xss，其解析的恶意脚本来自于数据库，而非请求的 URL。其危害范围要比反射型更广，因为它可能攻击多个用户浏览器，因为其脚本来源于数据库。

3. DOM型xss

攻击步骤：

  1. 攻击者利用用户输入功能（如文本输入框），或者URL，构造恶意脚本

  2. 前端开发者从输入框或URL中解析恶意脚本

  3. 浏览器执行恶意脚本

示例

<input />

<script>
    const input = document.querySelector('input');

    input.addEventListener('blur', () => {
        setTimeout(input.value);
    });
</script>

前端监听了用户输入并在失焦时执行了输入内容，如果攻击者输入以下恶意脚本

alert(document.cookie)

则会弹出用户在当前网站的 cookie，因为整个攻击过程没有经过服务端参与，所以称为DOM型xss

xss攻击的攻防

xss 的攻击有两大要素

  1. 攻击者提交恶意代码

  2. 浏览器执行恶意代码

攻击

  1. 构造恶意URL（标签属性）（诱发放射型/存储型xss）

  2. 往输入框中输入恶意脚本（诱发DOM型/存储型xss）

预防

  1. 对解析的URL进行转义

  2. 对输出侧内容进行转义（如对html进行充分转义）

  3. 对直接解析执行的输入内容进行转义（输入框）

  4. 前后端分离，纯前端渲染（使用ajax获取数据可降低xss风险）

  5. xss检测（构造检测字符串）

jaVasCript:/*-/*`/*\`/*'/*"/**/(/* */oNcliCk=alert() )//%0D%0A%0d%0a//</stYle/</titLe/</teXtarEa/</scRipt/--!>\x3csVg/<sVg/oNloAd=alert()//>\x3e

  1. 使用 cookie 的 HttpOnly（预防cookie被窃取）

  2. CSP

参考

欢迎到前端自习群一起学习～516913974

avatar
文章
阅读
粉丝