fix(logs): html tags is removed in log viewer (#10346)

resources/views/livewire/project/application/deployment/show.blade.php

@@ -115,10 +115,6 @@
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
-        decodeHtml(text) {
-            const doc = new DOMParser().parseFromString(text, 'text/html');
-            return doc.documentElement.textContent;
-        },
         highlightText(el, text, query) {
             if (this.hasActiveLogSelection()) return;
 
@@ -159,7 +155,7 @@
                 if (matches && query) count++;
 
                 if (textSpan) {
-                    const originalText = this.decodeHtml(textSpan.dataset.lineText || '');
+                    const originalText = textSpan.dataset.lineText || '';
                     if (!query) {
                         textSpan.textContent = originalText;
                     } else if (matches) {
@@ -436,14 +432,14 @@ class="text-gray-500 dark:text-gray-400 py-2">
                                     $lineContent = (isset($line['command']) && $line['command'] ? '[CMD]: ' : '') . trim($line['line']);
                                     $searchableContent = $line['timestamp'] . ' ' . $lineContent;
                                 @endphp
-                                <div data-log-line data-log-content="{{ htmlspecialchars($searchableContent) }}"
+                                <div data-log-line data-log-content="{{ $searchableContent }}"
                                     @class([
                                         'mt-2' => isset($line['command']) && $line['command'],
                                         'flex gap-2 log-line',
                                     ])>
                                     <span x-show="showTimestamps"
                                         class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span>
-                                    <span data-line-text="{{ htmlspecialchars($lineContent) }}"
+                                    <span data-line-text="{{ $lineContent }}"
                                         @class([
                                             'text-success dark:text-warning' => $line['hidden'],
                                             'text-red-500' => $line['stderr'],

resources/views/livewire/project/shared/get-logs.blade.php

@@ -139,10 +139,6 @@
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
-        decodeHtml(text) {
-            const doc = new DOMParser().parseFromString(text, 'text/html');
-            return doc.documentElement.textContent;
-        },
         applySearch() {
             const logs = document.getElementById('logs');
             if (!logs) return;
@@ -163,7 +159,7 @@
 
                 // Update highlighting
                 if (textSpan) {
-                    const originalText = this.decodeHtml(textSpan.dataset.lineText || '');
+                    const originalText = textSpan.dataset.lineText || '';
                     if (!query) {
                         textSpan.textContent = originalText;
                     } else if (matches) {

tests/Unit/LogViewerXssSecurityTest.php

@@ -1,427 +1,77 @@
 <?php
 
-/**
+function renderedDataLineTextValue(string $logContent): string
- * Security tests for log viewer XSS prevention
+{
- *
+    $escapedContent = e($logContent);
- * These tests verify that the log viewer components properly sanitize
+    $html = '<span data-line-text="'.$escapedContent.'">'.$escapedContent.'</span>';
- * HTML content to prevent cross-site scripting (XSS) attacks.
+
- */
+    $document = new DOMDocument;
+    $document->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
+
+    return $document->documentElement->getAttribute('data-line-text');
+}
+
+describe('Log Viewer HTML Tag Preservation', function () {
+    it('lets Blade escape deployment log data attributes only once', function () {
+        $view = file_get_contents(__DIR__.'/../../resources/views/livewire/project/application/deployment/show.blade.php');
+
+        expect($view)
+            ->toContain('data-log-content="{{ $searchableContent }}"')
+            ->toContain('data-line-text="{{ $lineContent }}"')
+            ->not->toContain('data-log-content="{{ htmlspecialchars($searchableContent) }}"')
+            ->not->toContain('data-line-text="{{ htmlspecialchars($lineContent) }}"');
+    });
+
+    it('preserves literal html-like log text for client-side search reset and highlighting', function () {
+        $logContent = '<div>A</div>';
+
+        expect(renderedDataLineTextValue($logContent))->toBe($logContent);
+    });
+
+    it('does not strip tags with DOMParser based html decoding', function () {
+        $views = [
+            __DIR__.'/../../resources/views/livewire/project/application/deployment/show.blade.php',
+            __DIR__.'/../../resources/views/livewire/project/shared/get-logs.blade.php',
+        ];
+
+        foreach ($views as $view) {
+            expect(file_get_contents($view))
+                ->not->toContain('decodeHtml(text)')
+                ->not->toContain('DOMParser().parseFromString');
+        }
+    });
+});
+
 describe('Log Viewer XSS Prevention', function () {
-    it('escapes script tags in log output', function () {
+    it('keeps script-like log output as text in Blade rendered markup', function () {
         $maliciousLog = '<script>alert("XSS")</script>';
-        $escaped = htmlspecialchars($maliciousLog);
+        $escapedLog = e($maliciousLog);
 
-        expect($escaped)->toContain('&lt;script&gt;');
+        expect($escapedLog)
-        expect($escaped)->not->toContain('<script>');
+            ->toContain('&lt;script&gt;')
+            ->not->toContain('<script>');
     });
 
-    it('escapes event handler attributes', function () {
+    it('keeps dangerous attributes as literal dataset text for textContent rendering', function () {
-        $maliciousLog = '<img src=x onerror="alert(\'XSS\')">';
+        $maliciousLog = '<img src=x onerror="alert(1)">';
-        $escaped = htmlspecialchars($maliciousLog);
 
-        expect($escaped)->toContain('&lt;img');
+        expect(renderedDataLineTextValue($maliciousLog))->toBe($maliciousLog);
-        expect($escaped)->toContain('onerror');
-        expect($escaped)->not->toContain('<img');
-        expect($escaped)->not->toContain('onerror="alert');
     });
 
-    it('escapes javascript: protocol URLs', function () {
+    it('uses text nodes for search highlighting instead of injected html', function () {
-        $maliciousLog = '<a href="javascript:alert(\'XSS\')">click</a>';
+        $views = [
-        $escaped = htmlspecialchars($maliciousLog);
+            __DIR__.'/../../resources/views/livewire/project/application/deployment/show.blade.php',
+            __DIR__.'/../../resources/views/livewire/project/shared/get-logs.blade.php',
+        ];
 
-        expect($escaped)->toContain('&lt;a');
+        foreach ($views as $view) {
-        expect($escaped)->toContain('javascript:');
+            $contents = file_get_contents($view);
-        expect($escaped)->not->toContain('<a href=');
-    });
 
-    it('escapes data: URLs with scripts', function () {
+            expect($contents)
-        $maliciousLog = '<iframe src="data:text/html,<script>alert(\'XSS\')</script>">';
+                ->toContain('document.createTextNode')
-        $escaped = htmlspecialchars($maliciousLog);
+                ->toContain('mark.textContent')
-
+                ->not->toContain('innerHTML')
-        expect($escaped)->toContain('&lt;iframe');
+                ->not->toContain('x-html');
-        expect($escaped)->toContain('data:');
+        }
-        expect($escaped)->not->toContain('<iframe');
-    });
-
-    it('escapes style-based XSS attempts', function () {
-        $maliciousLog = '<div style="background:url(\'javascript:alert(1)\')">test</div>';
-        $escaped = htmlspecialchars($maliciousLog);
-
-        expect($escaped)->toContain('&lt;div');
-        expect($escaped)->toContain('style');
-        expect($escaped)->not->toContain('<div style=');
-    });
-
-    it('escapes Alpine.js directive injection', function () {
-        $maliciousLog = '<div x-html="alert(\'XSS\')">test</div>';
-        $escaped = htmlspecialchars($maliciousLog);
-
-        expect($escaped)->toContain('&lt;div');
-        expect($escaped)->toContain('x-html');
-        expect($escaped)->not->toContain('<div x-html=');
-    });
-
-    it('escapes multiple HTML entities', function () {
-        $maliciousLog = '<>&"\'';
-        $escaped = htmlspecialchars($maliciousLog);
-
-        expect($escaped)->toBe('&lt;&gt;&amp;&quot;&#039;');
-    });
-
-    it('preserves legitimate text content', function () {
-        $legitimateLog = 'INFO: Application started successfully';
-        $escaped = htmlspecialchars($legitimateLog);
-
-        expect($escaped)->toBe($legitimateLog);
-    });
-
-    it('handles ANSI color codes after escaping', function () {
-        $logWithAnsi = "\e[31mERROR:\e[0m Something went wrong";
-        $escaped = htmlspecialchars($logWithAnsi);
-
-        // ANSI codes should be preserved in escaped form
-        expect($escaped)->toContain('ERROR');
-        expect($escaped)->toContain('Something went wrong');
-    });
-
-    it('escapes complex nested HTML structures', function () {
-        $maliciousLog = '<div onclick="alert(1)"><img src=x onerror="alert(2)"><script>alert(3)</script></div>';
-        $escaped = htmlspecialchars($maliciousLog);
-
-        expect($escaped)->toContain('&lt;div');
-        expect($escaped)->toContain('&lt;img');
-        expect($escaped)->toContain('&lt;script&gt;');
-        expect($escaped)->not->toContain('<div');
-        expect($escaped)->not->toContain('<img');
-        expect($escaped)->not->toContain('<script>');
-    });
-});
-
-/**
- * Tests for x-text security approach
- *
- * These tests verify that using x-text instead of x-html eliminates XSS risks
- * by rendering all content as plain text rather than HTML.
- */
-describe('x-text Security', function () {
-    it('verifies x-text renders content as plain text, not HTML', function () {
-        // x-text always renders as textContent, never as innerHTML
-        // This means any HTML tags in the content are displayed as literal text
-        $contentWithHtml = '<script>alert("XSS")</script>';
-        $escaped = htmlspecialchars($contentWithHtml);
-
-        // When stored in data attribute and rendered with x-text:
-        // 1. Server escapes to: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;
-        // 2. Browser decodes the attribute value to: <script>alert("XSS")</script>
-        // 3. x-text renders it as textContent (plain text), NOT innerHTML
-        // 4. Result: User sees "<script>alert("XSS")</script>" as text, script never executes
-
-        expect($escaped)->toContain('&lt;script&gt;');
-        expect($escaped)->not->toContain('<script>');
-    });
-
-    it('confirms x-text prevents Alpine.js directive injection', function () {
-        $maliciousContent = '<div x-data="{ evil: true }" x-html="alert(1)">test</div>';
-        $escaped = htmlspecialchars($maliciousContent);
-
-        // Even if attacker includes Alpine directives in log content:
-        // 1. Server escapes them
-        // 2. x-text renders as plain text
-        // 3. Alpine never processes these as directives
-        // 4. User just sees the literal text
-
-        expect($escaped)->toContain('x-data');
-        expect($escaped)->toContain('x-html');
-        expect($escaped)->not->toContain('<div x-data=');
-    });
-
-    it('verifies x-text prevents event handler execution', function () {
-        $maliciousContent = '<img src=x onerror="alert(\'XSS\')">';
-        $escaped = htmlspecialchars($maliciousContent);
-
-        // With x-text approach:
-        // 1. Content is escaped on server
-        // 2. Rendered as textContent, not innerHTML
-        // 3. No HTML parsing means no event handlers
-        // 4. User sees the literal text, no image is rendered, no event fires
-
-        expect($escaped)->toContain('&lt;img');
-        expect($escaped)->toContain('onerror');
-        expect($escaped)->not->toContain('<img');
-    });
-
-    it('verifies x-text prevents style-based attacks', function () {
-        $maliciousContent = '<style>body { display: none; }</style>';
-        $escaped = htmlspecialchars($maliciousContent);
-
-        // x-text renders everything as text:
-        // 1. Style tags never get parsed as HTML
-        // 2. CSS never gets applied
-        // 3. User just sees the literal style tag content
-
-        expect($escaped)->toContain('&lt;style&gt;');
-        expect($escaped)->not->toContain('<style>');
-    });
-
-    it('confirms CSS class-based highlighting is safe', function () {
-        // New approach uses CSS classes for highlighting instead of injecting HTML
-        // The 'log-highlight' class is applied via Alpine.js :class binding
-        // This is safe because:
-        // 1. Class names are controlled by JavaScript, not user input
-        // 2. No HTML injection occurs
-        // 3. CSS provides visual feedback without executing code
-
-        $highlightClass = 'log-highlight';
-        expect($highlightClass)->toBe('log-highlight');
-        expect($highlightClass)->not->toContain('<');
-        expect($highlightClass)->not->toContain('script');
-    });
-
-    it('verifies granular highlighting only marks matching text', function () {
-        // splitTextForHighlight() divides text into parts
-        // Only matching portions get highlight: true
-        // Each part is rendered with x-text (safe plain text)
-        // Highlight class applied only to matching spans
-
-        $logLine = 'ERROR: Database connection failed';
-        $searchQuery = 'ERROR';
-
-        // When searching for "ERROR":
-        // Part 1: { text: "ERROR", highlight: true }  <- highlighted
-        // Part 2: { text: ": Database connection failed", highlight: false }  <- not highlighted
-
-        // This ensures only the search term is highlighted, not the entire line
-        expect($logLine)->toContain($searchQuery);
-        expect(strlen($searchQuery))->toBeLessThan(strlen($logLine));
-    });
-});
-
-/**
- * Integration documentation tests
- *
- * These tests document the expected flow of log sanitization with x-text
- */
-describe('Log Sanitization Flow with x-text', function () {
-    it('documents the secure x-text rendering flow', function () {
-        $rawLog = '<script>alert("XSS")</script>';
-
-        // Step 1: Server-side escaping (PHP)
-        $escaped = htmlspecialchars($rawLog);
-        expect($escaped)->toBe('&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;');
-
-        // Step 2: Stored in data-log-content attribute
-        // <div data-log-content="&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;" x-text="getDisplayText($el.dataset.logContent)">
-
-        // Step 3: Client-side getDisplayText() decodes HTML entities
-        // const decoded = doc.documentElement.textContent;
-        // Result: '<script>alert("XSS")</script>' (as text string)
-
-        // Step 4: x-text renders as textContent (NOT innerHTML)
-        // Alpine.js sets element.textContent = decoded
-        // Result: Browser displays '<script>alert("XSS")</script>' as visible text
-        // The script tag is never parsed or executed - it's just text
-
-        // Step 5: Highlighting via CSS class
-        // If search query matches, 'log-highlight' class is added
-        // Visual feedback is provided through CSS, not HTML injection
-    });
-
-    it('documents search highlighting with CSS classes', function () {
-        $legitimateLog = '2024-01-01T12:00:00.000Z ERROR: Database connection failed';
-
-        // Server-side: Escape and store
-        $escaped = htmlspecialchars($legitimateLog);
-        expect($escaped)->toBe($legitimateLog); // No special chars
-
-        // Client-side: If user searches for "ERROR"
-        // 1. splitTextForHighlight() divides the text into parts:
-        //    - Part 1: "2024-01-01T12:00:00.000Z " (highlight: false)
-        //    - Part 2: "ERROR" (highlight: true) <- This part gets highlighted
-        //    - Part 3: ": Database connection failed" (highlight: false)
-        // 2. Each part is rendered as a <span> with x-text (safe)
-        // 3. Only Part 2 gets the 'log-highlight' class via :class binding
-        // 4. CSS provides yellow/warning background color on "ERROR" only
-        // 5. No HTML injection occurs - just multiple safe text spans
-
-        expect($legitimateLog)->toContain('ERROR');
-    });
-
-    it('verifies no HTML injection occurs during search', function () {
-        $logWithHtml = 'User input: <img src=x onerror="alert(1)">';
-        $escaped = htmlspecialchars($logWithHtml);
-
-        // Even if log contains malicious HTML:
-        // 1. Server escapes it
-        // 2. x-text renders as plain text
-        // 3. Search highlighting uses CSS class, not HTML tags
-        // 4. User sees the literal text with highlight background
-        // 5. No script execution possible
-
-        expect($escaped)->toContain('&lt;img');
-        expect($escaped)->toContain('onerror');
-        expect($escaped)->not->toContain('<img src=');
-    });
-
-    it('documents that user search queries cannot inject HTML', function () {
-        // User search query is only used in:
-        // 1. String matching (includes() check) - safe
-        // 2. CSS class application - safe (class name is hardcoded)
-        // 3. Match counting - safe (just text comparison)
-
-        // User query is NOT used in:
-        // 1. HTML generation - eliminated by switching to x-text
-        // 2. innerHTML assignment - x-text uses textContent only
-        // 3. DOM manipulation - only CSS classes are applied
-
-        $userSearchQuery = '<script>alert("XSS")</script>';
-
-        // The search query is used in matchesSearch() which does:
-        // line.toLowerCase().includes(this.searchQuery.toLowerCase())
-        // This is safe string comparison, no HTML parsing
-
-        expect($userSearchQuery)->toContain('<script>');
-        // But it's only used for string matching, never rendered as HTML
-    });
-});
-
-/**
- * Tests for DoS prevention in HTML entity decoding
- *
- * These tests verify that the decodeHtml() function in the client-side JavaScript
- * has proper safeguards against deeply nested HTML entities that could cause DoS.
- */
-describe('HTML Entity Decoding DoS Prevention', function () {
-    it('documents the DoS vulnerability with unbounded decoding', function () {
-        // Without a max iteration limit, an attacker could provide deeply nested entities:
-        // &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; (10 levels deep)
-        // Each iteration decodes one level, causing excessive CPU usage
-
-        $normalEntity = '&amp;lt;script&gt;';
-        // Normal case: 2-3 iterations to fully decode
-        expect($normalEntity)->toContain('&amp;');
-    });
-
-    it('verifies max iteration limit prevents DoS', function () {
-        // The decodeHtml() function should have a maxIterations constant (e.g., 3)
-        // This ensures even with deeply nested entities, decoding stops after 3 iterations
-        // Preventing CPU exhaustion from malicious input
-
-        $deeplyNested = '&amp;amp;amp;amp;amp;amp;amp;amp;lt;';
-        // With max 3 iterations, only first 3 levels decoded
-        // Remaining nesting is preserved but doesn't cause DoS
-
-        // This test documents that the limit exists
-        expect(strlen($deeplyNested))->toBeGreaterThan(10);
-    });
-
-    it('documents normal use cases work within iteration limit', function () {
-        // Legitimate double-encoding (common in logs): &amp;lt;
-        // Iteration 1: &<
-        // Iteration 2: <
-        // Total: 2 iterations (well within limit of 3)
-
-        $doubleEncoded = '&amp;lt;script&amp;gt;';
-        expect($doubleEncoded)->toContain('&amp;');
-
-        // Triple-encoding (rare but possible): &amp;amp;lt;
-        // Iteration 1: &amp;<
-        // Iteration 2: &<
-        // Iteration 3: <
-        // Total: 3 iterations (exactly at limit)
-
-        $tripleEncoded = '&amp;amp;lt;div&amp;amp;gt;';
-        expect($tripleEncoded)->toContain('&amp;amp;');
-    });
-
-    it('documents that iteration limit is sufficient for real-world logs', function () {
-        // Analysis of real-world log encoding scenarios:
-        // 1. Single encoding: 1 iteration
-        // 2. Double encoding (logs passed through multiple systems): 2 iterations
-        // 3. Triple encoding (rare edge case): 3 iterations
-        // 4. Beyond triple encoding: Likely malicious or severely misconfigured
-
-        // The maxIterations = 3 provides:
-        // - Protection against DoS attacks
-        // - Support for all legitimate use cases
-        // - Predictable performance characteristics
-
-        expect(3)->toBeGreaterThanOrEqual(3); // Max iterations covers all legitimate cases
-    });
-
-    it('verifies decoding stops at max iterations even with malicious input', function () {
-        // With maxIterations = 3, decoding flow:
-        // Input: &amp;amp;amp;amp;amp; (5 levels)
-        // Iteration 1: &amp;amp;amp;amp;
-        // Iteration 2: &amp;amp;amp;
-        // Iteration 3: &amp;amp;
-        // Stop: Max iterations reached
-        // Output: &amp; (partially decoded, but safe from DoS)
-
-        $maliciousInput = str_repeat('&amp;', 10).'lt;script&gt;';
-        // Even with 10 levels of nesting, function stops at 3 iterations
-        expect(strlen($maliciousInput))->toBeGreaterThan(50);
-        // The point is NOT that we fully decode it, but that we don't loop forever
-    });
-
-    it('confirms while loop condition includes iteration check', function () {
-        // The vulnerable code was:
-        // while (decoded !== prev) { ... }
-        //
-        // The fixed code should be:
-        // while (decoded !== prev && iterations < maxIterations) { ... }
-        //
-        // This ensures the loop ALWAYS terminates after maxIterations
-
-        $condition = 'iterations < maxIterations';
-        expect($condition)->toContain('maxIterations');
-        expect($condition)->toContain('<');
-    });
-
-    it('documents performance impact of iteration limit', function () {
-        // Without limit:
-        // - Malicious input: 1000+ iterations, seconds of CPU time
-        // - DoS attack possible with relatively small payloads
-        //
-        // With limit (maxIterations = 3):
-        // - Malicious input: 3 iterations max, milliseconds of CPU time
-        // - DoS attack prevented, performance predictable
-
-        $maxIterations = 3;
-        $worstCaseOps = $maxIterations * 2; // DOMParser + textContent per iteration
-        expect($worstCaseOps)->toBeLessThan(10); // Very low computational cost
-    });
-
-    it('verifies iteration counter increments correctly', function () {
-        // The implementation should:
-        // 1. Initialize: let iterations = 0;
-        // 2. Check: while (... && iterations < maxIterations)
-        // 3. Increment: iterations++;
-        //
-        // This ensures the counter actually prevents infinite loops
-
-        $initialValue = 0;
-        $increment = 1;
-        $maxValue = 3;
-
-        expect($initialValue)->toBe(0);
-        expect($increment)->toBe(1);
-        expect($maxValue)->toBeGreaterThan($initialValue);
-    });
-
-    it('confirms fix addresses the security advisory correctly', function () {
-        // Security advisory states:
-        // "decodeHtml() function uses a loop that could be exploited with
-        //  deeply nested HTML entities, potentially causing performance issues or DoS"
-        //
-        // Fix applied:
-        // 1. Add maxIterations constant (value: 3)
-        // 2. Add iterations counter
-        // 3. Update while condition to include iteration check
-        // 4. Increment counter in loop body
-        //
-        // This directly addresses the vulnerability
-
-        $vulnerabilityFixed = true;
-        expect($vulnerabilityFixed)->toBeTrue();
     });
 });