fix(components/text-editor): escape merge field attribute values (#797)

Author: Blackbaud-PaulCrowder

libs/components/text-editor/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/index.ts"
   },
-  "allowedNonPeerDependencies": ["dompurify"]
+  "allowedNonPeerDependencies": ["dompurify", "he"]
 }

libs/components/text-editor/package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "dompurify": "2.3.6",
+    "he": "1.2.0",
     "tslib": "^2.3.1"
   }
 }

libs/components/text-editor/src/lib/modules/text-editor/menubar/text-editor-menubar.component.ts

@@ -9,6 +9,7 @@ import {
 import { SkyLibResourcesService } from '@skyux/i18n';
 import { SkyDropdownMessage, SkyDropdownMessageType } from '@skyux/popovers';
 
+import he from 'he';
 import { Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 
@@ -210,9 +211,9 @@ export class SkyTextEditorMenubarComponent implements OnDestroy, OnInit {
     this.execCommand(
       'insertHTML',
       '<img style="display: inline; cursor: grab;" data-fieldid="' +
-        field.id +
+        he.escape(field.id) +
         '" data-fielddisplay="' +
-        field.name +
+        he.escape(field.name) +
         '" src="' +
         (field.previewImageUrl ||
           this.#adapterService.getMergeFieldDataURI(field.name)) +

libs/components/text-editor/src/lib/modules/text-editor/text-editor.component.spec.ts

@@ -24,6 +24,7 @@ import { MENU_DEFAULTS } from './defaults/menu-defaults';
 import { STYLE_STATE_DEFAULTS } from './defaults/style-state-defaults';
 import { TOOLBAR_ACTION_DEFAULTS } from './defaults/toolbar-action-defaults';
 import { TextEditorFixtureComponent } from './fixtures/text-editor.component.fixture';
+import { SkyTextEditorAdapterService } from './services/text-editor-adapter.service';
 import { SkyTextEditorComponent } from './text-editor.component';
 import { SkyTextEditorModule } from './text-editor.module';
 import { SkyTextEditorStyleState } from './types/style-state';
@@ -274,6 +275,18 @@ describe('Text editor', () => {
     fixture.detectChanges();
   }
 
+  function insertMergeField(index: number): void {
+    openDropdown('.sky-text-editor-menu-merge-field');
+    expect(document.querySelector('.sky-dropdown-item')).toBeTruthy();
+
+    iframeDocument.body.focus();
+    const mergeFieldOption = document.querySelectorAll(
+      '.sky-dropdown-item button'
+    )[index];
+    SkyAppTestUtility.fireDomEvent(mergeFieldOption, 'click');
+    fixture.detectChanges();
+  }
+
   function getFontPicker(): HTMLElement {
     return fixture.nativeElement.querySelector(
       '.sky-text-editor-toolbar .sky-text-editor-font-picker'
@@ -653,26 +666,48 @@ describe('Text editor', () => {
       tick();
       fixture.detectChanges();
 
-      openDropdown('.sky-text-editor-menu-merge-field');
-      expect(document.querySelector('.sky-dropdown-item')).toBeTruthy();
-
-      iframeDocument.body.focus();
-      const mergeFieldOption = document.querySelectorAll(
-        '.sky-dropdown-item button'
-      )[2];
-      SkyAppTestUtility.fireDomEvent(mergeFieldOption, 'click');
-      fixture.detectChanges();
-      tick();
-      fixture.detectChanges();
-      tick();
-      fixture.detectChanges();
+      insertMergeField(2);
 
       expect(testComponent.value).toContain('data-fieldid="2"');
       expect(testComponent.value).toContain(
         'data-fielddisplay="A field that is really too long for its own good"'
       );
     }));
 
+    it('should escape merge field attribute values', fakeAsync(() => {
+      testComponent.mergeFields = [
+        {
+          id: '"><',
+          name: '"><',
+        },
+      ];
+
+      fixture.detectChanges();
+
+      const adapterSvc = fixture.debugElement
+        .query(By.css('sky-text-editor'))
+        .injector.get(SkyTextEditorAdapterService);
+
+      spyOn(adapterSvc, 'execCommand').and.callThrough();
+
+      insertMergeField(0);
+
+      expect(adapterSvc.execCommand).toHaveBeenCalledOnceWith({
+        command: 'insertHTML',
+        value: jasmine.stringContaining('data-fieldid="&quot;&gt;&lt;'),
+      });
+
+      expect(adapterSvc.execCommand).toHaveBeenCalledOnceWith({
+        command: 'insertHTML',
+        value: jasmine.stringContaining('data-fielddisplay="&quot;&gt;&lt;'),
+      });
+
+      // The browser converts the escaped angle brackets back to their unescaped
+      // versions since they appear within quotes in an attribute value.
+      expect(testComponent.value).toContain('data-fieldid="&quot;><');
+      expect(testComponent.value).toContain('data-fielddisplay="&quot;><"');
+    }));
+
     it('Toolbar values should update based on selection', fakeAsync(() => {
       testComponent.value =
         '<font style="font-size: 16px" face="Arial" color="#c14040">' +

package-lock.json

@@ -105,6 +105,7 @@
     "dragula": "3.7.3",
     "fontfaceobserver": "2.1.0",
     "google-libphonenumber": "3.2.31",
+    "he": "1.2.0",
     "intl-tel-input": "17.0.19",
     "jsonc-parser": "3.0.0",
     "jwt-decode": "3.1.2",
@@ -157,6 +158,7 @@
     "@types/dompurify": "2.3.4",
     "@types/fontfaceobserver": "2.1.0",
     "@types/fs-extra": "9.0.13",
+    "@types/he": "1.1.2",
     "@types/jasmine": "4.0.3",
     "@types/jest": "28.1.8",
     "@types/node": "18.7.1",