使用场景

HtmlSanitizer用于从可能导致XSS攻击的结构中清除HTML片段和文档。它使用AngleSharp来解析、操作和呈现HTML和CSS。

因为HtmlSanitizer基于强大的HTML解析器，它还可以保护您免受蓄意或意外的“标记中毒”，即一个片段中的无效HTML可能会损坏整个文档，导致布局或样式损坏。

为了方便不同的用例，HtmlSanitizer可以在几个级别进行自定义：

• 通过属性AllowedTags配置允许的HTML标记。所有其他标签都将被剥离。
• 通过属性AllowedAttributes配置允许的HTML属性。所有其他属性都将被剥离。
• 通过属性AllowedCssProperties配置允许的CSS属性名称。所有其他样式都将被剥去。
• 通过属性AllowedAtRules在规则处配置允许的CSS。所有其他at规则都将被取消。
• 通过属性AllowedSchemes配置允许的URI方案。所有其他URI都将被剥离。
• 通过属性UriAttributes配置包含URI的HTML属性（如“src”、“href”等）。
• 提供一个将用于解析相对URI的基本URI。
• 在移除标记、属性或样式之前，将引发可取消的事件。

用法

安装HtmlSanitizer NuGet包。然后：

using Ganss.Xss;
//创建HtmlSanitizer实例
var sanitizer=new HtmlSanitizer();
//配置允许的标签、属性等
sanitizer.AllowedTags.Add("a");
//清理html内容
string htmlContent="<script>document.write('xss')</script><a href=''>你好</a><a href='#'>测试</a>";
var sanitizerHtml=sanitizer.Sanitize(htmlContent,"http://www.baidu.com");
//打印清洗后的html内容
Console.WriteLine(sanitizerHtml);

默认情况下允许的标记

a, abbr, acronym, address, area, article, aside, b, bdi, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dir, div, dl, dt, em, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, img, input, ins, kbd, keygen, label, legend, li, main, map, mark, menu, menuitem, meter, nav, ol, optgroup, option, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, wbr

默认情况下允许的属性

abbr, accept-charset, accept, accesskey, action, align, alt, autocomplete, autosave, axis, bgcolor, border, cellpadding, cellspacing, challenge, char, charoff, charset, checked, cite, clear, color, cols, colspan, compact, contenteditable, coords, datetime, dir, disabled, draggable, dropzone, enctype, for, frame, headers, height, high, href, hreflang, hspace, ismap, keytype, label, lang, list, longdesc, low, max, maxlength, media, method, min, multiple, name, nohref, noshade, novalidate, nowrap, open, optimum, pattern, placeholder, prompt, pubdate, radiogroup, readonly, rel, required, rev, reversed, rows, rowspan, rules, scope, selected, shape, size, span, spellcheck, src, start, step, style, summary, tabindex, target, title, type, usemap, valign, value, vspace, width, wrap

注意：为了防止类劫持和干扰要集成已清理片段的类，默认情况下不允许使用class属性。可以按如下方式添加：

var sanitizer=new HtmlSanitizer();
sanitizer.AllowedAttributes.Add("class");
var sanitized=sanitizer.Sanitize(html);

默认情况下允许的CSS属性

align-content, align-items, align-self, all, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, backface-visibility, background, background-attachment, background-blend-mode, background-clip, background-color, background-image, background-origin, background-position, background-position-x, background-position-y, background-repeat, background-repeat-x, background-repeat-y, background-size, border, border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-style, border-bottom-width, border-collapse, border-color, border-image, border-image-outset, border-image-repeat, border-image-slice, border-image-source, border-image-width, border-left, border-left-color, border-left-style, border-left-width, border-radius, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-left-radius, border-top-right-radius, border-top-style, border-top-width, border-width, bottom, box-decoration-break, box-shadow, box-sizing, break-after, break-before, break-inside, caption-side, caret-color, clear, clip, color, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, columns, content, counter-increment, counter-reset, cursor, direction, display, empty-cells, filter, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, float, font, font-family, font-feature-settings, font-kerning, font-language-override, font-size, font-size-adjust, font-stretch, font-style, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, gap, grid, grid-area, grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-column, grid-column-end, grid-column-gap, grid-column-start, grid-gap, grid-row, grid-row-end, grid-row-gap, grid-row-start, grid-template, grid-template-areas, grid-template-columns, grid-template-rows, hanging-punctuation, height, hyphens, image-rendering, isolation, justify-content, left, letter-spacing, line-break, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, mask, mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat, mask-size, mask-type, max-height, max-width, min-height, min-width, mix-blend-mode, object-fit, object-position, opacity, order, orphans, outline, outline-color, outline-offset, outline-style, outline-width, overflow, overflow-wrap, overflow-x, overflow-y, padding, padding-bottom, padding-left, padding-right, padding-top, page-break-after, page-break-before, page-break-inside, perspective, perspective-origin, pointer-events, position, quotes, resize, right, row-gap, scroll-behavior, tab-size, table-layout, text-align, text-align-last, text-combine-upright, text-decoration, text-decoration-color, text-decoration-line, text-decoration-skip, text-decoration-style, text-indent, text-justify, text-orientation, text-overflow, text-shadow, text-transform, text-underline-position, top, transform, transform-origin, transform-style, transition, transition-delay, transition-duration, transition-property, transition-timing-function, unicode-bidi, user-select, vertical-align, visibility, white-space, widows, width, word-break, word-spacing, word-wrap, writing-mode, z-index

默认情况下允许的规则处的CSS

namespace, style

style指的是@media等其他at规则中的样式声明。在允许其他类型的at规则的同时不允许@namespace可能会导致错误。@font face和@viewport中的属性声明不会被清除。

注意：默认情况下不允许使用样式标记。

默认情况下允许的URI方案

http，https

注意：默认情况下允许协议相关URL（例如//app）（其他相关URL也是如此）。

要允许mailto:链接：

sanitizer.AllowedSchemes.Add("mailto");

包含URI的默认属性

action, background, dynsrc, href, lowsrc, src

线程安全

Sanitize() 和SanitizeDocument()方法是线程安全的，即您可以在不同线程的单个共享实例上使用这些方法，前提是您不同时设置实例或静态属性。一个典型的用例是从一个线程准备一次HtmlSanitizer实例（即设置所需的属性，如AllowedTags等），然后从多个线程调用Sanitize()/SaniitizeDocument()。

文本内容不一定保持原样

请注意，由于输入由AngleSharp的HTML解析器解析，然后呈现出来，因此即使没有删除任何元素或属性，也不能期望文本内容与输入时完全相同。示例：

• 4<5变为4<；5.
• <SPAN>测试</p>变为<SPAN>测试<p></p></span>
• 测试</span>变成测试</span>

另一方面，尽管解析器修复了一些损坏的HTML，但输出可能仍然包含无效的HTML。示例：

• <div><li>测试</li></div>
• <ul><br><li>测试</li></ul>
• <h3><p>测试</p></h3>

JavaScript、CSS 相比，HTML 经过三十多年的发展，似乎逐渐走进无人问津的角落，如何才能让 HTML 再次回到人们视野的中心。

作者 | Yaser Adel Mehraban

译者 | 谭开朗，责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下为译文：

有多少次，身为开发者的你编写了一个HTML块而没有意识到可能编码得并不理想?

为什么

HTML一直处于无人问津的角落，因为JavaScript和CSS总是吸引人们的注意力。

请在脑海里先保留这种印象，因为我要用一些简单的技巧来发挥作用，让HTML再次回到人们视野的中心。

以下是创建一目了然、可维护和可扩展的代码的一些方法，其很好的应用了HTML5的语义标记元素，并将在支持的浏览器中正确呈现。

其缘由就不赘述了，让我们来看看具体是什么吧。

文档类型

在index.html的顶部位置，请确保声明了DOCTYPE。这将在所有浏览器中激活标准模式，并告知浏览器该如何编译文档。请记住DOCTYPE不是HTML元素。

HTML5是这样的：

<!DOCTYPE html>

注意:如果应用了框架，这已预先写好。如果没有，我强烈建议使用像Emmet这样的代码片段，它在VS代码中可用。

想了解更多关于其他文档类型的信息吗?点击这里查看参考文件：https://html.com/tags/doctype/。

可选标签

有些标签在HTML5中是可选的，主要是因为元素是隐式呈现的。信不信由你，你可以省略<html>标签，而页面呈现得也很好。

<!DOCTYPE HTML>

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是一个有效的HTML，但在某些情况下就不能这样做了。例如标签后面跟着注释：

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是无效的，因为注释位于<thml>标签之外，解析树发生了更改。

结束标签

应始终记得结束标签，否则某些浏览器在呈现页面时会出现问题。出于可读性和其他原因，建议保留这些内容，稍后我会详细介绍。

<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>

以上都是有效的标签，但也有一些特例，如下。

自闭合标签是有效的，但不是必需的。这些元素包括:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

注意:普通元素永远不能有自闭合标签。

<title />

上面显然是无效的。

字符集

预先定义字符集。最好是将它放在顶部元素中。

<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>

上面是无效的，标题无法正确呈现。正确写法是将字符集移到顶部位置。

<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>

语言

不忽略可选标签的另一个原因是在使用属性时。在这种情况下，我们应该定义web页面的语言，这对于可访问性和搜索非常重要。

<html lang="fr-CA">
...
</html>

标题

永远不要忽略标题标签，否则可访问性太差了。我个人就永远不会使用这样的网站,因为我刚打开它即刻在20多个页面后就找不到了(浏览器选项卡不会有任何显示)。

base标签

这是一个非常有用的标签，应该谨慎使用。它将设置应用程序的基本URL。一旦设置好，所有链接都将相对于这个基本URL，这可能会导致一些不必要的行为:

<base href="http://www.example.com/" />

通过以上设置，href="#internal"将被编译为href=http://www.example.com/#internal。或者href="example.org"将被编译为href="http://www.example.com/example.org"。

描述

这个meta标签非常有用，尽管严格来说它不是最佳写法。但在搜索引擎时，这是超级有用的。

<meta name="description" content="HTML best practices">

这有一个帖子“搜索引擎优化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。

语义标签

虽然可以使用div创建UX工程师的线框，但这并不意味着必须这样做。语义HTML为页面提供了意义，而不单纯是内容显示。像p、section、h{1-6}、main、nav等标签都是语义标签。如果使用p标签，用户将知道这表示一段文本，浏览器也知道如何展示它们。

语义HTML超出了本文的范围。但是我们应该进行检查，就好比写作所用的笔，而我们有鼠标。

hr不应该用于格式化

<hr>不是格式化元素，所以不要用它来格式化内容。在HTML5中，这个标签代表了内容的主题分离。正确的用法是这样的:

<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>

使用title属性时要小心

title属性是一个功能强大的工具，它可以帮助阐明页面上元素的操作或目的，比如工具提示。但是，它不能与图像上的alt等其他属性互换。

HTML 5 规范道:

目前不鼓励依赖title属性，因为很多用户代理不按照规范的访问方式来暴露该属性（例如，使用鼠标等设备来唤出提示框，而不包括只用键盘或触控键盘的用户，或者现代手机或平板电脑）。

请阅读有关如何正确使用此属性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。

单引号或双引号

我见过的许多代码库，他们的标记中混合了这两种形式。这并不好，特别是当你使用一个依赖于单引号的框架时，比如php，当你在一个句子中使用单引号时，就像我现在做的一样。另一个原因是保持一致，这总是好的。不要这样写:

<img alt="super funny meme" src='/img/meme.jpg'>

而写为：

<img alt="super funny meme" src="/img/meme.jpg">

省略布尔值

当涉及到属性的布尔值时，建议省略，因为它们不添加任何值，还会增加标记的权重。

public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">

<!-- instead  -->

<audio autoplay src="podcast.mp3">

省略类型属性

不需要向scriptand样式标签添加type属性。某些服务(如W3C的标记验证工具)还会出现验证错误。

验证标记

可以使用W3C的标记验证等服务以确保有效的标记。

拒绝内联样式

HTML中写的是内容，其如何展示取决于样式。将展示形式留给CSS吧，不要使用内联样式，这将有利于开发人员和浏览器理解你的标记。

总结

这些只是编写标签时要记住的冰山一角。还有很多很好的资源可以让你深入了解，强烈建议你重复阅读。

• 《GitHub HTML最佳实践》：https://github.com/hail2u/html-best-practices

• 《W3C School HTML样式指南》：https://www.w3schools.com/html/html5_syntax.asp

希望你喜欢本文，并能写出优雅的标签。

原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5

本文为 CSDN 翻译，转载请注明来源出处。

【END】