Add Docs Agent chat widget #1254
Conversation
- Add chat widget
- pretty
- Add support chat widget and enhance agent message handling
static/chat-widget.js
Outdated
| msgDiv.innerHTML = ` | ||
| <div class="chat-widget-ai-content-with-avatar"> | ||
| <div class="chat-widget-ai-content">${text}</div> | ||
| <div class="chat-widget-ai-avatar-row">${beeSVG(24)}</div> | ||
| </div> | ||
| `; |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Deploying docs with
|
| Latest commit: |
8c21a35
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cf324826.docodile.pages.dev |
| Branch Preview URL: | https://add-docs-agent-widget.docodile.pages.dev |
| </div> | ||
| `; | ||
| } else if (role === 'support') { | ||
| ms 8000 gDiv.innerHTML = supportWidget(text); |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 months ago
To fix the issue, we need to ensure that any user-provided input is properly escaped before being inserted into the DOM. The escapeHtml function already exists in the codebase and can be used to sanitize the text variable before it is passed to the supportWidget function. This will prevent any malicious HTML or JavaScript from being executed.
The fix involves:
- Modifying the
appendMsgfunction to escape thetextvariable when theroleissupport. - Ensuring that the
supportWidgetfunction only receives sanitized input.
| @@ -521,3 +521,3 @@ | ||
| } else if (role === 'support') { | ||
| msgDiv.innerHTML = supportWidget(text); | ||
| msgDiv.innerHTML = supportWidget(escapeHtml(text)); | ||
| } else if (role === 'bot' && isHtml) { |
| } else if (role === & 8000 #39;support') { | ||
| msgDiv.innerHTML = supportWidget(text); | ||
| } else if (role === 'bot' && isHtml) { | ||
| msgDiv.innerHTML = text; // Insert spinner raw HTML for bot loading |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 months ago
To fix the issue, we need to ensure that any untrusted input is sanitized before being inserted into the DOM as HTML. Since the isHtml flag is used to determine whether the text should be treated as raw HTML, we can introduce a sanitization step for text when isHtml is true. A library like DOMPurify can be used to sanitize the HTML input, ensuring that only safe HTML is allowed. This approach preserves the intended functionality while mitigating the XSS risk.
| @@ -2,2 +2,4 @@ | ||
| (function () { | ||
| // Import DOMPurify for sanitizing HTML | ||
| const DOMPurify = window.DOMPurify; | ||
| // --- UUID v4 Generator --- | ||
| @@ -523,3 +525,3 @@ | ||
| } else if (role === 'bot' && isHtml) { | ||
| msgDiv.innerHTML = text; // Insert spinner raw HTML for bot loading | ||
| msgDiv.innerHTML = DOMPurify.sanitize(text); // Sanitize raw HTML for bot loading | ||
| } else { | ||
| @@ -528,3 +530,3 @@ | ||
| <div class="chat-widget-ai-content-with-avatar"> | ||
| <div class="chat-widget-ai-content">${text}</div> | ||
| <div class="chat-widget-ai-content">${DOMPurify.sanitize(text)}</div> | ||
| <div class="chat-widget-ai-avatar-row">${wandbLogoOctagonSVG(28)}</div> |
| @@ -47,2 +47,5 @@ | ||
| "singleQuote": true | ||
| }, | ||
| "dependencies": { | ||
| "dompurify": "^3.2.5" | ||
| } |
| Package | Version | Security advisories |
| dompurify (npm) | 3.2.5 | None |
|
|
|
Oh yep, the backend needs to be running too: https://github.com/morganmcg1/demo-docs-bot Will share instructions in the PR later once the backend code is tidied up |