This library provide convenient pipes to bypass Angular built-in sanitization and get rid off the unsafe value used in a ... context.

This package is a part of the IT-era/ngx packages suite.

This package is available through the npm registry :

npm i @it-era/ngx-safe-pipes

Then add the NgxSafePipesModule into the imports array of your module (containing the template to fix) :

import { NgxSafePipesModule } from '@it-era/ngx-safe-pipes'

@NgModule({
  imports: [
    NgxSafePipesModule,
    // ...
  ],
})
export class YourModule {}

CAUTION: Calling thoses methods with untrusted user data exposes your application to XSS security risks!

Usage :

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

Usage :

<img [attr.src]="trustedUrl | safeUrl">

NB: Usefull also for base64 images.

Usage :

<iframe [attr.src]="trustedResourceUrl | safeResourceUrl"></iframe>

Usage :

<script [attr.src]="trustedScript | safeScript"></script>

Usage :

<div [attr.style]="trustedStyle | safeStyle"></div>

Alternatively, you could use the generic SafePipe with the following syntax:

 <div [innerHTML]="trustedHtml | safe: 'html'"></div>
 <div [attr.style]="trustedStyle | safe: 'style'"></div>
 <script [attr.src]="trustedScript | safe: 'script'"></script>
 <img [attr.src]="trustedUrl | safe: 'url'">
 <iframe [attr.src]="trustedResourceUrl | safe: 'resourceUrl'"></iframe>

You can find it here.