Readd Markdown Support + Syntax Highlights and DOMPurify is used to sanitize HTML content to prevent XSS attacks.

This commit is contained in:
Raven Scott 2024-07-07 23:42:17 -04:00
parent 94ea9b6840
commit cb88b16606
2 changed files with 22 additions and 4 deletions

23
app.js
View File

@ -7,6 +7,22 @@ import Corestore from 'corestore';
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import fs from 'fs'; import fs from 'fs';
import handleCommand from './commands.js'; import handleCommand from './commands.js';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import DOMPurify from 'dompurify';
const md = new MarkdownIt({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
hljs.highlight(str, { language: lang }).value +
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
const agentAvatarPath = './assets/agent.png'; const agentAvatarPath = './assets/agent.png';
let agentAvatar = ''; let agentAvatar = '';
@ -1047,6 +1063,7 @@ function addFileMessage(name, fileName, fileUrl, fileType, avatar, topic) {
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
} }
} }
function addAudioMessage(name, audioUrl, avatar, topic) { function addAudioMessage(name, audioUrl, avatar, topic) {
const container = document.querySelector('#messages'); const container = document.querySelector('#messages');
if (!container) { if (!container) {
@ -1092,7 +1109,6 @@ function addAudioMessage(name, audioUrl, avatar, topic) {
} }
} }
function addMessage(name, message, avatar, topic) { function addMessage(name, message, avatar, topic) {
const container = document.querySelector('#messages'); const container = document.querySelector('#messages');
if (!container) { if (!container) {
@ -1120,8 +1136,7 @@ function addMessage(name, message, avatar, topic) {
const messageText = document.createElement('div'); const messageText = document.createElement('div');
messageText.classList.add('message-text'); messageText.classList.add('message-text');
messageText.innerHTML = DOMPurify.sanitize(md.render(message));
messageText.innerHTML = message;
messageContent.appendChild(senderName); messageContent.appendChild(senderName);
messageContent.appendChild(messageText); messageContent.appendChild(messageText);
@ -1132,6 +1147,7 @@ function addMessage(name, message, avatar, topic) {
if (topic === currentTopic()) { if (topic === currentTopic()) {
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
} }
hljs.highlightAll(); // Re-highlight all code blocks
} }
async function updateIcon(username, avatarBuffer) { async function updateIcon(username, avatarBuffer) {
@ -1146,7 +1162,6 @@ async function updateIcon(username, avatarBuffer) {
} }
} }
function clearMessages() { function clearMessages() {
const messagesContainer = document.querySelector('#messages'); const messagesContainer = document.querySelector('#messages');
while (messagesContainer.firstChild) { while (messagesContainer.firstChild) {

View File

@ -24,12 +24,15 @@
"dependencies": { "dependencies": {
"b4a": "^1.6.6", "b4a": "^1.6.6",
"corestore": "^6.18.2", "corestore": "^6.18.2",
"dompurify": "^3.1.6",
"dotenv": "^16.4.5", "dotenv": "^16.4.5",
"electron": "^30.0.8", "electron": "^30.0.8",
"highlight.js": "^11.10.0",
"hypercore-crypto": "^3.4.1", "hypercore-crypto": "^3.4.1",
"hyperdrive": "^11.8.1", "hyperdrive": "^11.8.1",
"hyperswarm": "^4.7.14", "hyperswarm": "^4.7.14",
"localdrive": "^1.11.4", "localdrive": "^1.11.4",
"markdown-it": "^14.1.0",
"marked": "^12.0.2", "marked": "^12.0.2",
"serve-drive": "^5.0.8" "serve-drive": "^5.0.8"
} }