feat: angular support - #269
Conversation
|
9028b8d to
01fc3a7
Compare
| this.renderer.setProperty( | ||
| this.el.nativeElement, | ||
| 'innerHTML', | ||
| parsedContent |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 12 months ago
To fix the vulnerability, we must ensure that no untrusted text content from the DOM is re-parsed and inserted as HTML unless it has been properly sanitized. The best general approach is:
- If BBob always returns safe HTML, rely on its result. But if BBob can be bypassed (
skipParsing), or if the input may contain unsafe HTML, then sanitize the final output prior to assignment. - In Angular, use Angular’s DomSanitizer to sanitize the generated HTML before inserting it into the DOM via
innerHTML.- Import and inject
DomSanitizerfrom@angular/platform-browser. - Before
setProperty(innerHTML, ...), run the HTML throughthis.sanitizer.bypassSecurityTrustHtml(or, more safely, through a real sanitizer, but in Angular,bypassSecurityTrustHtmlis the standard, and developers should already avoid bypass for untrusted inputs. If possible, use a sanitizer like DOMPurify before trusting HTML).
- Import and inject
- Optionally: if
skipParsingis set, never set the raw text as HTML; instead, set astextContent.
Required changes in packages/bbob-angular/src/bbob.component.ts:
- Import
DomSanitizer, inject it, and use it to sanitizeparsedContentbefore settinginnerHTML. - If skipParsing is true, set text content instead of HTML.
| @@ -7,7 +7,8 @@ | ||
| Injectable, | ||
| NgModule | ||
| } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; | ||
| import * as bbobHtml from '@bbob/html'; | ||
| import * as bbobPresetReact from '@bbob/preset-react'; | ||
|
|
||
| @@ -55,7 +56,8 @@ | ||
| constructor( | ||
| private el: ElementRef, | ||
| private renderer: Renderer2, | ||
| private bbobService: BbobHtmlService | ||
| private bbobService: BbobHtmlService, | ||
| private sanitizer: DomSanitizer | ||
| ) {} | ||
|
|
||
| ngOnInit() { | ||
| @@ -65,12 +67,23 @@ | ||
| plugins: this.plugins, | ||
| skipParsing: this.skipParsing | ||
| }); | ||
|
|
||
| this.renderer.setProperty( | ||
| this.el.nativeElement, | ||
| 'innerHTML', | ||
| parsedContent | ||
| ); | ||
|
|
||
| if (this.skipParsing) { | ||
| // Only put raw text into the DOM as text content, not as HTML. | ||
| this.renderer.setProperty( | ||
| this.el.nativeElement, | ||
| 'textContent', | ||
| rawContent | ||
| ); | ||
| } else { | ||
| // Sanitize HTML output before assigning to innerHTML. | ||
| const safeHtml: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(parsedContent); | ||
| this.renderer.setProperty( | ||
| this.el.nativeElement, | ||
| 'innerHTML', | ||
| safeHtml | ||
| ); | ||
| } | ||
| } | ||
| } | ||
|
|
4c047cf to
0c49f3b
Compare
Adds angular component
Adds web component