Javascript 过滤 html 标签、属性
一般来说,用户输入的HTML都会在后端过滤:既要允许用户的HTML标签、属性,CSS,又必须禁止某些危险属性! 不过在有些业务场景下,只能前端用Javascript 过滤。 找了一圈,也没看到一个能用的demo,只好自己写一个,希望抛砖引玉。
——————————-我是有节操的分割线————————————
先说说过滤**:以前在后端,大都采用正则匹配!但是沉痛的教训告诉我们:用正则匹配去除危险属性,是极为靠不住的!会走上万劫不复的道路! 各种浏览的各种不一致的约定,会让你的正则表达式变得极其复杂,而且并不能限定所有情况! 对危险标签、属性的清理,比较科学的的做法是:弄一个实际的解析器,然后把输入的文档 “翻译” 成内存里面的层级文档树,再清除。 用 javascript 清理标签,也采用这种方案。 为了最大程度允许用户行为,采用白名单、黑名单过滤,危险的情况主要有:
- ■ 标签:script,iframe
- ■ 标签属性:
- ■ 所有on开头的,
- ■ 协议类:src=”javascript:”,href=”javascript:”,
- ■ href=” javascript:alert(1);”,href=”javascript:alert(1);”,
- href=”javascript:alert(1);”
- ■ style名:behavior(这是IE私有属性,可以加载js)
- ■ style值:expression,url(javascript:xxxx) @import “CssStyle.css”; 等等,
= = = = = = 补充: // 此方案未做 标签本身闭合、标签对闭合!! // 如果要用于工业生产中,必须增加标签闭合、标签对闭合! 不然 利用标签未闭合、以及单引号可触发 on 属性事件,以及很多可能性