在 innerHTML angular 2 中注入 <input>

新手上路,请多包涵

我正在尝试使用 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> ,它运行良好。

原文由 Alexy Vercruysse 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 660
2 个回答

在注入之前,您应该首先信任 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">';

}

原文由 Poul Kruijt 发布,翻译遵循 CC BY-SA 3.0 许可协议

在将它用于绑定内部 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 例如时使用。 产品详情.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>

原文由 Ketan Chaudhari 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题