feat(security): escape HTML attributes and content in model modal, fixes #720

- Import `escapeAttribute` and `escapeHtml` utilities from shared utils
- Remove duplicate `escapeAttribute` function from ModelModal.js
- Apply escaping to file path attributes in model modal and trigger words
- Escape folder path HTML content to prevent XSS vulnerabilities
- Ensure safe handling of user-controlled data in UI components

static/js/components/shared/ModelModal.js

@@ -14,7 +14,7 @@ import {
 } from './ModelMetadata.js';
 import { setupTagEditMode } from './ModelTags.js';
 import { getModelApiClient } from '../../api/modelApiFactory.js';
-import { renderCompactTags, setupTagTooltip, formatFileSize } from './utils.js';
+import { renderCompactTags, setupTagTooltip, formatFileSize, escapeAttribute, escapeHtml } from './utils.js';
 import { renderTriggerWords, setupTriggerWordsEditMode } from './TriggerWords.js';
 import { parsePresets, renderPresetTags } from './PresetTags.js';
 import { initVersionsTab } from './ModelVersionsTab.js';
@@ -65,12 +65,6 @@ function hasLicenseField(license, field) {
     return Object.prototype.hasOwnProperty.call(license || {}, field);
 }
 
-function escapeAttribute(value) {
-    return String(value ?? '')
-        .replace(/&/g, '&')
-        .replace(/"/g, '"');
-}
-
 function indentMarkup(markup, spaces) {
     if (!markup) {
         return '';
@@ -266,9 +260,11 @@ export async function showModelModal(model, modelType) {
         ...model,
         civitai: completeCivitaiData
     };
+    const escapedFilePathAttr = escapeAttribute(modelWithFullData.file_path || '');
+    const escapedFolderPath = escapeHtml((modelWithFullData.file_path || '').replace(/[^/]+$/, '') || 'N/A');
     const licenseIcons = renderLicenseIcons(modelWithFullData);
     const viewOnCivitaiAction = modelWithFullData.from_civitai ? `
-<div class="civitai-view" title="${translate('modals.model.actions.viewOnCivitai', {}, 'View on Civitai')}" data-action="view-civitai" data-filepath="${modelWithFullData.file_path}">
+<div class="civitai-view" title="${translate('modals.model.actions.viewOnCivitai', {}, 'View on Civitai')}" data-action="view-civitai" data-filepath="${escapedFilePathAttr}">
     <i class="fas fa-globe"></i> ${translate('modals.model.actions.viewOnCivitaiText', {}, 'View on Civitai')}
 </div>`.trim() : '';
     const creatorInfoAction = modelWithFullData.civitai?.creator ? `
@@ -472,8 +468,8 @@ export async function showModelModal(model, modelType) {
                                 <label>${translate('modals.model.metadata.location', {}, 'Location')}</label>
                                 <span class="file-path" title="${translate('modals.model.actions.openFileLocation', {}, 'Open file location')}"
                                     data-action="open-file-location"
-                                    data-filepath="${modelWithFullData.file_path}">
+                                    data-filepath="${escapedFilePathAttr}">
-                                    ${modelWithFullData.file_path.replace(/[^/]+$/, '') || 'N/A'}
+                                    ${escapedFolderPath}
                                 </span>
                             </div>
                         </div>
@@ -506,7 +502,7 @@ export async function showModelModal(model, modelType) {
                     </div>
                 </div>
 
-                <div class="showcase-section" data-model-hash="${modelWithFullData.sha256 || ''}" data-filepath="${modelWithFullData.file_path}">
+                <div class="showcase-section" data-model-hash="${modelWithFullData.sha256 || ''}" data-filepath="${escapedFilePathAttr}">
                     <div class="showcase-tabs">
                         ${tabsContent}
                     </div>

static/js/components/shared/TriggerWords.js

@@ -6,6 +6,7 @@
 import { showToast, copyToClipboard } from '../../utils/uiHelpers.js';
 import { translate } from '../../utils/i18nHelpers.js';
 import { getModelApiClient } from '../../api/modelApiFactory.js';
+import { escapeAttribute } from './utils.js';
 
 /**
  * Fetch trained words for a model
@@ -180,11 +181,12 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
  * @returns {string} HTML content
  */
 export function renderTriggerWords(words, filePath) {
+    const safeFilePath = escapeAttribute(filePath || '');
     if (!words.length) return `
         <div class="info-item full-width trigger-words">
             <div class="trigger-words-header">
                 <label>${translate('modals.model.triggerWords.label')}</label>
-                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${filePath}" title="${translate('modals.model.triggerWords.edit')}">
+                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${safeFilePath}" title="${translate('modals.model.triggerWords.edit')}">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </div>
@@ -207,7 +209,7 @@ export function renderTriggerWords(words, filePath) {
         <div class="info-item full-width trigger-words">
             <div class="trigger-words-header">
                 <label>${translate('modals.model.triggerWords.label')}</label>
-                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${filePath}" title="${translate('modals.model.triggerWords.edit')}">
+                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${safeFilePath}" title="${translate('modals.model.triggerWords.edit')}">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </div>

static/js/components/shared/utils.js

@@ -3,6 +3,20 @@
  * Helper functions for the Model Modal component - General version
  */
 
+export function escapeHtml(value = '') {
+    if (value === null || value === undefined) return '';
+    return String(value)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+export function escapeAttribute(value = '') {
+    return escapeHtml(value);
+}
+
 /**
  * Format file size
  * @param {number} bytes - Number of bytes
@@ -31,6 +45,7 @@ export function formatFileSize(bytes) {
 export function renderCompactTags(tags, filePath = '') {
     // Remove the early return and always render the container
     const tagsList = tags || [];
+    const safeFilePath = escapeAttribute(filePath || '');
     
     // Display up to 5 tags, with a tooltip indicator if there are more
     const visibleTags = tagsList.slice(0, 5);
@@ -40,20 +55,20 @@ export function renderCompactTags(tags, filePath = '') {
         <div class="model-tags-container">
             <div class="model-tags-header">
                 <div class="model-tags-compact">
-                    ${visibleTags.map(tag => `<span class="model-tag-compact">${tag}</span>`).join('')}
+                    ${visibleTags.map(tag => `<span class="model-tag-compact">${escapeHtml(tag)}</span>`).join('')}
                     ${remainingCount > 0 ? 
                         `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
                         ''}
                     ${tagsList.length === 0 ? `<span class="model-tag-empty">No tags</span>` : ''}
                 </div>
-                <button class="edit-tags-btn" data-file-path="${filePath}" title="Edit tags">
+                <button class="edit-tags-btn" data-file-path="${safeFilePath}" title="Edit tags">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </div>
             ${tagsList.length > 0 ? 
                 `<div class="model-tags-tooltip">
                     <div class="tooltip-content">
-                        ${tagsList.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
+                        ${tagsList.map(tag => `<span class="tooltip-tag">${escapeHtml(tag)}</span>`).join('')}
                     </div>
                 </div>` : 
                 ''}