我有一个textarea
当用户将键入一些文字。文字不能的JavaScript或HTML等。我想手动消毒数据,并将其保存为一个字符串。
我无法弄清楚如何使用DomSanitizationService
手动清理我的数据。
如果我做{{ textare_text }}
在页面上然后将数据正确消毒。
我如何做手工的string
我有吗?
您可以按如下消毒HTML:
import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `
<div [innerHTML]="_htmlProperty"></div>
`
})
export class AppComponent {
_htmlProperty: string = 'AAA<input type="text" name="name">BBB';
constructor(private _sanitizer: DomSanitizer){ }
public get htmlProperty() : SafeHtml {
return this._sanitizer.sanitize(SecurityContext.HTML, this._htmlProperty);
}
}
从你的意见,你其实是想逃避不消毒。
为此,check this plunker, where we have both escaping and sanitization。
import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `Original, using interpolation (double curly braces):<b>
<div>{{ _originalHtmlProperty }}</div>
</b><hr>Sanitized, used as innerHTML:<b>
<div [innerHTML]="sanitizedHtmlProperty"></div>
</b><hr>Escaped, used as innerHTML:<b>
<div [innerHTML]="escapedHtmlProperty"></div>
</b><hr>Escaped AND sanitized used as innerHTML:<b>
<div [innerHTML]="escapedAndSanitizedHtmlProperty"></div>
</b>`
})
export class AppComponent {
_originalHtmlProperty: string = 'AAA<input type="text" name="name">BBB';
constructor(private _sanitizer: DomSanitizer){ }
public get sanitizedHtmlProperty() : SafeHtml {
return this._sanitizer.sanitize(SecurityContext.HTML, this._originalHtmlProperty);
}
public get escapedHtmlProperty() : string {
return this.escapeHtml(this._originalHtmlProperty);
}
public get escapedAndSanitizedHtmlProperty() : string {
return this._sanitizer.sanitize(SecurityContext.HTML, this.escapeHtml(this._originalHtmlProperty));
}
escapeHtml(unsafe) {
return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">")
.replace(/"/g, """).replace(/'/g, "'");
}
}
上面使用的HTML escaping function转义字符相同的angular code does(不幸的是,他们避开功能是不公开的,所以我们不能使用它)。
在角最后你可以使用这样的:
import { DomSanitizer } from '@angular/platform-browser';
import { SecurityContext } from '@angular/core';
constructor(private _sanitizer: DomSanitizer){}
var title = "<script> alert('Hello')</script>"
title = this._sanitizer.sanitize(SecurityContext.HTML, title);
在角^ 2.3.1
具有使用了bootstrap4进度视图。看到,在例子中,我们需要style.width的值。
<!-- View HTML-->
<div class="progress">
<div class="progress-bar" role="progressbar" [style.width]="getProgress('style')" aria-valuenow="getProgress()" aria-valuemin="0" aria-valuemax="100"></div>
</div>
我们需要消毒这个style.width值。我们需要使用DomSanitizer消毒的价值和SecurityContext的指定范围内。在这个例子中,背景是风格。
// note that we need to use SecurityContext and DomSanitizer
// SecurityContext.STYLE
import { Component, OnInit, Input } from '@angular/core';
import { SecurityContext} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-challenge-progress',
templateUrl: './challenge-progress.component.html',
styleUrls: ['./challenge-progress.component.sass']
})
export class ChallengeProgressComponent implements OnInit {
@Input() data: any;
constructor(private _sanitizer: DomSanitizer) { }
ngOnInit() {
}
getProgress(type: string): any {
if(type === 'style') {
// here is the line you are looking for
return this._sanitizer.sanitize(SecurityContext.STYLE,this._getProgress()+'%');
}
return this._getProgress();
}
private _getProgress():number {
if(this.data) {
return this.data.goal_total_current/this.data.goal*100;
}
return 0;
}
}