feat: add CSP middleware to allow remote media previews, fixes #710, see #715

Introduce `relax_csp_for_remote_media` middleware that modifies Content Security Policy headers to permit loading media from trusted external domains (Civitai and Genur). This is necessary for LoRA Manager UI previews when ComfyUI runs with `--disable-api-nodes`, which otherwise blocks remote images and videos. The middleware is inserted after ComfyUI's `block_external_middleware` to properly extend the restrictive CSP header.

py/lora_manager.py

@@ -17,6 +17,7 @@ from .services.settings_manager import get_settings_manager
 from .utils.example_images_migration import ExampleImagesMigration
 from .services.websocket_manager import ws_manager
 from .services.example_images_cleanup_service import ExampleImagesCleanupService
+from .middleware.csp_middleware import relax_csp_for_remote_media
 
 logger = logging.getLogger(__name__)
 
@@ -62,6 +63,23 @@ class LoraManager:
         """Initialize and register all routes using the new refactored architecture"""
         app = PromptServer.instance.app
 
+        if relax_csp_for_remote_media not in app.middlewares:
+            # Ensure CSP relaxer executes after ComfyUI's block_external_middleware so it can
+            # see and extend the restrictive header instead of being overwritten by it.
+            block_middleware_index = next(
+                (
+                    idx
+                    for idx, middleware in enumerate(app.middlewares)
+                    if getattr(middleware, "__name__", "") == "block_external_middleware"
+                ),
+                None,
+            )
+
+            if block_middleware_index is None:
+                app.middlewares.append(relax_csp_for_remote_media)
+            else:
+                app.middlewares.insert(block_middleware_index, relax_csp_for_remote_media)
+
         # Increase allowed header sizes so browsers with large localhost cookie
         # jars (multiple UIs on 127.0.0.1) don't trip aiohttp's 8KB default
         # limits. Cookies for unrelated apps are still sent to the plugin and

py/middleware/csp_middleware.py

@@ -0,0 +1,65 @@
+"""Middleware helpers for adjusting Content Security Policy headers."""
+
+from typing import Awaitable, Callable, Dict, List
+
+from aiohttp import web
+
+REMOTE_MEDIA_SOURCES = (
+    "https://image.civitai.com",
+    "https://img.genur.art",
+)
+
+
+@web.middleware
+async def relax_csp_for_remote_media(
+    request: web.Request, handler: Callable[[web.Request], Awaitable[web.StreamResponse]]
+) -> web.StreamResponse:
+    """Allow LoRA Manager media previews to load from trusted remote domains.
+
+    When ComfyUI is started with ``--disable-api-nodes`` it injects a restrictive
+    ``Content-Security-Policy`` header that blocks remote images and videos. The
+    LoRA Manager UI legitimately needs to fetch previews from Civitai and Genur,
+    so this middleware augments the existing CSP to whitelist those hosts while
+    preserving all other directives.
+    """
+
+    response: web.StreamResponse = await handler(request)
+    header_value = response.headers.get("Content-Security-Policy")
+
+    if not header_value:
+        return response
+
+    directive_order: List[str] = []
+    directives: Dict[str, List[str]] = {}
+
+    for raw_directive in header_value.split(";"):
+        directive = raw_directive.strip()
+        if not directive:
+            continue
+
+        parts = directive.split()
+        name, values = parts[0], parts[1:]
+        if name not in directive_order:
+            directive_order.append(name)
+        directives[name] = values
+
+    def merge_sources(name: str, sources: List[str], defaults: List[str] | None = None) -> None:
+        existing = directives.get(name, list(defaults or []))
+
+        for source in sources:
+            if source not in existing:
+                existing.append(source)
+
+        directives[name] = existing
+        if name not in directive_order:
+            directive_order.append(name)
+
+    merge_sources("img-src", list(REMOTE_MEDIA_SOURCES))
+    merge_sources("media-src", ["'self'", *REMOTE_MEDIA_SOURCES], defaults=["'self'"])
+
+    updated_header = "; ".join(
+        f"{name} {' '.join(directives[name])}".rstrip() for name in directive_order
+    )
+
+    response.headers["Content-Security-Policy"] = f"{updated_header};"
+    return response