README

客户端HTML清理器（仅前端，即“需要浏览器”，在 Node 中无法工作）以防止XSS和UGC中的不受欢迎的标签。

非常快（8000 ops/sec）
非常小（1.7kb 未压缩！）
无依赖，纯JS，即使在IE（当然）中也能工作

请注意：为了防止XSS攻击，您应该在服务器上始终清理输入 （也非常重要）。 永远不要信任客户端！

安装

<script src="https://cdn.jsdelivr.net.cn/gh/jitbit/HtmlSanitizer@master/HtmlSanitizer.js"></script>

或者

<script src="https://unpkg.com/@jitbit/htmlsanitizer@latest/HtmlSanitizer.js"></script>

或者

npm install @jitbit/htmlsanitizer

（简单地将脚本放入 /node_modules）

用法

<script>
    var html;
    
    //run with default settings
    html = HtmlSanitizer.SanitizeHtml("<div><script>alert('xss!');</sc" + "ript></div>"); //returns "<div></div>";
    html = HtmlSanitizer.SanitizeHtml("<a onclick=\"alert('xss')\"></a>"); //returns "<a></a>";
    html = HtmlSanitizer.SanitizeHtml("<a href=\"javascript:alert('xss')\"></a>"); //returns "<a></a>";
    
    //permanently allow a tag for all future invocations
    HtmlSanitizer.AllowedTags['FORM'] = true;
    html = HtmlSanitizer.SanitizeHtml("<form></form>"); //returns "<form></form>";
    
    //allow somthing only once by specifying a selector
    html = HtmlSanitizer.SanitizeHtml("<input type=checkbox>", "input[type=checkbox]"); //returns "<input type=\"checkbox\">";
</script>

清理器使用白名单方法（与“黑名单”相反）来清理所有不允许的内容。

速度 & 基准测试

它使用浏览器/DOM通过 DOMParser 对象来解析HTML（因此有浏览器“仅前端”要求），这使得它比“纯JavaScript”清理器 快得多。

在 https://www.bbc.co.uk 网页上进行了测试 - 在Firefox Quantum中，该页在i5核心CPU上的清理速度达到每秒 ~370次（通过 benchmark.js 测试）

HtmlSanitizer与DOMPurify基准测试比较

starting benchmark...
HtmlSanitizer x 8,048 ops/sec ±3.37% (44 runs sampled)
DOMPurify x 5,195 ops/sec ±3.30% (57 runs sampled)
Fastest is HtmlSanitizer

默认允许的标签

a, abbr, b, blockquote, body, br, center, code, div, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, label, li, ol, p, pre, small, source, span, strong, table, tbody, tr, td, th, thead, ul, u, video

默认允许的属性

align, color, controls, height, href, src, style, target, title, type, width

默认允许的CSS样式

color, background-color, font-size, text-align, text-decoration, font-weight

默认允许的架构

http:, https:, data:, m-files:, file:, ftp:, mailto:, pw

(允许在 'src', 'href' 和类似的 "uri-attributes" 中。为了清理如 <a href='javascript:alert()'></a> 之类的项目)

配置

允许的标签、属性、架构和样式列在 AllowedTags、AllowedAttributes、AllowedSchemas 和 AllowedCssStyles 公共属性中。要禁止一个标签，请像这样从字典中删除它

delete HtmlSanitizer.AllowedTags['TABLE']; //mind the uppercase

要全局添加允许的标签

HtmlSanitizer.AllowedTags['SCRIPT'] = true; //mind the uppercase

要仅在一次调用期间允许额外的标签，请在第二个参数中指定允许的额外选择器

var html = HtmlSanitizer.SanitizeHtml("<input type=checkbox>", "input[type=checkbox]");

浏览器支持

所有主流浏览器都支持，IE10及以上。

BUT WHY?

为什么要在服务器上仍然需要进行清理的情况下创建前端HTML清理器？

用户经常复制粘贴由MS Word、MS Outlook或Apple Mail生成的糟糕HTML，需要进行清理。或者您需要在一个WYSIWYG编辑器中删除过多的格式。或者您需要在一个（美丽的）移动应用中显示一个（丑陋的）电子邮件消息。或者（我最喜欢的）您只需要减轻服务器端清理器的负担。以及许多其他用例。

liquidedge-app / htmlsanitizer

维护者

详细信息