会，内联样式中写 javascript: 可触发 xss。浏览器解析 style 时可能执行 url(javascript:...)、expression(...)、filter 中的 js 等，现代浏览器虽拦截部分，但旧版或边缘路径仍有风险，需严格过滤 url()、@import、filter、behavior 等危险属性，并对用户输入做白名单校验而非简单 html 转义。
内联样式里写 javascript: 会触发 XSS 吗？
会，而且非常容易被利用。浏览器在解析 style 属性时，如果遇到 url(javascript:...)、expression(...)（IE）、或某些 CSS 函数中嵌入的 JS 执行上下文，可能直接执行代码。现代浏览器已禁用大部分，但历史兼容层和边缘解析路径仍存在风险。
-
background: url(javascript:alert(1))—— Chrome/Firefox 当前已拦截，但旧版或自定义渲染引擎可能不拦 -
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="javascript:alert(1)")—— IE6–8 可执行 -
content: attr(data-xss)+ 恶意data-xss值配合:before伪元素，若服务端未过滤，可能间接触发
哪些 CSS 属性/函数必须严格过滤？
不是所有 CSS 都危险，但以下属性一旦接受用户输入，就必须做白名单或转义：
-
url()函数：只允许http://、https://、data:image/和相对路径（且需校验不含javascript:、vbscript:） -
@import（虽不在内联 style 中，但若动态注入<style></style>标签则同理） -
filter（尤其含progid:或url()的用法） -
behavior（IE 专有，已废弃但仍有存量系统）
安全转义 ≠ HTML 实体编码
对 CSS 内联样式做 → <code>< 这类 HTML 转义完全无效——因为浏览器是在 CSS 解析器里处理 style 值，不是 HTML 解析器。真正要做的，是剥离或拒绝非法协议和危险函数。
- 不要用
DOMPurify.sanitize(..., {USE_PROFILES: {css: true}})粗暴处理——它默认不处理style属性，需显式开启CSS: true并传入WHITELIST_OPTIONS - 推荐做法：提取每条声明，按属性名走白名单（如只允许
color、margin、background-color），再对值做正则校验（例如/^#([0-9A-F]{3}){1,2}$/i判颜色） - 对
url()值，用URL.canParse()+ 协议白名单检查，而非字符串includes("javascript:")（易被jaVasCript:绕过）
React/Vue 等框架里写 style={{ ... }} 就安全了吗？
不绝对。框架只防 HTML 注入，不防 CSS 解析阶段的逻辑执行。比如：style={{ backgroundImage: 'url(' + userInput + ')' }}，如果 userInput 是 javascript:alert(1)，最终渲染出的 DOM 仍是危险的。
立即学习“前端免费学习笔记（深入）”；
- Vue 的
:style和 React 的style对象都会原样拼入style属性，不做 CSS 语法分析 - Next.js 的
dangerouslySetInnerHTML明确警告风险，但style属性没有类似机制，容易被忽略 - 真正安全的做法：把用户可控的样式拆成原子属性（如
bgColor、bgImageSrc），在组件内部映射为受限的 CSS 值，而不是拼接原始字符串
url() 校验，或误信框架自动防护，就可能让 XSS 在 CSS 层复活。 
