解決angular 報錯 url unsafe

weiweiyi發表於2023-02-25

遇到報錯

使用的img 標籤出現了報錯

<img class="img-thumbnail" [src]="qrCodeSrc"/>

1676891888239_7427C545-E163-475d-BC27-AF70F40715C1.png

報錯這個url 為 unsafe

XSS

首先先了解為什麼會出現unsafe

為了系統性的防範 XSS 問題,Angular 預設把所有值都當做不可信任的。即 unsafe

跨站指令碼(XSS)允許攻擊者將惡意程式碼注入到頁面中。這些程式碼可以偷取使用者及其登入資料資料,還可以冒充使用者執行操作。它是 Web 上最常見的攻擊方式之一。

比如,如果某個攻擊者能把 <script> 標籤插入到 DOM,就可以在你的網站上執行任何程式碼。
又比如其他的一些標籤
<img alt="" src="...">

<a href="javascript:..."。

如果攻擊者所控制的資料混進了 DOM,就會導致安全漏洞。


Angular 將對這些值進行消毒(Sanitize),對不可信的值進行編碼。

如果我們認為這個值是安全的,可以採用下列方法把這個值標記為安全,

注入 DomSanitizer 服務,然後呼叫下面的方法之一,就可以把一個值標記為安全。

  • bypassSecurityTrustHtml
  • bypassSecurityTrustScript
  • bypassSecurityTrustStyle
  • bypassSecurityTrustUrl
  • bypassSecurityTrustResourceUrl

解決方法: 消毒

this.qrCodeSrc = this.sanitizer.bypassSecurityTrustUrl(url);
<img class="img-thumbnail" [src]="qrCodeSrc"/>

但是消毒後,url 加上了 localhost%22

image.png

為什麼會加上localhost?

原因:

src 的若不是http, https, ftp...等開頭,會被認為是相對路徑,實際導向時就會被加上http://域名/

出現的%22 , 根據谷歌找到是表明 雙引號


image.png


所以最後的結果是因為: url前面出現了雙引號 , 導致被認為是相對路徑, 自動加上localhost.

解決: 去掉雙引號

this.qrCodeSrc = this.sanitizer.bypassSecurityTrustUrl(src.replace(/\"/g, ""));

相關文章