Safe HTML

Természetesen! A “Safe HTML Pipe” készítéséhez először szükségünk van az Angular DomSanitizer szolgáltatására, ami lehetővé teszi számunkra, hogy biztonságosan kezeljünk és jelenítsünk meg HTML kódot.

Ez egy egyszerű példa a “Safe HTML Pipe” készítésére:

safe-html.pipe.ts

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

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }

}

Ebben a példában a bypassSecurityTrustHtml metódus használatával mondjuk meg az Angularnak, hogy bízunk a bejövő HTML kódban és szeretnénk, ha azt biztonságos módon jelenítené meg.

Hogyan használjuk:

Adjuk hozzá a SafeHtmlPipe-t a modul declarations tömbjéhez, ahol használni szeretnénk.

@NgModule({
  declarations: [
    // ... egyéb komponensek
    SafeHtmlPipe
  ],
  // ...
})
export class YourModule { }

Most használhatjuk a pipe-ot a template-ben:

<div [innerHTML]="yourHtmlString | safeHtml"></div>

Ezzel a módszerrel a yourHtmlString változóban tárolt HTML kód biztonságosan jelenik meg a <div> elemen belül.

Figyelem: A bypassSecurityTrustHtml használatakor legyünk óvatosak. Csak akkor használjuk, ha teljesen biztosak vagyunk benne, hogy a bejövő HTML kód biztonságos és nem tartalmaz rosszindulatú kódokat.