diff --git a/npm/ng-packs/packages/core/src/lib/utils/string-utils.ts b/npm/ng-packs/packages/core/src/lib/utils/string-utils.ts
index b6c4cce653..056c355b1c 100644
--- a/npm/ng-packs/packages/core/src/lib/utils/string-utils.ts
+++ b/npm/ng-packs/packages/core/src/lib/utils/string-utils.ts
@@ -21,3 +21,10 @@ 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;')
+  );
+}
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts
index d71487e611..c26124c531 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-roles-entity-props.ts
+++ b/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 { IdentityRoleDto } from '@abp/ng.identity/proxy';
 import { EntityProp, ePropType } from '@abp/ng.theme.shared/extensions';
 import { of } from 'rxjs';
@@ -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 rounded-pill bg-success ms-1">${t(
                 'AbpIdentity::DisplayName:IsDefault',
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts
index cfd9d57c5b..407d92662b 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts
+++ b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts
@@ -1,4 +1,4 @@
-import { LocalizationService } from '@abp/ng.core';
+import { escapeHtmlChars, LocalizationService } from '@abp/ng.core';
 import { IdentityUserDto } from '@abp/ng.identity/proxy';
 import { EntityProp, ePropType } from '@abp/ng.theme.shared/extensions';
 import { of } from 'rxjs';
@@ -21,7 +21,9 @@ export const DEFAULT_USERS_ENTITY_PROPS = EntityProp.createMany<IdentityUserDto>
       return of(
         `
         ${!data.record.isActive ? inactiveIcon : ''}
-        <span class="${!data.record.isActive ? 'text-muted' : ''}">${data.record.userName}</span>`,
+        <span class="${!data.record.isActive ? 'text-muted' : ''}">${escapeHtmlChars(
+          data.record.userName,
+        )}</span>`,
       );
     },
   },
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts
index fad8c29ade..dcbd56c07f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/entity-props.ts
@@ -1,7 +1,7 @@
+import { ABP, escapeHtmlChars } from '@abp/ng.core';
 import { Type } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { O } from 'ts-toolbelt';
-import { ABP } from '@abp/ng.core';
 import { ActionCallback } from './actions';
 import {
   Prop,
@@ -43,7 +43,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;
     this.component = options.component;
     this.enumList = options.enumList;