web-dev-qa-db-ja.com

警告：安全でないスタイル値のURLをサニタイズする

Angular 2アプリのコンポーネントテンプレートでDIVの背景画像を設定したいです。しかし、コンソールに次のような警告が表示され続けても望みどおりの効果が得られません。Angular2のセキュリティ制限のために動的CSS背景画像がブロックされているのか、HTMLテンプレートが壊れているのかわかりません。

これは私のコンソールに表示される警告です（私の画像のURLを/img/path/is/correct.pngに変更しました：

警告：安全でないスタイル値のURLをサニタイズする（SafeValueは[property] = binding：/img/path/is/correct.pngを使用する必要があります（ http://g.co/ng/security#xss を参照） （ http://g.co/ng/security#xss を参照）。

重要なのは、Angular 2の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] = "image"を使用してテンプレートにバインドしたばかりの場合は、次のようになります。

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

そしてimageはbypassSecurityTrustUrlを使用して渡されましたが、すべてうまくいくように見えました。

typescriptangularxss
71
Mark Sandman

urlステートメント全体をbypassSecurityTrustStyleでラップする必要があります。

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

そして持っている

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

それ以外の場合は、有効なスタイルプロパティとは見なされません。

80
PierreDuc

背景画像が線形グラデーションの場合（*ngFor）

表示：

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

Class：

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})`);
}
38
Swapnil Patwa

これを使用してください<div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>これは私にとって問題を解決しました。

23
Sammy-Rogers Geek

チェック this Angular2用の便利なパイプ：使い方：

  1. SafePipeコードで、DomSanitizationServiceをDomSanitizerに置き換えます。

  2. SafePipeの場合はNgModuleを入力してください

  3. <div [style.background-image]="'url(' + your_property + ')' | safe: 'style'"></div>

7
SimoneMSR

実際にサニタイズされたものがある場合にのみ、この警告を印刷するという未解決の問題があります。 https://github.com/angular/angular/pull/10272

何も消毒されていないときにこの警告が印刷されるとき、私は詳細に読みませんでした。

3
Günter Zöchbauer

https://angular.io/api/platform-b​​rowser/DomSanitizer のドキュメントに基づくと、これを行う正しい方法はsanitizeを使用することです。少なくともAngular 7（これが以前から変わったかどうかわからない）。これは私のために働いた：

import { Component, OnInit, Input, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

constructor(
    private sanitizer: DomSanitizer
) { }

this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + this.image + ')');

SecurityContextについては、 https://angular.io/api/core/SecurityContext を参照してください。基本的にはこれだけの列挙型です。

enum SecurityContext {
  NONE: 0
  HTML: 1
  STYLE: 2
  SCRIPT: 3
  URL: 4
  RESOURCE_URL: 5
}
1
Dovev Hefetz

Angular 7のImageタグに動的URLを追加しているときに同じ問題が発生しました。私はよく検索してこの解決策を見つけました。

まず、コンポーネントファイルの以下のコードを書きます。

constructor(private sanitizer: DomSanitizer) {}
public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

今、あなたのhtml画像タグに、あなたはこのように書くことができます。

<img class="image-holder" [src]=getSantizeUrl(item.imageUrl) />

あなたはitem.imageUrlの代わりにあなたの要求通りに書くことができます

このサイトから参照を得ました。 動的URL 。このソリューションがお役に立てば幸いです:)

1
Arjun

Angular 5にアップグレードする前に、警告で推奨されることをすでに行っている人は、テンプレートで使用する前にSafeStyle型をstringにマッピングする必要がありました。 Angular 5以降、これは当てはまりません。 image: SafeStyleの代わりにimage: stringを持つようにモデルを変更しなければなりませんでした。私はすでに[style.background-image]プロパティバインディングを使用していて、URL全体でセキュリティを迂回していました。

これが誰かに役立つことを願っています。

1
Jake Smith