阅读 348

前端安全系列-xss攻击

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

什么是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

文章分类
前端
文章标签