Skip to content

feat: angular support #269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: angular support #269

wants to merge 4 commits into from

Conversation

@JiLiZART
Copy link
Owner

@JiLiZART JiLiZART commented Nov 27, 2024

Adds angular component
Adds web component

@changeset-bot
Copy link

changeset-bot bot commented Nov 27, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: daaa849

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@JiLiZART JiLiZART force-pushed the feat/angular-support branch from 9028b8d to 01fc3a7 Compare September 14, 2025 18:33
github-advanced-security[bot]
github-advanced-security bot found potential problems Sep 14, 2025
View reviewed changes
packages/bbob-angular/src/bbob.component.ts
this.renderer.setProperty(
this.el.nativeElement,
'innerHTML',
parsedContent

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.

Copilot Autofix

AI about 2 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 DomSanitizer from @angular/platform-browser.
    • Before setProperty(innerHTML, ...), run the HTML through this.sanitizer.bypassSecurityTrustHtml (or, more safely, through a real sanitizer, but in Angular, bypassSecurityTrustHtml is the standard, and developers should already avoid bypass for untrusted inputs. If possible, use a sanitizer like DOMPurify before trusting HTML).
  • Optionally: if skipParsing is set, never set the raw text as HTML; instead, set as textContent.

Required changes in packages/bbob-angular/src/bbob.component.ts:

  • Import DomSanitizer, inject it, and use it to sanitize parsedContent before setting innerHTML.
  • If skipParsing is true, set text content instead of HTML.
Suggested changeset 1
packages/bbob-angular/src/bbob.component.ts

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/bbob-angular/src/bbob.component.ts b/packages/bbob-angular/src/bbob.component.ts
--- a/packages/bbob-angular/src/bbob.component.ts
+++ b/packages/bbob-angular/src/bbob.component.ts
@@ -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
+        );
+      }
     }
   }
   
EOF
@@ -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
);
}
}
}

Copilot is powered by AI and may make mistakes. Always verify output.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@JiLiZART