embarq/safe-pipe

Angular pipe for sanitizing your unsafe content

SafePipe

Resolve your safe content with Angular SafePipe (Demo)

Compatibility

This package is compatible with angular >=17.

For angular >=13 use [email protected].

For angular <13 use [email protected]

Installation

1. Install the package via npm install safe-pipe or yarn add safe-pipe
2. Add SafePipe standalone to Component.imports.

E.g.

@Component({
  standalone: true,
  imports: [ SafePipe ]
})
export class MyComponent { }

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.

Here're the previous package's version examples:

• Demo v2
• Demo v1

Development

This library was generated with Angular CLI version 9.0.7.

Code scaffolding

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

Note: Don't forget to add --project safe-pipe or else it will be added to the default project in your angular.json file.

Build

Run ng build safe-pipe to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build safe-pipe, go to the dist folder cd dist/safe-pipe and run npm publish.

Running unit tests

Run ng test safe-pipe to execute the unit tests via Karma.

Further help

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

safe-pipe's Issues

use - standalone

The migration to standalone component would be a real plus for this library

@embarq I'd be glad to do a pull-request if you're ready to merge it :) Let me know

Missing License file

The license file is missing in the latest master version. Could you please re-add it with the correct license phrase.

The pipe 'safe' could not be found!

hello ,I have read the readme doc, and follow the step, but i got this error

zone-evergreen.js:172 Uncaught Error: The pipe 'safe' could not be found!
    at getPipeDef$1 (core.js:36622)
    at Module.ɵɵpipe (core.js:36585)
    at AgreementDialogComponent_Template (agreement-dialog.component.html:2)
    at executeTemplate (core.js:11937)
    at renderView (core.js:11723)
    at renderComponent (core.js:13239)
    at renderChildComponents (core.js:11526)
    at renderView (core.js:11749)
    at TemplateRef.createEmbeddedView (core.js:15253)
    at ViewContainerRef.createEmbeddedView (core.js:15360)

I was use this in agreement-dialog.component, and it is a sub component in shared file
this is my agreement-dialog.component

url: string;
  signed_agreement:boolean = true;

  constructor(private sanitizer:DomSanitizer, private http: WebApiService) { }

  ngOnInit() {
    this.http.getAgreementById(this.agreementId).subscribe(res => {
      // this.url = this.sanitizer.bypassSecurityTrustResourceUrl(res.data);
      this.url = res.data;
    });
  }

and this is my package.json

"dependencies": {
    "@angular/animations": "^9.0.2",
    "@angular/cdk": "^9.1.0",
    "@angular/common": "^9.0.2",
    "@angular/compiler": "^9.0.2",
    "@angular/core": "^9.0.2",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "^9.0.2",
    "@angular/localize": "^9.0.3",
    "@angular/platform-browser": "^9.0.2",
    "@angular/platform-browser-dynamic": "^9.0.2",
    "@angular/router": "^9.0.2",
    "@ng-bootstrap/ng-bootstrap": "^6.0.0",
    "angularx-qrcode": "^2.1.0",
    "core-js": "^3.6.4",
    "pdfjs-dist": "^2.0.489",
    "punycode": "^2.1.1",
    "rxjs": "^6.5.4",
    "safe-pipe": "^0.3.0",
    "tslib": "^1.11.0",
    "zone.js": "~0.10.2"
  },

thank you

Probably unneccessary redefinition of SecurityContext

Here:

safe-pipe/projects/safe-pipe/src/lib/safe-pipe.pipe.ts

Line 11 in d55b405

export type SafePipeType

Is a redefinition of SecurityContext from Angular which already defines this:

https://github.com/angular/angular/blob/3a60063a54d850c50ce962a8a39ce01cfee71398/packages/core/src/sanitization/security.ts#L18

You could probably reduce the weight of your pipe by using the Angular definition. Just FYI.

Doesn't work with Angular 13.2.x

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^13.2.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"~13.1.1" from [email protected]
npm ERR! node_modules/safe-pipe
npm ERR!   safe-pipe@"*" from the root project```

As a workaround you can downgrade all angular packages to `13.1.2` but yeah.

Remove source maps from build artifact

There are source maps referenced in the release bundles. Please remove them they lead to warnings and confusion of debuggers such as

DevTools failed to parse SourceMap: https://<server-name>:8444/home/embarq/.projects/safe-pipe/safe.pipe.js.map

Unable to execute this

how can I execute this?

Support for Angular 12

I wanted update version on angular to 12 so I've run the command:

ng update @angular/core@12 @angular/cli@12

It failed with message:

Package "safe-pipe" has an incompatible peer dependency to "@angular/platform-browser" (requires "~9.1.1" (extended), would install "12.1.4")

Add angular 9.1.0 support

Currently angular dependency is ~9.0.7. Basically update the version to 9.1 should be safe

use: npm

Description

Is it possible for this library to be using npm instead of pnpm for the package-lock generation.

pnpm seems to create an error while trying to download the library, inside a monorepo.

The way it's generated create an npm ERR! Found: safe-pipe@undefined

I understand the use of pnpm but would only use it personally and not on public repository.
Also it lower the possibility of people being able to help on further release.

Kindly regards

ERESOLVE unable to resolve dependency tree

npm install safe-pipe

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^11.2.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"~9.1.1" from [email protected]
npm ERR! node_modules/safe-pipe
npm ERR!   safe-pipe@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.