diff --git a/src/magnify-glass/WebGLRenderer.ts b/src/magnify-glass/WebGLRenderer.ts
index bf77cc0..42d794f 100644
--- a/src/magnify-glass/WebGLRenderer.ts
+++ b/src/magnify-glass/WebGLRenderer.ts
@@ -403,21 +403,36 @@ export class WebGLRenderer {
animation: slideIn 0.3s ease-out;
`;
- toast.innerHTML = `
-
-
⚠️
-
- MagnifyGlass: WebGL Disabled
- ${instructions}
-
-
-
';
+
+ renderer.showWebGLError(maliciousInstruction);
+
+ const toast = document.getElementById('magnifyglass-webgl-error');
+ expect(toast).toBeTruthy();
+
+ // Check if the malicious instruction is rendered as text, not HTML
+ // In the vulnerable version, this would be true:
+ // expect(toast?.innerHTML).toContain('');
+
+ // In the fixed version, we expect:
+ expect(toast?.textContent).toContain(maliciousInstruction);
+ expect(toast?.innerHTML).not.toContain('');
+ expect(toast?.innerHTML).toContain('<img src=x onerror=alert(1)>');
+ });
+
+ it('should have a working dismiss button using event listener', () => {
+ const mockUi = { glassCanvas: null } as any;
+ const renderer = new WebGLRenderer({} as any, {} as any, mockUi);
+
+ renderer.showWebGLError('Test error');
+ const toast = document.getElementById('magnifyglass-webgl-error');
+ const button = toast?.querySelector('button');
+
+ expect(button).toBeTruthy();
+
+ // Verify inline handler is NOT present (CSP compliance)
+ expect(button?.hasAttribute('onclick')).toBe(false);
+
+ // Click to dismiss
+ button?.click();
+
+ // Verify toast is removed
+ expect(document.getElementById('magnifyglass-webgl-error')).toBeNull();
+ });
+});
diff --git a/web/magnify-glass/WebGLRenderer.js b/web/magnify-glass/WebGLRenderer.js
index 68a5c0e..bb66e65 100644
--- a/web/magnify-glass/WebGLRenderer.js
+++ b/web/magnify-glass/WebGLRenderer.js
@@ -290,21 +290,30 @@ class WebGLRenderer {
z-index: 100000;
animation: slideIn 0.3s ease-out;
`;
- toast.innerHTML = `
-
-
⚠️
-
- MagnifyGlass: WebGL Disabled
- ${instructions}
-
-
-
\n
⚠️\n
\n MagnifyGlass: WebGL Disabled\n ${instructions}\n \n
\n