web-dev-qa-db-fra.com

Injecter <input> dans innerHTML angular 2

J'essaie d'injecter une balise HTML d'entrée avec Angular 2, voici mon projet:

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

Les .ts:

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

Voici le journal de la console: 

AVERTISSEMENT: la désinfection de HTML a effacé du contenu (voir http://g.co/ng/security#xss ).

J'essaie avec d'autres balises html comme <h3> et cela fonctionne parfaitement.

htmltypescriptangular
17
Alexy Vercruysse

Vous devez faire confiance à la HTML avant de l’injecter. Vous devez utiliser le DomSanitizer pour une telle chose. Un élément <h3> est considéré comme sûr. Un élément <input> n'est pas.

Changez votre FaxSendComponent en quelque chose comme ceci:

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){}
}

Et que votre modèle reste le même que celui-ci:

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

Un petit heads-up cependant:

AVERTISSEMENT: l'appel de cette méthode avec des données utilisateur non fiables expose votre application aux risques de sécurité XSS!

Si vous envisagez d'utiliser davantage cette technique, vous pouvez essayer d'écrire un Pipe pour remplir cette tâche.

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

   constructor(private _sanitizer: DomSanitizer){}  

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

Si vous avez un tuyau comme celui-ci, votre FaxSendComponent changera en ceci:

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

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

}
27
PierreDuc

créez le fichier sanitizing.ts lorsque vous l'utilisez pour lier html interne.

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);
  }
}

inscrivez maintenant ce module dans votre 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 { }

maintenant utiliser quand vous pouvez lier votre HTML par exemple. 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>
9
ketan chaudhari

Essayez d'utiliser des backticks - `- au lieu des guillemets simples - '-

0
vjawala