Angular9 防范跨站腳本(XSS)攻擊

跨站腳本(XSS)允許攻擊者將惡意代碼注入到頁面中。這些代碼可以偷取用戶數(shù)據(jù) （特別是它們的登錄數(shù)據(jù)），還可以冒充用戶執(zhí)行操作。它是 Web 上最常見的攻擊方式之一。

為了防范 XSS 攻擊，你必須阻止惡意代碼進(jìn)入 DOM。比如，如果某個攻擊者能騙你把 <script> 標(biāo)簽插入到 DOM，就可以在你的網(wǎng)站上運(yùn)行任何代碼。 除了 <script>，攻擊者還可以使用很多 DOM 元素和屬性來執(zhí)行代碼，比如 <img onerror="...">、<a href="javascript:...">。 如果攻擊者所控制的數(shù)據(jù)混進(jìn)了 DOM，就會導(dǎo)致安全漏洞。

Angular 的“跨站腳本安全模型”

為了系統(tǒng)性的防范 XSS 問題，Angular 默認(rèn)把所有值都當(dāng)做不可信任的。 當(dāng)值從模板中以屬性（Property）、DOM 元素屬性（Attribte)、CSS 類綁定或插值等途徑插入到 DOM 中的時候， Angular 將對這些值進(jìn)行無害化處理（Sanitize），對不可信的值進(jìn)行編碼。

Angular 的模板同樣是可執(zhí)行的：模板中的 HTML、Attribute 和綁定表達(dá)式（還沒有綁定到值的時候）會被當(dāng)做可信任的。 這意味著應(yīng)用必須防止把可能被攻擊者控制的值直接編入模板的源碼中。永遠(yuǎn)不要根據(jù)用戶的輸入和原始模板動態(tài)生成模板源碼！ 使用離線模板編譯器是防范這類“模板注入”漏洞的有效途徑。

無害化處理與安全環(huán)境

無害化處理會審查不可信的值，并將它們轉(zhuǎn)換成可以安全插入到 DOM 的形式。多數(shù)情況下，這些值并不會在處理過程中發(fā)生任何變化。 無害化處理的方式取決于所在的環(huán)境：一個在 CSS 里面無害的值，可能在 URL 里很危險。

Angular 定義了四個安全環(huán)境 - HTML，樣式，URL，和資源 URL：

• HTML：值需要被解釋為 HTML 時使用，比如當(dāng)綁定到 innerHTML 時。

• 樣式：值需要作為 CSS 綁定到 style 屬性時使用。

• URL：值需要被用作 URL 屬性時使用，比如 <a href>。

• 資源 URL 的值需要作為代碼進(jìn)行加載并執(zhí)行，比如 <script src> 中的 URL。

Angular 會對前三項(xiàng)中種不可信的值進(jìn)行無害化處理，但不能對第四種資源 URL 進(jìn)行無害化，因?yàn)樗鼈兛赡馨魏未a。在開發(fā)模式下， 如果在進(jìn)行無害化處理時需要被迫改變一個值，Angular 就會在控制臺上輸出一個警告。

無害化示例

下面的例子綁定了 htmlSnippet 的值，一次把它放進(jìn)插值里，另一次把它綁定到元素的 innerHTML 屬性上。

Path："src/app/inner-html-binding.component.html" 。

<h3>Binding innerHTML</h3>
<p>Bound value:</p>
<p class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>Result of binding to innerHTML:</p>
<p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>

插值的內(nèi)容總會被編碼 - 其中的 HTML 不會被解釋，所以瀏覽器會在元素的文本內(nèi)容中顯示尖括號。

如果希望這段 HTML 被正常解釋，就必須綁定到一個 HTML 屬性上，比如 innerHTML。但是如果把一個可能被攻擊者控制的值綁定到 innerHTML 就會導(dǎo)致 XSS 漏洞。 比如，包含在 <script> 標(biāo)簽的代碼就會被執(zhí)行：

Path："src/app/inner-html-binding.component.ts (class)" 。

export class InnerHtmlBindingComponent {
  // For example, a user/attacker-controlled value from a URL.
  htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
}

Angular 認(rèn)為這些值是不安全的，并自動進(jìn)行無害化處理。它會移除 <script> 標(biāo)簽，但保留安全的內(nèi)容，比如該片段中的 <b> 元素。

避免直接使用 DOM API

瀏覽器內(nèi)置的 DOM API 不會自動保護(hù)你免受安全漏洞的侵害。比如 document、通過 ElementRef 拿到的節(jié)點(diǎn)和很多第三方 API，都可能包含不安全的方法。如果你使用能操縱 DOM 的其它庫，也同樣無法借助像 Angular 插值那樣的自動清理功能。 所以，要避免直接和 DOM 打交道，而是盡可能使用 Angular 模板。

瀏覽器內(nèi)置的 DOM API 不會自動針對安全漏洞進(jìn)行防護(hù)。比如，document（它可以通過 ElementRef 訪問）以及其它第三方 API 都可能包含不安全的方法。 要避免直接與 DOM 交互，只要可能，就盡量使用 Angular 模板。

內(nèi)容安全策略

內(nèi)容安全策略(CSP) 是用來防范 XSS 的縱深防御技術(shù)。 要打開 CSP，請配置你的 Web 服務(wù)器，讓它返回合適的 HTTP 頭 Content_Security_Policy。 要了解關(guān)于內(nèi)容安全策略的更多信息，請參閱 HTML5Rocks 上的內(nèi)容安全策略簡介。

使用離線模板編譯器

離線模板編譯器阻止了一整套被稱為“模板注入”的漏洞，并能顯著增強(qiáng)應(yīng)用程序的性能。盡量在產(chǎn)品發(fā)布時使用離線模板編譯器， 而不要動態(tài)生成模板（比如在代碼中拼接字符串生成模板）。由于 Angular 會信任模板本身的代碼，所以，動態(tài)生成的模板 —— 特別是包含用戶數(shù)據(jù)的模板 —— 會繞過 Angular 自帶的保護(hù)機(jī)制。 要了解如何用安全的方式動態(tài)創(chuàng)建表單，請參見 構(gòu)建動態(tài)表單 一章。

服務(wù)器端 XSS 保護(hù)

服務(wù)器端構(gòu)造的 HTML 很容易受到注入攻擊。當(dāng)需要在服務(wù)器端生成 HTML 時（比如 Angular 應(yīng)用的初始頁面）， 務(wù)必使用一個能夠自動進(jìn)行無害化處理以防范 XSS 漏洞的后端模板語言。不要在服務(wù)器端使用模板語言生成 Angular 模板， 這樣會帶來很高的 “模板注入” 風(fēng)險。