Merge branch 'fix/group-description-escaped-2954' into 'master'

Fix escaping in group descriptions #2954

See merge request minds/front!1736

Author: markharding

src/app/common/pipes/decode-html-string.spec.ts

@@ -0,0 +1,55 @@
+import { TestBed } from '@angular/core/testing';
+import { DecodeHtmlStringPipe } from './decode-html-string';
+
+describe('DecodeHtmlStringPipe', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DecodeHtmlStringPipe],
+    });
+  });
+
+  it('it should initialize', () => {
+    expect(true).toBeTruthy();
+  });
+
+  it('should transform html entity quotes into raw quotes', () => {
+    const pipe = new DecodeHtmlStringPipe();
+    expect(pipe.transform('"hello"')).toEqual('"hello"');
+  });
+
+  it('should transform html entity ampersand into its symbol', () => {
+    const pipe = new DecodeHtmlStringPipe();
+    expect(pipe.transform('&hello')).toEqual('&hello');
+  });
+
+  it('should transform html entity less than into its symbol', () => {
+    const pipe = new DecodeHtmlStringPipe();
+    expect(pipe.transform('&lt;hello')).toEqual('<hello');
+  });
+
+  it('should transform html entity greater than into its symbol', () => {
+    const pipe = new DecodeHtmlStringPipe();
+    expect(pipe.transform('&gt;hello')).toEqual('>hello');
+  });
+
+  it('should remove HTML tags', () => {
+    const pipe = new DecodeHtmlStringPipe();
+    expect(pipe.transform('<img><div>')).toEqual('');
+    expect(pipe.transform('<IMG SRC="javascript:alert(\'XSS\');">')).toEqual(
+      ''
+    );
+  });
+
+  it('should transform many html entities into raw quotes', () => {
+    const pipe = new DecodeHtmlStringPipe();
+    expect(pipe.transform('&amp;hello&gt;&lt;this&quot;')).toEqual(
+      '&hello><this"'
+    );
+  });
+
+  it('should not transform text with no html entities', () => {
+    const pipe = new DecodeHtmlStringPipe();
+    const str = '& this is "text"';
+    expect(pipe.transform(str)).toEqual(str);
+  });
+});

src/app/common/pipes/decode-html-string.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * Decodes a string with HTML entities.
+ * Idea taken from https://stackoverflow.com/a/34064434
+ */
+@Pipe({ name: 'decodeHtmlString' })
+export class DecodeHtmlStringPipe implements PipeTransform {
+  /**
+   * Transforms a string such that HTML entities are decoded.
+   * @param { string } value - string to decode.
+   * @returns { string } - decoded string.
+   */
+  public transform(value: string): string {
+    const doc = new DOMParser().parseFromString(value, 'text/html');
+    return doc.documentElement.textContent;
+  }
+}

src/app/common/pipes/pipes.ts

@@ -12,6 +12,7 @@ import { TimediffPipe } from './timediff.pipe';
 import { FriendlyDateDiffPipe } from './friendlydatediff';
 import { AsyncStatePipe } from './async-state.pipe';
 import { FileSizePipe } from './filesize';
+import { DecodeHtmlStringPipe } from './decode-html-string';
 
 export const MINDS_PIPES = [
   AbbrPipe,
@@ -30,4 +31,5 @@ export const MINDS_PIPES = [
   SafeStylePipe,
   AsyncStatePipe,
   FileSizePipe,
+  DecodeHtmlStringPipe,
 ];

src/app/modules/groups/profile/profile.html

@@ -135,7 +135,8 @@ <h1>
             <textarea
               name="briefdescription"
               [autoGrow]
-              [(ngModel)]="group.briefdescription"
+              [ngModel]="group.briefdescription | decodeHtmlString"
+              (ngModelChange)="group.briefdescription = $event"
               placeholder="Enter a brief description"
               i18n-placeholder="@@GROUPS__DESCRIPTION_PLACEHOLDER"
               mTextInputAutocomplete