乐趣区

关于angular:解决angular-报错-url-unsafe

遇到报错

应用的 img 标签呈现了报错

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

报错这个 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

为什么会加上 localhost?

起因:

src 的若不是 http, https, ftp… 等结尾,会被认为是相对路径,理论导向时就会被加上 http:// 域名 /

呈现的 %22 , 依据谷歌找到是表明 双引号

所以最初的后果是因为:url 后面呈现了双引号 , 导致被认为是相对路径,主动加上 localhost.

解决:去掉双引号

this.qrCodeSrc = this.sanitizer.bypassSecurityTrustUrl(src.replace(/\"/g,""));
退出移动版