真正能跑通的路径只有一条：服务端校验后存为内联样式，前端用style标签挂载到document.head并强制限定作用域；因动态import不处理运行时CSS、link加载受CSP拦截且无法作用域隔离。
微商城项目里允许用户上传自定义 CSS，本质不是“引入”而是“注入”——import('./user.css') 会失败，<link> 手动插入又绕不开 CSP 和作用域污染。真正能跑通的路径只有一条：服务端校验后存为内联样式，前端用 style 标签挂载到 document.head，并强制限定作用域。
为什么不能用动态 import 或 link 加载用户 CSS
用户上传的 CSS 是运行时不可信内容，构建工具（Vite/Webpack）根本不会处理它：await import('./uploaded/user.css') 在 Vite 中返回空对象，在 Webpack 中直接报错；而手动创建 <link href="/uploads/user.css"> 会触发 CSP style-src 拦截，且无法限制其作用域——一旦生效，就可能覆盖按钮、弹窗、支付组件等关键样式。
常见错误现象包括：
- 页面白屏或部分 UI 错位，因为用户 CSS 里写了
body { margin: 0 !important } - 控制台无报错但样式没生效，实际是 CSP 静默阻止了外链请求
- 用户切换店铺主题后，旧 CSS 仍残留，
removeChild()没配对调用
安全注入用户 CSS 的三步操作
必须由后端完成校验与转换，前端只负责挂载和清理：
立即学习“前端免费学习笔记（深入）”；
- 后端接收上传后，用 PostCSS + css-tree 剔除
@import、@keyframes、!important和危险属性（如background-image: url(javascript:...)） - 将清洗后的 CSS 字符串通过 API 返回，前端用
document.createElement('style')创建节点 - 在
style标签上添加唯一data-id属性（如data-id="shop-123-css"），便于后续精准移除
示例代码（Vue Composition API）：
const injectUserCSS = (cssString, shopId) => {
const id = `shop-${shopId}-css`
// 先清旧
document.querySelector(`style[data-id="${id}"]`)?.remove()
// 再注入新
const style = document.createElement('style')
style.setAttribute('data-id', id)
style.textContent = cssString
document.head.appendChild(style)
}
如何防止用户 CSS 泄漏到全局或干扰其他模块
纯靠 CSS 选择器前缀不保险——用户可能写 div { color: red } 影响整个页面。必须叠加两层隔离：
- 服务端重写所有规则，自动加上 scoped class 前缀，例如把
.banner→.shop-123 .banner，h2→.shop-123 h2（注意：不能只加一层，否则后代选择器仍可穿透） - 前端挂载时，把
style标签插入到微商城容器元素内部的shadowRoot（若用 Shadow DOM），或至少包裹在<div class="shop-123">...</div>内，并确保该容器有overflow: hidden和contain: layout style - 禁止用户使用
:root、::before、html等全局锚点选择器，后端校验时直接拒绝
SSR 和小程序环境下的特殊处理
微商城常需兼容 H5、微信小程序、App WebView，而这些环境对 style 注入的支持差异极大：
- 微信小程序不支持动态
style标签，必须走WXS+class绑定，后端需额外生成一份 class 映射表（如{ "bg-red": "background-color: #f00;" }），前端用clsx拼接 - SSR 场景下，用户 CSS 不能等到 JS 执行才注入，必须由服务端直出到
<head>中，并加data-server-injected标记，客户端启动时跳过重复挂载 - WebView 容易因
document.write或重复 append 导致样式闪烁，务必用requestIdleCallback延迟注入，且检查style.sheet?.cssRules.length是否非零再认为加载成功
最容易被忽略的是：用户 CSS 里的相对路径（如 background: url(./logo.png)）在注入后全部 404——后端必须把这类 URL 重写为绝对 CDN 地址，且前端不能假设资源一定存在，要加 image-set() fallback 或降级为 base64 占位。
