🎨 Palette: 반응형 HTML 레이아웃 및 다크 모드 지원 추가

.jules/sentinel.md

@@ -22,3 +22,7 @@
 **Vulnerability:** Defense in Depth (CSP Missing)
 **Learning:** Even when inputs are properly escaped, statically generated HTML that displays file/directory structures should implement a Content Security Policy (CSP) to provide an extra layer of defense against potential XSS bypasses.
 **Prevention:** Include a strict CSP meta tag (e.g., `default-src 'none'; style-src 'unsafe-inline';`) in auto-generated HTML headers when external scripts or resources are not required.
+## 2026-07-04 - XSS in HTML Escaping Function
+**Vulnerability:** The custom `escapeHtml` function did not escape forward slashes (`/`) and backslashes (`\`), allowing potential Cross-Site Scripting (XSS) if malicious payload relies on those unescaped characters.
+**Learning:** Custom sanitization functions are prone to miss edge cases. When rolling a manual HTML escaper, it is critical to encode all sensitive structural characters including slashes, or preferably use a well-tested library.
+**Prevention:** Always test custom escaping functions extensively and consider a security review. When modifying output sanitization logic, make sure the unit tests exhaustively cover special characters (e.g., `&<>\"'\`/\`).

CHANGELOG.md

@@ -0,0 +1,9 @@
+# 변경 사항
+
+## [Unreleased]
+### 추가됨
+- 생성된 HTML 디렉토리 트리의 가독성을 개선하기 위해 시스템 폰트, 반응형 최대 너비 설정, 그리고 다크 모드(`@media (prefers-color-scheme: dark)`) 지원을 추가했습니다. (UX 개선)
+
+### 수정됨
+- 최상위 디렉토리가 심볼릭 링크인 경우를 올바르게 거부하도록 검증 로직을 수정했습니다. 이전에 `canonicalFile` 호출로 인해 발생하는 검증 우회 버그를 해결했습니다.
+- 보안: `escapeHtml` 함수에서 `/` 및 `\` 문자를 추가로 이스케이프하도록 수정하여 XSS 취약점을 완화했습니다.

src/main/kotlin/html4tree/main.kt

@@ -23,8 +23,8 @@ fun main(args: Array<String>)  = Html4tree().main(args)
 
 fun go(topDir: String, maxLevel: Int)  {
     require(topDir.isNotBlank())
+    require(Files.isDirectory(File(topDir).toPath(), LinkOption.NOFOLLOW_LINKS)) { "Top directory must be an existing non-symlink directory" }
     val top_dir = File(topDir).canonicalFile
-    require(Files.isDirectory(top_dir.toPath(), LinkOption.NOFOLLOW_LINKS)) { "Top directory must be an existing non-symlink directory" }
 
     val ll = LinkedList()
 
@@ -55,6 +55,8 @@ fun String.escapeHtml(): String {
                .replace("\"", "&quot;")
                .replace("'", "&#x27;")
                .replace("`", "&#x60;")
+               .replace("/", "&#x2F;")
+               .replace("\\", "&#x5C;")
 }
 
 fun String.urlEncodePath(): String {
@@ -134,6 +136,15 @@ fun process_dir(curr_dir: File){
 
     val css = """
               <style>
+              body {
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+                line-height: 1.6;
+                max-width: 800px;
+                margin: 0 auto;
+                padding: 2rem 1rem;
+                color: #24292e;
+                background-color: #ffffff;
+              }
               ul {
                 list-style-type: none;
                 padding-left: 0;
@@ -150,6 +161,19 @@ fun process_dir(curr_dir: File){
                 outline: 2px solid #0366d6;
                 outline-offset: -2px;
               }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  color: #c9d1d9;
+                  background-color: #0d1117;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline: 2px solid #58a6ff;
+                }
+              }
               </style>
               """
 

src/test/kotlin/html4tree/MainTest.kt

@@ -37,7 +37,9 @@ class MainTest {
         assertEquals(""", "\"".escapeHtml())
         assertEquals("'", "'".escapeHtml())
         assertEquals("`", "`".escapeHtml())
-        assertEquals("&amp;&lt;&gt;&quot;&#x27;&#x60;", "&<>\"'`".escapeHtml())
+        assertEquals("&#x2F;", "/".escapeHtml())
+        assertEquals("&#x5C;", "\\".escapeHtml())
+        assertEquals("&amp;&lt;&gt;&quot;&#x27;&#x60;&#x2F;&#x5C;", "&<>\"'`/\\".escapeHtml())
         assertEquals("normal text", "normal text".escapeHtml())
     }
 
@@ -160,6 +162,8 @@ class MainTest {
         assertFalse(htmlContent.contains("test.ignore"))
         assertTrue(htmlContent.contains("Content-Security-Policy"))
         assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
+        assertTrue(htmlContent.contains("max-width: 800px;"))
+        assertTrue(htmlContent.contains("@media (prefers-color-scheme: dark)"))
     }
 
     @Test