Merge pull request #11268 from abpframework/fix/escape-html-chars

Angular UI: Escaped HTML element chars for the extensible table

npm/ng-packs/packages/core/src/lib/utils/string-utils.ts

@@ -21,3 +21,7 @@ export function interpolate(text: string, params: string[]) {
     .replace(/(['"]?\{\s*(\d+)\s*\}['"]?)/g, (_, match, digit) => params[digit] ?? match)
     .replace(/\s+/g, ' ');
 }
+
+export function escapeHtmlChars(value: string) {
+  return value && value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}

npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts

@@ -1,4 +1,4 @@
-import { LocalizationService } from '@abp/ng.core';
+import { escapeHtmlChars, LocalizationService } from '@abp/ng.core';
 import { EntityProp, ePropType } from '@abp/ng.theme.shared/extensions';
 import { of } from 'rxjs';
 import { IdentityRoleDto } from '../proxy/identity/models';
@@ -15,7 +15,7 @@ export const DEFAULT_ROLES_ENTITY_PROPS = EntityProp.createMany<IdentityRoleDto>
       const { isDefault, isPublic, name } = data.record;
 
       return of(
-        name +
+        escapeHtmlChars(name) +
           (isDefault
             ? `<span class="badge badge-pill badge-success ml-1">${t(
                 'AbpIdentity::DisplayName:IsDefault',

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts

@@ -1,7 +1,9 @@
 /* tslint:disable:variable-name */
+import { escapeHtmlChars } from '@abp/ng.core';
 import { Type } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { O } from 'ts-toolbelt';
+import { ActionCallback } from './actions';
 import {
   Prop,
   PropCallback,
@@ -11,7 +13,6 @@ import {
   Props,
   PropsFactory,
 } from './props';
-import { ActionCallback } from './actions';
 
 export class EntityPropList<R = any> extends PropList<R, EntityProp<R>> {}
 
@@ -41,7 +42,8 @@ export class EntityProp<R = any> extends Prop<R> {
 
     this.columnWidth = options.columnWidth;
     this.sortable = options.sortable || false;
-    this.valueResolver = options.valueResolver || (data => of(data.record[this.name]));
+    this.valueResolver =
+      options.valueResolver || (data => of(escapeHtmlChars(data.record[this.name])));
     this.action = options.action;
   }