sanitize note title

src/public/app/dialogs/options/appearance.js

@@ -297,7 +297,7 @@ export default class ApperanceOptions {
             this.$themeSelect.append($("<option>")
                 .attr("value", theme.val)
                 .attr("data-note-id", theme.noteId)
-                .html(theme.title));
+                .text(theme.title));
         }
 
         this.$themeSelect.val(options.theme);

src/public/app/services/note_content_renderer.js

@@ -61,9 +61,11 @@ async function getRenderedContent(note, options = {}) {
         $renderedContent.append($("<pre>").text(trim(fullNote.content, options.trim)));
     }
     else if (type === 'image') {
+        const sanitizedTitle = note.title.replace(/[^a-z0-9-.]/gi, "");
+
         $renderedContent.append(
             $("<img>")
-                .attr("src", `api/images/${note.noteId}/${note.title}`)
+                .attr("src", `api/images/${note.noteId}/${sanitizedTitle}`)
                 .css("max-width", "100%")
         );
     }
@@ -144,7 +146,7 @@ async function getRenderedContent(note, options = {}) {
     else if (type === 'canvas') {
         // make sure surrounding container has size of what is visible. Then image is shrinked to its boundaries
         $renderedContent.css({height: "100%", width:"100%"});
-        
+
         const noteComplement = await froca.getNoteComplement(note.noteId);
         const content = noteComplement.content || "";
 

src/public/app/services/note_list_renderer.js

@@ -266,7 +266,7 @@ class NoteListRenderer {
                     .append($expander)
                     .append($('<span class="note-icon">').addClass(note.getIcon()))
                     .append(this.viewType === 'grid'
-                        ? note.title
+                        ? $("<span>").text(note.title)
                         : await linkService.createNoteLink(notePath, {showTooltip: false, showNotePath: this.showNotePath})
                     )
                     .append($renderedAttributes)

src/public/app/services/tab_manager.js

@@ -482,7 +482,7 @@ export default class TabManager extends Component {
 
     updateDocumentTitle(activeNoteContext) {
         const titleFragments = [
-            // it helps navigating in history if note title is included in the title
+            // it helps to navigate in history if note title is included in the title
             activeNoteContext.note?.title,
             "Trilium Notes"
         ].filter(Boolean);

src/public/app/services/toast.js

@@ -4,16 +4,17 @@ import utils from "./utils.js";
 function toast(options) {
     const $toast = $(`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
-        <strong class="mr-auto"><span class="bx bx-${options.icon}"></span> ${options.title}</strong>
+        <strong class="mr-auto"><span class="bx bx-${options.icon}"></span> <span class="toast-title"></span></strong>
         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
             <span aria-hidden="true">&times;</span>
         </button>
     </div>
-    <div class="toast-body">
-        ${options.message}
-    </div>
+    <div class="toast-body"></div>
 </div>`);
 
+    $toast.find('.toast-title').text(options.title);
+    $toast.find('.toast-body').text(options.message);
+
     if (options.id) {
         $toast.attr("id", "toast-" + options.id);
     }

src/public/app/widgets/ribbon_widgets/edited_notes.js

@@ -77,7 +77,9 @@ export default class EditedNotesWidget extends CollapsibleWidget {
                 );
             }
             else {
-                $item.append(editedNote.notePath ? await linkService.createNoteLink(editedNote.notePath.join("/"), {showNotePath: true}) : editedNote.title);
+                $item.append(editedNote.notePath
+                    ? await linkService.createNoteLink(editedNote.notePath.join("/"), {showNotePath: true})
+                    : $("<span>").text(editedNote.title));
             }
 
             if (i < editedNotes.length - 1) {

src/public/app/widgets/type_widgets/editable_text.js

@@ -296,7 +296,8 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         const note = await froca.getNote(noteId);
 
         this.textEditor.model.change( writer => {
-            const src = `api/images/${note.noteId}/${note.title}`;
+            const sanitizedTitle = note.title.replace(/[^a-z0-9-.]/gi, "");
+            const src = `api/images/${note.noteId}/${sanitizedTitle}`;
 
             const imageElement = writer.createElement( 'image',  { 'src': src } );
 

src/public/app/widgets/type_widgets/empty.js

@@ -79,7 +79,7 @@ export default class EmptyTypeWidget extends TypeWidget {
             this.$workspaceNotes.append(
                 $('<div class="workspace-note">')
                     .append($("<div>").addClass(workspaceNote.getIcon() + " workspace-icon"))
-                    .append($("<div>").append(workspaceNote.title))
+                    .append($("<div>").text(workspaceNote.title))
                     .attr("title", "Enter workspace " + workspaceNote.title)
                     .on('click', () => this.triggerCommand('hoistNote', {noteId: workspaceNote.noteId}))
             );

src/services/notes.js

@@ -341,8 +341,10 @@ function downloadImages(noteId, content) {
             const imageService = require('../services/image');
             const {note} = imageService.saveImage(noteId, imageBuffer, "inline image", true, true);
 
+            const sanitizedTitle = note.title.replace(/[^a-z0-9-.]/gi, "");
+
             content = content.substr(0, imageMatch.index)
-                + `<img src="api/images/${note.noteId}/${note.title}"`
+                + `<img src="api/images/${note.noteId}/${sanitizedTitle}"`
                 + content.substr(imageMatch.index + imageMatch[0].length);
         }
         else if (!url.includes('api/images/')