需要用iframe引用一個外部的url。
直接使用接口獲取到url,給iframe的src賦值時,報了個ERROR Error: unsafe value used in a resource URL context.大概的意思就是資源url不安全
然而我們自己的項目里面有人使用過iframe,果斷搜代碼,找到這么一段代碼:
constructor(private sanitizer: DomSanitizer, ){} this.securityUrl = this.sanitizer.bypassSecurityTrustResourceUrl(iFrameUrl);
這個DomSanitizer是個啥?看起來是Angular提供的
Angualr的文檔里面這樣寫
調用任何
bypassSecurityTrust...
API 都會禁用 Angular 對傳入的值的內置凈化機制。 要小心翼翼的檢查和審計所有的值和到該調用的代碼執行路徑。 要確保任何一個用戶數據都針對這個安全上下文進行過適當的轉義(escape)。
比如,如果要在 <a [href]="someValue">
的鏈接中綁定一個 URL,someValue
將會被凈化, 以防范攻擊者注入 javascript:
之類的 URL,並借此在網站上執行代碼。
在特定場景下,可能要禁用凈化機制,比如,如果應用程序真的需要生成具有動態值的 javascript:
鏈接。 用戶可以通過使用 bypassSecurityTrust...
方法來構建出一個值,以繞過安全性檢查,並在模板中綁定它。
這種場景其實非常罕見,必須特別小心,避免引入跨站腳本攻擊(XSS)類的安全風險。
當使用 bypassSecurityTrust...
時,請盡量確保盡早調用該方法,並且讓他盡可能接近值的來源,以便能更容易地驗證使用它時有沒有引入安全風險。
如果該值本身是安全的,則不需要繞過安全性檢查,比如那些沒有使用可疑協議的 URL 或者不包含危險代碼的 HTML 片段。 凈化器會確保值的安全性。
DomSanitizer提供的方法
1. sanitize()
為在給定的 SecurityContext 中使用而對 value
進行轉義
如果這個值在這個上下文中是可信的,則該方法會解開所包含的安全值,並且直接使用它;否則,這個值就會根據給定的安全上下文凈化成安全的,比如替換那些具有不安全協議(例如 javascript:
)的 URL。 該實現負責確保在給定的上下文中可以絕對安全的使用該值。
2. bypassSecurityTrustHtml()
繞過安全檢查,並信任給定的值是一個安全的 HTML。只有當要綁定的 HTML 是不安全內容(比如包含 <script>
)而且你確實希望運行這些代碼時,才需要使用它。 凈化器會確保安全 HTML 的完整性,因此在大多數場景下都不需要使用該方法。
3. bypassSecurityTrustStyle()
繞過安全檢查,並信任給定的值是一個安全的樣式(CSS)。
4. bypassSecurityTrustScript()
繞過安全檢查,並信任給定的值是一個安全的JavaScript。
5. bypassSecurityTrustUrl()
繞過安全檢查,並信任給定的值是一個安全的樣式 URL。也就是說該值可安全地用在鏈接或 <img src>
中。
6. bypassSecurityTrustResourceUrl()
繞過安全檢查,並信任給定的值是一個安全的資源 URL。也就是說該地址可以安全的用於加載可執行代碼,比如 <script src>
或 <iframe src>
。
警告: 使用不可信的用戶數據調用此方法將會讓你的應用暴露在 XSS 安全風險之下!
https://angular.cn/api/platform-browser/DomSanitizer#description