fix(security): prevent stored XSS in role notifications

[muhammadAbdulMannan2022]

This PR fixes a Stored Cross-Site Scripting (XSS) vulnerability in the Role management feature. The vulnerability existed in the notification system when displaying role information (name and description) using dangerouslyUseHTMLString. Malicious input in these fields could execute arbitrary JavaScript in the browser.

Issue:

Stored XSS via name and description parameters.

Any user-controlled content in these fields could inject and execute scripts.

The vulnerability was triggered in the Vue notification component:

this.$notify({
  dangerouslyUseHTMLString: true,
  message: `<div>Role Name: ${name}</div><div>Description: ${description}</div>`
})

Fix:

Escaped HTML characters (<, >, &, ", ') in name and description using a simple pure JS escape function.

Prevented execution of user-supplied HTML while keeping the notification readable.

dangerouslyUseHTMLString is still used, but now all user-controlled values are sanitized.

Benefits:

Prevents XSS attacks in role notifications.

No third-party libraries needed; uses native JS string escaping.

Compatible with the existing Vue .vue component structure.

Example:

Before:

Role Name: <img src=x onerror=alert(1)>

→ Executes JS

After:

Role Name: <img src=x onerror=alert(1)>

→ Renders as plain text, safe to display

Testing:

Created a new role with malicious <script> or in name and description.

Opened notifications — no scripts executed; all input rendered as text.

Confirmed existing roles display correctly.