@it-era/ngx-safe-pipes
v0.3.1
Published
This library provide convenient pipes to bypass Angular built-in sanitization and get rid off the `unsafe value used in a ... context`.
Downloads
234
Readme
IT-era / NgxSafePipes
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.
Installation
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 {}
List of pipes
CAUTION: Calling thoses methods with untrusted user data exposes your application to XSS security risks!
SafeHtml
Usage :
<div [innerHTML]="trustedHtml | safeHtml"></div>
SafeUrl
Usage :
<img [attr.src]="trustedUrl | safeUrl">
NB: Usefull also for base64 images.
SafeResourceUrl
Usage :
<iframe [attr.src]="trustedResourceUrl | safeResourceUrl"></iframe>
SafeScript
Usage :
<script [attr.src]="trustedScript | safeScript"></script>
SafeStyle
Usage :
<div [attr.style]="trustedStyle | safeStyle"></div>
Safe
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>
Changelog
You can find it here.