{"id":13424215,"url":"https://github.com/Tinkoff/ng-dompurify","last_synced_at":"2025-03-15T18:34:18.225Z","repository":{"id":38699217,"uuid":"200180633","full_name":"Tinkoff/ng-dompurify","owner":"Tinkoff","description":"Inclusive Angular API for DOMPurify","archived":true,"fork":false,"pushed_at":"2023-05-26T03:27:39.000Z","size":3636,"stargazers_count":85,"open_issues_count":5,"forks_count":6,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-12T00:08:46.241Z","etag":null,"topics":["dompurify","domsanitizer","hacktoberfest","html","sanitizer","svg","xss"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/github/TinkoffCreditSystems/ng-dompurify/tree/master/projects/demo","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/Tinkoff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-08-02T06:44:03.000Z","updated_at":"2024-02-14T15:39:07.000Z","dependencies_parsed_at":"2024-01-28T09:53:05.493Z","dependency_job_id":null,"html_url":"https://github.com/Tinkoff/ng-dompurify","commit_stats":null,"previous_names":["tinkoffcreditsystems/ng-dompurify"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinkoff%2Fng-dompurify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinkoff%2Fng-dompurify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinkoff%2Fng-dompurify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinkoff%2Fng-dompurify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tinkoff","download_url":"https://codeload.github.com/Tinkoff/ng-dompurify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243775789,"owners_count":20346262,"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":["dompurify","domsanitizer","hacktoberfest","html","sanitizer","svg","xss"],"created_at":"2024-07-31T00:00:50.274Z","updated_at":"2025-03-15T18:34:13.196Z","avatar_url":"https://github.com/Tinkoff.png","language":"TypeScript","funding_links":[],"categories":["Инструменты"],"sub_categories":[],"readme":"# NgDompurify\n\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@tinkoff/ng-dompurify)](https://bundlephobia.com/result?p=@tinkoff/ng-dompurify)\n[![Coverage Status](https://img.shields.io/coveralls/github/TinkoffCreditSystems/ng-dompurify?branch=master\u0026style=flat-square)](https://coveralls.io/github/TinkoffCreditSystems/ng-dompurify?branch=master)\n[![npm version](https://img.shields.io/npm/v/@tinkoff/ng-dompurify.svg?style=flat-square)](https://npmjs.com/package/@tinkoff/ng-dompurify)\n[![code style: @tinkoff/linters](https://img.shields.io/badge/code%20style-%40tinkoff%2Flinters-blue?style=flat-square)](https://github.com/TinkoffCreditSystems/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 @tinkoff/ng-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 '@tinkoff/ng-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 '@tinkoff/ng-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 '@tinkoff/ng-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 '@tinkoff/ng-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 '@tinkoff/ng-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 '@tinkoff/ng-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**@tinkoff/ng-dompurify** is a part of [Taiga UI](https://github.com/Tinkoff/taiga-ui) libraries family which is backed and used by a\nlarge 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 **@tinkoff/ng-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/TinkoffCreditSystems/ng-dompurify/tree/master/projects/demo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTinkoff%2Fng-dompurify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTinkoff%2Fng-dompurify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTinkoff%2Fng-dompurify/lists"}