使用場景

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】