Web應(yīng)用程序的安全涉及到很多方面铝阐。針對(duì)常見的漏洞和攻擊,比如跨站腳本攻擊,Angular提供了一些內(nèi)置的保護(hù)措施。為了系統(tǒng)性的防范XSS問題绸栅,Angular默認(rèn)把所有值都當(dāng)做不可信任的瓣铣。 當(dāng)值從模板中以屬性(Property)喳张、DOM元素屬性(Attribte)及刻、CSS類綁定或插值表達(dá)式等途徑插入到DOM中的時(shí)候, Angular將對(duì)這些值進(jìn)行無害化處理(Sanitize)卿樱,對(duì)不可信的值進(jìn)行編碼僚害。
Angular定義了四個(gè)安全環(huán)境 - HTML,樣式繁调,URL萨蚕,和資源URL:
**HTML:值需要被解釋為HTML時(shí)使用,比如當(dāng)綁定到innerHTML時(shí)涉馁。 **
**樣式:值需要作為CSS綁定到style屬性時(shí)使用门岔。 **
**URL:值需要被用作URL屬性時(shí)使用,比如<a href>
烤送。 **
資源URL:值需要被當(dāng)做代碼而加載并執(zhí)行時(shí)使用寒随,比如<script src>
中的URL。
Angular會(huì)對(duì)前三項(xiàng)中種不可信的值進(jìn)行無害化處理。但Angular無法對(duì)第四種資源URL進(jìn)行無害化妻往,因?yàn)樗鼈兛赡馨魏未a互艾。在開發(fā)模式下, 如果Angular在進(jìn)行無害化處理時(shí)需要被迫改變一個(gè)值讯泣,它就會(huì)在控制臺(tái)上輸出一個(gè)警告纫普。
"WARNING: sanitizing HTML stripped some content" when no content stripped
有時(shí)候,應(yīng)用程序確實(shí)需要包含可執(zhí)行的代碼好渠,比如使用URL顯示<iframe>
昨稼,或者構(gòu)造出有潛在危險(xiǎn)的URL。 為了防止在這種情況下被自動(dòng)無害化拳锚,你可以告訴Angular:我已經(jīng)審查了這個(gè)值假栓,檢查了它是怎么生成的,并確信它總是安全的霍掺。
注入DomSanitizer服務(wù)匾荆,然后調(diào)用下面的方法之一,你就可以把一個(gè)值標(biāo)記為可信任的杆烁。
bypassSecurityTrustScript
bypassSecurityTrustUrl
bypassSecurityTrustResourceUrl
例如要使用innnerHtml:
ts中:
import { DomSanitizer } from '@angular/platform-browser';
constructor(private sanitize:DomSanitizer) { }
tempHtml = '<div>
<img src="assets/images/toast/tip.png"
style="width:2.5rem;height:2.5rem;vertical-align:middle;" alt="">
</div>';
sanitizeHtml = this.sanitize.bypassSecurityTrustHtml(tempUrl)
html中:
<div [innnerHtml]="sanitizeHtml "></div>