CSS内联样式安全转义方法
2026-04-01 20:31:18
0浏览
收藏
CSS内联样式看似安全，实则暗藏XSS高危陷阱——url(javascript:...)、IE时代的expression()和filter行为、甚至content与attr()的组合都可能绕过现代浏览器防护，在旧版或特殊渲染环境下直接执行恶意脚本；因此绝不能依赖简单的HTML实体编码，而必须对用户可控的样式值实施严格白名单校验，重点过滤url()、@import、filter、behavior等危险语法，并仅允许可信协议（如https://、data:image/）和安全相对路径，从源头杜绝样式注入风险。
内联样式里写 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 中，但若动态注入
