Chat Application Frontend Embeds Mermaid with Disabled XSS Protections, Raising Injection Risk

A frontend component responsible for rendering architecture diagrams in a chat application has been identified with a configuration that actively disables built-in security safeguards. The `ArchitectureDiagram` component initializes the Mermaid diagram library with `securityLevel: 'loose'`, a setting that strips away the library's native XSS defenses and permits HTML markup within diagram labels. The resulting SVG output is then injected directly into the DOM using `innerHTML`, bypassing typical sanitization channels.

The vulnerable code resides in `src/chat-app/frontend/src/components/ArchitectureDiagram.jsx` at lines 100-110. Security researchers note that while the diagram definition currently remains a hardcoded constant, the implementation pattern creates a structural risk. If developers later modify the component to accept dynamic diagram definitions—whether from an API response, URL parameters, or user-supplied customization—the application would become directly exploitable. With `securityLevel: 'loose'` active, Mermaid will render `<script>` tags and event handler attributes embedded in label text, potentially allowing arbitrary JavaScript execution in the context of a victim's browser session.

The issue has been classified as Medium severity under OWASP Category A03:2021 (Injection). Organizations utilizing this component face elevated risk if the codebase evolves to incorporate dynamic diagram content without addressing the underlying configuration. The recommended remediation involves setting `securityLevel` to a stricter value—`security` or `strict`—and replacing `innerHTML` injection with a safer DOM manipulation method. Until patched, any expansion of the component's input surface could expose end users to cross-site scripting attacks.