在 RC.1 中,某些样式无法使用绑定语法添加

Posted

技术标签:

【中文标题】在 RC.1 中,某些样式无法使用绑定语法添加【英文标题】:In RC.1 some styles can't be added using binding syntax 【发布时间】:2016-09-01 19:00:30 【问题描述】:

样式类似

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

不再添加

【问题讨论】:

【参考方案1】:

绕过消毒剂信任任何内容可能是一个安全问题。由于 Angular 不是一个专门的清理库,因此不冒任何风险对可疑内容过于热衷。例如,它删除了几乎所有的属性。您可以将清理工作委托给一个专用库——DOMPurify。这是我制作的一个包装器库,可轻松将 DOMPurify 与 Angular 结合使用。

https://github.com/TinkoffCreditSystems/ng-dompurify

它还有一个管道来声明性地清理 html

<div [innerHtml]="value | dompurify"></div>

要记住的一点是,DOMPurify 非常适合清理 HTML/SVG,但不是 CSS。所以你可以提供 Angular 的 CSS sanitizer 来处理 CSS:

import NgModule, ɵ_sanitizeStyle from '@angular/core';
import SANITIZE_STYLE from '@tinkoff/ng-dompurify';

@NgModule(
    // ...
    providers: [
        
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        ,
    ],
    // ...
)
export class AppModule 

它是内部的——hense ɵ 前缀,但这也是 Angular 团队在他们自己的包中使用它的方式。

【讨论】:

【参考方案2】:

更新(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-browser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

更新

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

原创

这应该在 RC.2 中修复

另见Angular2 Developer Guide - Security


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

另见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>`;

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

Plunker example (Angular 2.0.0-rc-1)

另见Angular 2 Security Tracking Issue

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

提示...

无法使用prop="sanitizedContent" 绑定已清理的内容,因为 在分配之前对值进行字符串化,这会破坏清理。

【讨论】:

另见***.com/questions/37238757/… 管道是个好主意。谢谢! 由于某种原因,当我尝试使用此服务时,依赖注入不起作用。我没有获得服务实现,而是获得了抽象服务(这是一个空对象)。你知道为什么会这样吗?我错过了什么吗? @yarons 您能否创建一个新问题并添加一些代码来演示您实际在做什么。如果可能的话,一个允许复制的 Plunker。 @SrAxi 你是对的。那时它也可以正常工作

以上是关于在 RC.1 中,某些样式无法使用绑定语法添加的主要内容,如果未能解决你的问题,请参考以下文章

在 RC.1 中,某些样式无法使用绑定语法添加

Vue绑定class与绑定内联样式--v-bind

由于权限被拒绝,无法绑定到某些端口

窗口样式之去掉某些窗口样式

React Native 某些样式导致视图无法呈现

Vim语法文件:向iskeyword添加某些字符无效