在innerHTML angular 2中注入<input>

Posted 2023-03-13

【中文标题】在innerHTML angular 2中注入<input>

【英文标题】：Inject <input> in innerHTML angular 2

【发布时间】：2016-11-13 04:07:19

【问题描述】：

我正在尝试使用 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>，效果很好。

【问题讨论】：

为什么不检查警告信息中的链接？

我检查它，我尝试但它没有工作

我只是想说反引号不能解决这个问题。我太新了，无法在建议下发表评论。不过，反引号是一种很好的做法。

【参考方案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">';

【讨论】：

我认为这是解决方案，但我有一个错误，类型 'SafeHtml' 不能分配给类型 'string'。

@AlexyVercruysse 是的，我已经更新了我的答案。那只是一个 TypeScript 错误。 bypassSecurityTrustHtml 返回 SafeHtml，而不是 string。所以我不得不更改getter

上的返回值

这里是导入：import DomSanitizer, SafeHtml from '@angular/platform-browser';

我如何使用document.getElementsByTagName('head')[0].appendChild(script) 附加这个。因为我无法清理作为字符串的脚本变量

救命稻草。很棒的解决方案！

【参考方案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_imagesproduct_details.product_image" />
          </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>

【讨论】：

写一个sanitizing.ts的测试用例，如何导入或使用DomSanitizier？

【参考方案3】：

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

【讨论】：

反引号用于模板字符串（因此从您的 JS/TS 输出 HTML）。它并不总是需要，但我认为始终使用反引号是一个好习惯。

反引号不会做任何与清理 HTML 有关的事情，它们只是为您提供模板功能和多行字符串。 basarat.gitbooks.io/typescript/content/docs/…