Question

我正在尝试使用Angular 2注入输入HTML标记，这是我的项目：

    <div [innerHTML]="inputpdf"></div>

.ts：

export class FaxSendComponent  {
     inputpdf = '<input type="text" name="fname">';
     }

以下是来自控制台的日志：

警告：清理HTML会删除一些内容（请参阅 http://g.co/ng/security#xss）。

我尝试使用其他html标记，例如<h3>，但效果非常好。

Answer 1

在注入之前，您应该首先信任HTML。你必须使用DomSanitizer来做这件事。 <h3>元素被认为是安全的。 <input>元素不是。

将您的FaxSendComponent更改为以下内容：

export class FaxSendComponent  {

    private _inputpdf: string = '<input type="text" name="fname">';

    public get inputpdf() : SafeHtml {
       return this._sanitizer.bypassSecurityTrustHtml(this._inputpdf);
    }

    constructor(private _sanitizer: DomSanitizer){}
}

让你的模板与此保持一致：

<div [innerHTML]="inputpdf"></div>

虽然有点提醒：

警告：使用不受信任的用户数据调用此方法会使您的应用程序面临XSS安全风险！

如果您打算更多地使用此技术，可以尝试编写Pipe来完成此任务。

@Pipe({
    name: 'sanitizeHtml'
})
export class SanitizeHtml implements PipeTransform  {

   constructor(private _sanitizer: DomSanitizer){}  

   transform(v: string) : SafeHtml {
      return this._sanitizer.bypassSecurityTrustHtml(v); 
   } 
}

如果你有这样的管道，你的FaxSendComponent将改为：

@Component({
   selector: 'fax-send',
   template: `<div [innerHTML]="inputpdf | sanitizeHtml"></div>`
})
export class FaxSendComponent  {

    public inputpdf: string = '<input type="text" name="fname">';

}

Answer 2

当你将它用于绑定内部html时，
创建sanitizing.ts文件。

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

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

现在将此模块注册到app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { routes } from './app.routing';

import { SanitizeHtmlPipe } from './product_details/filter';

@NgModule({
  declarations: [
    SanitizeHtmlPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    CookieLawModule,
    routes
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在可以在绑定你的html时使用，例如。的 productDetails.html

<section class="multiple-img"> <div class="container" *ngIf="product_details"> <div class="row"> <h1 class="main-titel-text">Detail</h1> </div> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="product-box-div"> <div class="product-img-div"> <img src="{{image_url.product_images}}{{product_details.product_image}}" alt="Product"/> </div> <div class="product-name-div">Name:- {{ product_details.product_name }}</div> <div class="product-name-div">Price:- {{ product_details.product_price }}</div> <div class="product-name-div">Selling Price:- {{ product_details.product_discount_price }}</div> <div class="product-name-div" [innerHTML]="product_details.product_description | sanitizeHtml"></div> </div> </div> </div> </div> </section>

Answer 3

尝试使用反引号 - “ - 而不是单引号 - ' -

在innerHTML angular 2中注入<input />

3 个答案: