web-dev-qa-db-ja.com

RC.1では、バインド構文を使用して一部のスタイルを追加できません

のようなスタイル

<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"

もう追加されていません

cssangular
65
Günter Zöchbauer

update（2.0.0 final）

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
    // return this.sanitizer.bypassSecurityTrustHtml(html);
    // return this.sanitizer.bypassSecurityTrustScript(html);
    // return this.sanitizer.bypassSecurityTrustUrl(html);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(html);
  }
}

https://angular.io/api/platform-b​​rowser/DomSanitizer も参照してください

<div [innerHTML]="someHtml | safeHtml"

update

DomSanitizationServiceはRC.6でDomSanitizerに名前が変更されます

オリジナル

これはRC.2で修正する必要があります

Angular2開発者ガイド-セキュリティ も参照してください。

Angular2は、RC.1の[innerHTML]=...や[src]="..."のようなCSS値とプロパティバインディングのサニタイズを侵入させました

こちらもご覧ください https://github.com/angular/angular/issues/8491#issuecomment-217467582

DomSanitizer.bypassSecurityTrustStyle(...)を使用して、値を信頼済みとしてマークできます

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(sanitizer: DomSanitizationService) {
  this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')');
  // for HTML
  // this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);

}

信頼できないプレーン文字列ではなく、この値にバインドします。

これは次のようなパイプで包むこともできます

@Pipe({name: 'safeStyle'})
export class Safe {
  constructor(private sanitizer:Sanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustHtml(style);
    // return this.sanitizer.bypassSecurityTrustScript(value);
    // return this.sanitizer.bypassSecurityTrustUrl(value);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}

<div [ngStyle]="someStyle | safeStyle"></div>

と

someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;

ただし、まだ機能しています：-[（進行中です）

プランカーの例 （Angular 2.0.0-rc-1）

Angular 2 Security Tracking Issue も参照してください。

および https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/DomSanitizer-class.html

{{...}}に関するヒント

サニタイズされたコンテンツはprop="{{sanitizedContent}}"を使用してバインドできません。これは、{{}}が割り当てられる前に値を文字列化するため、サニタイズが中断されるためです。

106
Günter Zöchbauer