在RC.1中，无法使用绑定语法添加某些样式 [英] In RC.1 some styles can't be added using binding syntax

问题描述

样式

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

不再添加

推荐答案

更新(最终版2.0.0)

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"

更新

DomSanitizationService将在RC.6中重命名为DomSanitizer

DomSanitizationService is going to be renamed to DomSanitizer in RC.6

原始

此问题应在RC.2中修复

This should be fixed in RC.2

另请参见 Angular2开发人员指南-安全

Angular2引入了对CSS值和属性绑定(如RC.1中的[innerHTML]=...和[src]="...")的清除处理

Angular2 intruduced sanitization of CSS values and property binding like [innerHTML]=... and [src]="..." in RC.1

另请参见 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(...);

}

并绑定到该值，而不是不受信任的纯字符串.

and binding to this value instead the untrusted plain string.

这也可以包裹在类似的管道中

This can also be wrapped in a pipe like

@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>`;

尽管仍在工作:-[(正在进行中)

is still working though :-[ (it's work in progress)

柱塞示例 (Angular 2.0.0-rc -1)

Plunker example (Angular 2.0.0-rc-1)

另请参见 Angular 2安全跟踪问题

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

关于{{...}}

Hint about {{...}}

无法使用prop="{{sanitizedContent}}"绑定已清理内容，因为{{}}在分配值之前先对其进行字符串化处理，这会破坏清理.

Sanitized content can't be bound using prop="{{sanitizedContent}}" because {{}} stringyfies the value before it is assigned which breaks sanitization.

这篇关于在RC.1中，无法使用绑定语法添加某些样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！