oayoub84 / safe-pipe

Angular pipe for sanitizing your unsafe content

SafePipe

Resolve your safe content with Angular SafePipe (Demo)

Installation

1. Install the package via npm install safe-pipe or yarn add safe-pipe
2. Add SafePipeModule module to NgModule.imports.

E.g.

@NgModule({
  imports: [ SafePipeModule ]
})
export class AppModule { }

Usage

The SafePipe pipe accepts a value and sanitization type.

<elem [prop]="value | safe: sanitizationType"></elem>

You can sanitize any resource type supported by DomSanitizer.

Supported sanitization types:

• 'html' - uses DomSanitizer.bypassSecurityTrustHtml (docs)
• 'style' - uses DomSanitizer.bypassSecurityTrustStyle (docs)
• 'script' - uses DomSanitizer.bypassSecurityTrustScript (docs)
• 'url' - uses DomSanitizer.bypassSecurityTrustUrl (docs)
• 'resourceUrl' - uses DomSanitizer.bypassSecurityTrustResourceUrl (docs)

Full usage example:

// @file app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SafePipeModule } from 'safe-pipe';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    SafePipeModule,
    BrowserModule
  ]
  bootstrap: [ AppComponent ]
})
export class AppModule { }

// @file app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div [style.background-image]="'url(' + pictureUrl + ')' | safe: 'style'" class="pic bg-pic"></div>
    <img [src]="pictureUrl | safe: 'url'" class="pic" alt="Logo">
    <iframe [src]="catVideoEmbed | safe: 'resourceUrl'" width="640" height="390"></iframe>
    <pre [innerHTML]="htmlContent | safe: 'html'"></pre>
  `,
  styles: [
    `.pic { display: inline-block; width: 320px; }`,
    `.bg-pic { padding-top: 320px; }`
  ]
})
export class AppComponent {
  public htmlContent: string = `<h1>Lorem ipsum dolor sit amet.</h1>`;
  public pictureUrl: string = `https://angular.io/assets/images/logos/angular/angular.svg`;
  public catVideoEmbed: string = `https://www.youtube.com/embed/QH2-TGUlwu4"`;
}

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.