File

src/pipes/universal-safe/universal-safe.pipe.ts

Description

A custom Angular pipe for sanitizing and displaying trusted content. This pipe can be used to bypass security and render trusted HTML, styles, scripts, URLs, or resource URLs.

Example :
// In your component template:
// Assuming 'htmlContent' is a string containing trusted HTML.
<div [innerHTML]="htmlContent | universalSafe:'html'"></div>

Metadata

Methods

Public transform
transform(value?: string, type: string)

Sanitizes and returns trusted content based on the specified type.

Parameters :
Name Type Optional Default value Description
value string Yes
  • The content to sanitize and display.
type string No 'html'
  • The type of content to sanitize. Can be 'html', 'style', 'script', 'url', or 'resourceUrl'.
Returns : SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl
  • The sanitized and trusted content.

Properties

Protected sanitizer
Default value : inject(DomSanitizer)

The Angular DOM sanitizer service.

import { inject, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl } from '@angular/platform-browser';

/**
 * A custom Angular pipe for sanitizing and displaying trusted content.
 * This pipe can be used to bypass security and render trusted HTML, styles, scripts, URLs, or resource URLs.
 *
 * @example
 * // In your component template:
 * // Assuming 'htmlContent' is a string containing trusted HTML.
 * <div [innerHTML]="htmlContent | universalSafe:'html'"></div>
 *
 * @param {string} value - The content to sanitize and display.
 * @param {string} type - The type of content to sanitize. Can be 'html', 'style', 'script', 'url', or 'resourceUrl'.
 * @returns {SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl} - The sanitized and trusted content.
 */
@Pipe({
  name: 'universalSafe',
  standalone: true,
})
export class UniversalSafePipe implements PipeTransform {
  /**
   * The Angular DOM sanitizer service.
   */
  protected sanitizer = inject(DomSanitizer);

  /**
   * Sanitizes and returns trusted content based on the specified type.
   *
   * @param {string} value - The content to sanitize and display.
   * @param {string} type - The type of content to sanitize. Can be 'html', 'style', 'script', 'url', or 'resourceUrl'.
   * @returns {SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl} - The sanitized and trusted content.
   * @throws {Error} - If an invalid `type` is provided.
   */
  public transform(value?: string, type = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    if (!value) {
      return '';
    }
    switch (type) {
      case 'html':
        return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Invalid Safe sanitizer: ${type}`);
    }
  }
}

results matching ""

    No results matching ""