webentwicklung-frage-antwort-db.com.de

Inject <Eingabe> in innerHTML-Winkel 2

Ich versuche ein Eingabe-HTML-Tag mit Angular 2 einzufügen, hier ist mein Projekt:

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

Die .ts:

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

Hier ist das Protokoll von der Konsole: 

WARNUNG: Durch die Bereinigung von HTML wurden einige Inhalte entfernt (siehe http://g.co/ng/security#xss ).

Ich versuche es mit anderen HTML-Tags wie <h3> und es funktioniert perfekt.

17

Sie sollten der HTML zuerst vertrauen, bevor Sie sie injizieren. Sie müssen die DomSanitizer für so etwas verwenden. Ein <h3>-Element gilt als sicher. Ein <input>-Element ist nicht vorhanden.

Ändern Sie Ihre FaxSendComponent folgendermaßen:

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

Und lassen Sie Ihre Vorlage gleich bleiben:

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

Ein bisschen Heads-Up:

WARNUNG: Wenn Sie diese Methode mit nicht vertrauenswürdigen Benutzerdaten aufrufen, ist Ihre Anwendung XSS-Sicherheitsrisiken ausgesetzt!

Wenn Sie diese Technik mehr verwenden möchten, können Sie versuchen, eine Pipe zu schreiben, um diese Aufgabe zu erfüllen.

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

   constructor(private _sanitizer: DomSanitizer){}  

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

Wenn Sie eine solche Pipe haben, ändert sich Ihre FaxSendComponent wie folgt:

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

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

}
27
PierreDuc

erstellen Sie die Datei sanitizing.ts, wenn Sie sie für bind inneres HTML verwenden.

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

registrieren Sie dieses Modul jetzt in Ihrer 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 { }

verwenden Sie jetzt, wenn Sie Ihre HTML binden können, z. 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

Verwenden Sie Backticks anstelle der einfachen Anführungszeichen.

0
vjawala