风格就像
<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"
不再添加
绕过消毒剂信任任何内容可能是一个html" target="_blank">安全问题。由于Angular不是一个专门的消毒库,所以它对可疑内容过于热心,不愿承担任何风险。例如,它几乎删除了所有属性。您可以将消毒委托给一个专用的库——DOMPrify。这是我制作的一个包装器库,可以轻松地将DOMPurify与Angular一起使用。
https://github.com/TinkoffCreditSystems/ng-dompurify
它还有一个管道,可以对HTML进行声明性清理:
<div [innerHtml]="value | dompurify"></div>
需要记住的一点是,DOMPurify非常适合清理HTML/SVG,但不适合清理CSS。因此,您可以使用Angular的CSS消毒剂来处理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.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"
使现代化
DomSanitisationService
将在RC.6中重命名为DomSanitiser
起初的
这应该在RC.2中修复
另请参见Angular2开发者指南-安全
Angular2引入了CSS值和属性绑定的清理,比如[innerHTML]=
和
[src]=“…”
在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(...);
}
并绑定到此值,而不是不受信任的纯字符串。
也可以将其包裹在管道中,如
@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示例(Angular 2.0.0-rc-1)
另请参见Angular 2安全跟踪问题
和https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
关于
{…}的提示
无法使用
prop=“{{sanitizedContent}}”
绑定经过清理的内容,因为{{}}
在分配值之前严格限制该值,这会破坏清理。
问题内容: 像 不再添加 问题答案: 更新(最终版2.0.0) 更新 将在RC.6中重命名为 原版的 Angular2 intruduced CSS值的消毒和财产样结合,并在RC.1 这些值可以通过使用标记为受信任 并绑定到该值,而不是不受信任的纯字符串。 这也可以包裹在类似 与 提示 无法使用已清理的内容,因为在分配值之前,stringyfies值会破坏清理。
问题2B:如果我想指出“char that not before quote”,我是否应该使用“.<!before$quote>”而不是“<!before$quote>”。??
问题内容: 我假设这是不可能的,但是如果万一出现这种情况,或者某个人袖手旁观,有没有办法使用CSS来定位某些字符? 例如,将段落中的所有字母设为红色,或者在我的特殊情况下,将所有标记为class的元素都设为红色。 问题答案: 这在CSS中是不可能的。您唯一的选择是,这不会削减它。使用JavaScript或(如您在注释中所述)使用服务器端语言。
主要内容:Vue.js class,class 属性绑定,实例 1,实例 2,实例 3,实例 4,实例 5,实例 6,,Vue.js style(内联样式),实例 7,实例 8,实例 9Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定 我们可以为
主要内容:Vue.js class,class 属性绑定,实例 1,实例 2,实例 3,实例 4,实例 5,实例 6,,Vue.js style(内联样式),实例 7,实例 8,实例 9,组件上使用 class 属性,实例 10,实例 11Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。 v-bi
本文向大家介绍aurelia 绑定样式,包括了aurelia 绑定样式的使用技巧和注意事项,需要的朋友参考一下 示例 使用Aurelia绑定到浏览器本机style属性。如果使用字符串插值,则应使用css别名,以便样式在Internet Explorer中起作用。 样式字符串 样式对象 字符串插值 与上面的字符串绑定非常相似,这使您可以使用字符串插值来绑定到样式。如果任何值更改,它们将在视图中进行相