alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Will Miao
2025-12-11 18:07:56 +08:00
parent fbb95bc623
commit 675d49e4ce
3 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
static/js/components/shared/ModelModal.js
View File

@@ -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}">
${modelWithFullData.file_path.replace(/[^/]+$/, '') || 'N/A'}
data-filepath="${escapedFilePathAttr}">
${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>

8
static/js/components/shared/TriggerWords.js
View File

@@ -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>
@@ -647,4 +649,4 @@ window.copyTriggerWord = async function(word) {
console.error('Copy failed:', err);
showToast('toast.triggerWords.copyFailed', {}, 'error');
}
};
};

23
static/js/components/shared/utils.js
View File

@@ -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, '&amp;')
.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>` :
''}
@@ -77,4 +92,4 @@ export function setupTagTooltip() {
tooltip.classList.remove('visible');
});
}
}
}