{"id":19075623,"url":"https://github.com/taiga-family/ng-dompurify","last_synced_at":"2025-04-29T23:28:53.208Z","repository":{"id":187415254,"uuid":"676868069","full_name":"taiga-family/ng-dompurify","owner":"taiga-family","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-28T08:07:13.000Z","size":11090,"stargazers_count":9,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-28T09:33:44.817Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taiga-family.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-08-10T07:40:38.000Z","updated_at":"2025-03-14T14:29:40.000Z","dependencies_parsed_at":"2024-01-31T02:25:57.372Z","dependency_job_id":"19319720-dce2-406c-9d44-b745d0b4b8c1","html_url":"https://github.com/taiga-family/ng-dompurify","commit_stats":null,"previous_names":["taiga-family/ng-dompurify"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiga-family%2Fng-dompurify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiga-family%2Fng-dompurify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiga-family%2Fng-dompurify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiga-family%2Fng-dompurify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taiga-family","download_url":"https://codeload.github.com/taiga-family/ng-dompurify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251599046,"owners_count":21615461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular"],"created_at":"2024-11-09T01:55:19.866Z","updated_at":"2025-04-29T23:28:53.181Z","avatar_url":"https://github.com/taiga-family.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components","Recently Updated"],"sub_categories":["Pipes","[Nov 22, 2024](/content/2024/11/22/README.md)"],"readme":"# NgDompurify\n\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@taiga-ui/dompurify)](https://bundlephobia.com/result?p=@taiga-ui/dompurify)\n[![npm version](https://img.shields.io/npm/v/@taiga-ui/dompurify.svg?style=flat-square)](https://npmjs.com/package/@taiga-ui/dompurify)\n[![code style: @tinkoff/linters](https://img.shields.io/badge/code%20style-%40tinkoff%2Flinters-blue?style=flat-square)](https://github.com/taiga-family/linters)\n\n\u003e This library implements `DOMPurify` as Angular `Sanitizer` or `Pipe`. It delegates sanitizing to `DOMPurify` and\n\u003e supports the same configuration. See [DOMPurify](https://github.com/cure53/DOMPurify).\n\nRead more about Sanitization in Angular and how ng-dompurify works in\n[this article](https://medium.com/angular-in-depth/warning-sanitizing-html-stripped-some-content-and-how-to-deal-with-it-properly-10ff77012d5a).\n\n## Install\n\n```\nnpm install @taiga-ui/dompurify\n```\n\nIf you do not have `dompurify` in your package, install also:\n\n```\nnpm install dompurify\nnpm install --save-dev @types/dompurify\n```\n\n## How to use\n\nEither use pipe to sanitize your content when binding to `[innerHTML]` or use `NgDompurifySanitizer` service manually.\n\n```typescript\nimport {NgDompurifyModule} from '@taiga-ui/dompurify';\n\n@NgModule({\n  imports: [NgDompurifyModule],\n})\nexport class MyModule {}\n```\n\nAs a pipe:\n\n```html\n\u003cdiv [innerHtml]=\"value | dompurify\"\u003e\u003c/div\u003e\n```\n\nAs a service:\n\n```typescript\nimport {SecurityContext} from '@angular/core';\nimport {NgDompurifySanitizer} from '@taiga-ui/dompurify';\n\n@Component({})\nexport class MyComponent {\n  constructor(private readonly dompurifySanitizer: NgDompurifySanitizer) {}\n\n  purify(value: string): string {\n    return this.dompurifySanitizer.sanitize(SecurityContext.HTML, value);\n  }\n}\n```\n\nYou can also substitute Angular `Sanitizer` with `DOMPurify` so it is automatically used all the time:\n\n```typescript\nimport {NgModule, Sanitizer} from '@angular/core';\nimport {NgDompurifySanitizer} from '@taiga-ui/dompurify';\n// ...\n\n@NgModule({\n  // ...\n  providers: [\n    {\n      provide: Sanitizer,\n      useClass: NgDompurifySanitizer,\n    },\n  ],\n  // ...\n})\nexport class AppModule {}\n```\n\n## Configuring\n\nConfig for `NgDompurifySanitizer` or `NgDompurifyDomSanitizer` can be provided using token `DOMPURIFY_CONFIG`.\n`NgDompurifyPipe` supports passing DOMPurify config as an argument to override config from DI.\n\n```typescript\nimport {NgModule, Sanitizer} from '@angular/core';\nimport {NgDompurifySanitizer, DOMPURIFY_CONFIG} from '@taiga-ui/dompurify';\n// ...\n\n@NgModule({\n  // ...\n  providers: [\n    {\n      provide: Sanitizer,\n      useClass: NgDompurifySanitizer,\n    },\n    {\n      provide: DOMPURIFY_CONFIG,\n      useValue: {FORBID_ATTR: ['id']},\n    },\n  ],\n  // ...\n})\nexport class AppModule {}\n```\n\n## CSS sanitization\n\nDOMPurify does not support sanitizing CSS. Angular starting version 10 dropped CSS sanitation as something that presents\nno threat in supported browsers. You can still provide a handler to sanitize CSS rules values upon binding if you want\nto:\n\n```typescript\nimport {NgModule, Sanitizer} from '@angular/core';\nimport {NgDompurifySanitizer, SANITIZE_STYLE} from '@taiga-ui/dompurify';\n\n@NgModule({\n  // ...\n  providers: [\n    {\n      provide: Sanitizer,\n      useClass: NgDompurifySanitizer,\n    },\n    {\n      provide: SANITIZE_STYLE,\n      useValue: yourImplementation, // \u003c---\n    },\n  ],\n  // ...\n})\nexport class AppModule {}\n```\n\n## Hooks\n\nDOMPurify supports various hooks. You can provide them using `DOMPURIFY_HOOKS` token:\n\n```typescript\nimport {NgModule, Sanitizer} from '@angular/core';\nimport {NgDompurifySanitizer, DOMPURIFY_HOOKS, SANITIZE_STYLE} from '@taiga-ui/dompurify';\n\n@NgModule({\n  // ...\n  providers: [\n    {\n      provide: Sanitizer,\n      useClass: NgDompurifySanitizer,\n    },\n    {\n      provide: SANITIZE_STYLE,\n      useValue: yourImplementation,\n    },\n    {\n      provide: DOMPURIFY_HOOKS,\n      useValue: [\n        {\n          name: 'beforeSanitizeAttributes',\n          hook: (node: Element) =\u003e {\n            node.removeAttribute('id');\n          },\n        },\n      ],\n    },\n  ],\n  // ...\n})\nexport class AppModule {}\n```\n\n## Maintained\n\n**@taiga-ui/dompurify** is a part of [Taiga UI](https://github.com/taiga-family/taiga-ui) libraries family which is\nbacked and used by a large enterprise. This means you can rely on timely support and continuous development.\n\n## License\n\n🆓 Feel free to use our library in your commercial and private applications\n\nAll **@taiga-ui/dompurify** packages are covered by [Apache 2.0](/LICENSE)\n\nRead more about this license [here](https://choosealicense.com/licenses/apache-2.0/)\n\n## Demo\n\nYou can see live demo here: https://stackblitz.com/github/taiga-family/ng-dompurify/tree/master/projects/demo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiga-family%2Fng-dompurify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaiga-family%2Fng-dompurify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiga-family%2Fng-dompurify/lists"}