警告：消毒不安全的樣式值url

我想在Angular 2應用程序的組件模板中設置DIV的背景圖像。不過，我一直在控制檯中收到以下警告，並且沒有得到期望的效果......我不確定動態CSS背景圖像是否因Angular2中的安全限制而被阻止，或者我的HTML模板是否被破壞。警告：消毒不安全的樣式值url

這是我在控制檯中看到警告（我已經改變了我的圖像網址到/img/path/is/correct.png：

警告：消毒不安全的樣式值URL（SafeValue必須使用[屬性] =結合：/ IMG /路徑/is/correct.png（見http://g.co/ng/security#xss））（見http://g.co/ng/security#xss）。

的事情是我做什麼消毒注入使用Angular2的DomSanitizationService我的模板。這是我的HTML，我在我的模板：

<div> 
    <div> 
     <div class="header" 
      *ngIf="image" 
      [style.background-image]="'url(' + image + ')'"> 
     </div> 

     <div class="zone"> 
      <div> 
       <div> 
        <h1 [innerHTML]="header"></h1> 
       </div> 
       <div class="zone__content"> 
        <p 
         *ngFor="let contentSegment of content" 
         [innerHTML]="contentSegment"></p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

這裏是組件...

Import { 
    DomSanitizationService, 
    SafeHtml, 
    SafeUrl, 
    SafeStyle 
} from '@angular/platform-browser'; 

@Component({ 
       selector: 'example', 
       templateUrl: 'src/content/example.component.html' 
      }) 
export class CardComponent implements OnChanges { 

    public header:SafeHtml; 
    public content:SafeHtml[]; 
    public image:SafeStyle; 
    public isActive:boolean; 
    public isExtended:boolean; 

    constructor(private sanitization:DomSanitizationService) { 
    } 

    ngOnChanges():void { 
     map(this.element, this); 

     function map(element:Card, instance:CardComponent):void { 
      if (element) { 
       instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header); 

       instance.content = _.map(instance.element.content, (input:string):SafeHtml => { 
        return instance.sanitization.bypassSecurityTrustHtml(input); 
       }); 

       if (element.image) { 
        /* Here is the problem... I have also used bypassSecurityTrustUrl */ 
        instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image); 
       } else { 
        instance.image = null; 
       } 

      } 
     } 
    } 
}

請注意，當我剛剛綁定到使用[SRC = 「圖像」的模板，例如：

<div *ngIf="image"> 
    <img [src]="image"> 
</div>

和image通過使用bypassSecurityTrustUrl一切似乎運作良好......任何人都可以看到我做錯了什麼？

來源

2016-07-26 Mark Sandman

有一個開放的問題，僅打印該警告，如果確實有一些消毒： https://github.com/angular/angular/pull/10272

時，當什麼也沒有消毒打印此警告我沒有詳細閱讀。

來源

2016-07-26 15:09:28

對於那些可能來到這裏：該問題已得到解決。它只打印警告，如果它消毒的HTML並不是所有的時間。 – flamusdiu

您必須包裝在bypassSecurityTrustStyle整個url聲明：

<div class="header" *ngIf="image" [style.background-image]="image"></div>

而且具有

this.image = this.sanitization.bypassSecurityTrustStyle(`url(${element.image})`);

否則它不被視爲一個有效的樣式屬性

來源

2016-07-29 16:19:11 PierreDuc

PierreDuc，當背景圖像被繞過上面的任何智慧的話，但然後Angular2默默地忽略它？我可以發佈一個新問題，但我認爲它與你的答案相關。 –

@DavidPfeffer很難判斷出現錯誤的地方，而沒有看到任何代碼:)我在最新的angular2中使用此代碼，它仍然在工作.. – PierreDuc

我想通了。在繞過消毒之後，如果該值無效，Angular2會默默忽略它。 –

如果背景圖片線性梯度（*ngFor）

查看：

<div [style.background-image]="getBackground(trendingEntity.img)" class="trending-content"> 
</div>

類：

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser'; 

constructor(private _sanitizer: DomSanitizer) {} 

getBackground(image) { 
    return this._sanitizer.bypassSecurityTrustStyle(`linear-gradient(rgba(29, 29, 29, 0), rgba(16, 16, 23, 0.5)), url(${image})`); 
}

來源

2017-05-02 10:22:37

對於任何人誰已經是做什麼的警告提示你升級到角5之前做的，我不得不映射我SafeStyle在模板中使用它們之前，請鍵入string。在Angular 5之後，這不再是這種情況。我不得不改變我的模型有一個image: SafeStyle而不是image: string。我已經使用[style.background-image]屬性綁定並繞過整個網址的安全。

希望這可以幫助別人。

來源

2018-01-11 21:25:01

警告：消毒不安全的樣式值url

回答

相關問題