AAE-22612 Fix unwanted comma in rich text editor (#9685)

Alfresco · May 16, 2024 · 5f82106 · 5f82106
1 parent c71d8da
commit 5f82106
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 22 deletions.
diff --git a/cspell.json b/cspell.json
@@ -143,7 +143,8 @@
     "BPMECM",
     "berseria",
     "zestiria",
-    "validatable"
+    "validatable",
+    "edjs"
   ],
   "dictionaries": [
     "html",

diff --git a/...-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts b/...-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts
@@ -19,7 +19,6 @@ import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CoreTestingModule } from '@alfresco/adf-core';
-
 import { DisplayRichTextWidgetComponent } from './display-rich-text.widget';
 
 describe('DisplayRichTextWidgetComponent', () => {
@@ -44,28 +43,40 @@ describe('DisplayRichTextWidgetComponent', () => {
                         text: 'Editor.js',
                         level: 1
                     }
+                },
+                {
+                    id: '2',
+                    type: 'paragraph',
+                    data: {
+                        text: 'Display some <font color="#ff1300">formatted</font> <mark class="cdx-marker">text</mark>'
+                    }
+                }
+            ],
+            version: 1
+        }
+    };
+
+    const mockUnsafeFormField: any = {
+        id: 'fake-unsafe-form-field',
+        name: 'fake-label',
+        value: {
+            time: 1658154611110,
+            blocks: [
+                {
+                    id: '1',
+                    type: 'paragraph',
+                    data: {
+                        text: '<img src="x" onerror="alert(\'XSS\')">'
+                    }
                 }
             ],
             version: 1
-        },
-        required: false,
-        readOnly: false,
-        overrideId: false,
-        colspan: 1,
-        placeholder: null,
-        minLength: 0,
-        maxLength: 0,
-        params: {
-            existingColspan: 1,
-            maxColspan: 1
         }
     };
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
-                CoreTestingModule
-            ]
+            imports: [CoreTestingModule]
         });
         fixture = TestBed.createComponent(DisplayRichTextWidgetComponent);
         widget = fixture.componentInstance;
@@ -79,11 +90,22 @@ describe('DisplayRichTextWidgetComponent', () => {
     });
 
     it('should parse editorjs data to html', async () => {
-        const expectedHtml = '<h1>Editor.js</h1>';
+        const expectedHtml = '<h1>Editor.js</h1><p>Display some <font color="#ff1300">formatted</font> <mark class="cdx-marker">text</mark></p>';
+
         fixture.detectChanges();
         await fixture.whenStable();
+
         const parsedHtmlEl = debugEl.query(By.css(cssSelector.parsedHTML));
         expect(parsedHtmlEl.nativeElement.innerHTML).toEqual(expectedHtml);
     });
 
+    it('should sanitize unsafe HTML', async () => {
+        widget.field = mockUnsafeFormField;
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const parsedHtmlEl = debugEl.query(By.css(cssSelector.parsedHTML));
+        expect(parsedHtmlEl.nativeElement.innerHTML.includes('<img src="x" onerror="alert(\'XSS\')">')).toBe(false);
+    });
 });
diff --git a/...vices-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts b/...vices-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts
@@ -17,10 +17,11 @@
 
 /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, SecurityContext, ViewEncapsulation } from '@angular/core';
 import { WidgetComponent, FormService } from '@alfresco/adf-core';
-/* cspell:disable-next-line */
 import edjsHTML from 'editorjs-html';
+import { DomSanitizer } from '@angular/platform-browser';
+
 @Component({
     selector: 'display-rich-text',
     templateUrl: './display-rich-text.widget.html',
@@ -39,16 +40,23 @@ import edjsHTML from 'editorjs-html';
     encapsulation: ViewEncapsulation.None
 })
 export class DisplayRichTextWidgetComponent extends WidgetComponent implements OnInit {
-
     parsedHTML: any;
 
-    constructor(public formService: FormService) {
+    constructor(public formService: FormService, private readonly sanitizer: DomSanitizer) {
         super(formService);
     }
 
     ngOnInit(): void {
-        /* cspell:disable-next-line */
         this.parsedHTML = edjsHTML().parseStrict(this.field.value);
+
+        if (!(this.parsedHTML instanceof Error)) {
+            this.sanitizeHtmlContent();
+        } else {
+            throw this.parsedHTML;
+        }
     }
 
+    private sanitizeHtmlContent(): void {
+        this.parsedHTML = this.sanitizer.sanitize(SecurityContext.HTML, this.parsedHTML.join(''));
+    }
 }