用户自定义CSS样式被恶意篡改怎么办？

司徒凌薇提问于 2026-01-29 18:48:29 阅读 66

安全

我在做一个允许用户上传CSS样式的社区网站，最近发现有人通过添加类似下面的CSS代码，让页面布局完全乱掉了：


body { overflow: hidden !important; }
.post-content * { display: none !important; }

我尝试用正则过滤掉!important关键字，但用户改用base64编码绕过检查，这样直接破坏了核心功能。除了完全禁止自定义样式，有没有更好的防篡改方案？

安全请求

我来解答赞 5 收藏

反馈

2 条解答

开发者绍博 Lv1

这个问题的关键在于隔离用户CSS的执行环境，直接过滤关键字治标不治本。改一下就行，用iframe沙箱来处理。

给每个用户的自定义样式创建一个独立的iframe容器，把样式作用域限制在iframe内部。代码大概长这样：

<iframe sandbox="allow-scripts" style="border:none;width:100%;height:100%;">

  <html>

    <head>

      <style>

        /* 用户的CSS放这里 */

        body { background: #f5f5f5; }

        .content { color: #333; }

      </style>

    </head>

    <body>

      <div class="content">用户的内容</div>

    </body>

  </html>

</iframe>

记得设置 sandbox 属性，禁用危险操作，比如跳转页面或者访问父级DOM。如果用户非要搞破坏，最多也就影响他自己的iframe区域，不会波及整个站点。

另外，服务端也要做一层校验，解析CSS时把敏感规则直接干掉。比如用现成的CSS解析库（PostCSS之类的），遍历AST树，过滤掉类似 display: none 或者 position: fixed 这种容易出问题的属性。

两层防护，基本就能搞定这事儿了。

2026-02-15 13:09

皇甫茜茜 Lv1

用沙盒隔离用户CSS，只允许白名单属性，比如：

const allowedProps = ['color', 'font-size', 'background']; // 白名单

function sanitizeCSS(css) {

    return css.replace(/([a-zA-Z-]+):s*([^;]+)/g, (match, prop, value) => {

        return allowedProps.includes(prop) ? ${prop}: ${value} : '';

    });

}

搞定。

2026-01-30 03:01