🛡️ Sentinel: [security improvement]

.jules/sentinel.md

@@ -83,3 +83,7 @@
 **Vulnerability:** 정적 HTML 생성 도구에서 매번 다른 Nonce를 동적으로 생성하여 CSP에 적용하는 것은, 캐싱 효율을 저하시킬 뿐만 아니라 정적 배포 환경(예: GitHub Pages 등)에서 올바른 보안 정책 수립을 방해할 수 있는 안티 패턴입니다.
 **Learning:** 정적으로 고정된 인라인 스타일이나 스크립트에는 난수화된 Nonce보다 콘텐츠 자체의 해시(SHA-256 등)를 사용하는 것이 안전하고 일관된 방식임을 배웠습니다.
 **Prevention:** 자동 생성되는 정적 HTML의 콘텐츠 보안 정책(CSP)에는 `style-src 'sha256-<HASH>'` 방식을 적용하고, `<style>` 태그에서 불필요한 `nonce` 속성을 제거하여 브라우저의 무결성 검증 기능을 적극 활용하십시오.
+## 2026-08-01 - [html4tree] CSP 해시 불일치 방지를 위한 인라인 스타일 정제 및 성능 최적화
+**Vulnerability:** Kotlin 다중 줄 문자열(multiline string)을 사용하여 인라인 스타일을 주입할 때, 의도치 않은 공백이나 줄바꿈이 포함되면 브라우저가 계산하는 CSP 해시값과 생성된 메타 태그의 해시값이 일치하지 않아(CSP Hash Mismatch), 보안 정책이 올바르게 적용되지 않거나 스타일이 차단되는 문제가 발생합니다.
+**Learning:** 콘텐츠 보안 정책(CSP) 해시는 대상 콘텐츠의 정확한 내부 텍스트(inner text)를 기반으로 계산됩니다. 따라서 템플릿에 문자열을 삽입할 때 암시적인 패딩이나 여백이 포함되지 않도록 주의해야 하며, 매번 함수 호출 시 해시를 계산하는 것은 성능 저하를 일으킬 수 있습니다.
+**Prevention:** 해시 계산 전 대상 문자열에 `.trimIndent()`를 적용하여 공백을 제거하고, HTML에 주입할 때 `<style>${exactStyleContent}</style>`와 같이 공백 없이 주입하십시오. 또한 고정된 정적 문자열과 해시 계산은 `private val` 형태의 최상위 상수로 끌어올려 중복 계산과 메모리 할당을 방지하십시오.

src/main/kotlin/html4tree/main.kt

@@ -13,6 +13,74 @@ import com.github.ajalt.clikt.parameters.options.default
 import com.github.ajalt.clikt.parameters.arguments.argument
 import com.github.ajalt.clikt.parameters.types.int
 
+private val exactStyleContent = """
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  line-height: 1.5;
+  padding: 1rem;
+  color: #1f2328;
+}
+main {
+  max-width: 800px;
+  margin: 0 auto;
+}
+ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+a.dir-link {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  width: 100%;
+  overflow-wrap: anywhere;
+  box-sizing: border-box;
+}
+.icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  text-align: center;
+}
+a {
+  padding: 0.5rem;
+  text-decoration: none;
+  color: #0969da;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, outline-color 0.2s ease;
+}
+a:hover, a:focus-visible {
+  background-color: #f6f8fa;
+  text-decoration: underline;
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  a {
+    transition: none;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #0d1117;
+    color: #c9d1d9;
+  }
+  a {
+    color: #58a6ff;
+  }
+  a:hover, a:focus-visible {
+    background-color: #161b22;
+    outline-color: #58a6ff;
+  }
+}
+.empty-dir {
+  padding: 0.5rem;
+  opacity: 0.7;
+  font-style: italic;
+}
+""".trimIndent()
+
+private val styleHash = "sha256-" + Base64.getEncoder().encodeToString(MessageDigest.getInstance("SHA-256").digest(exactStyleContent.toByteArray(Charsets.UTF_8)))
+
 class Html4tree : CliktCommand() {
     val maxLevel:Int by option(help="Number of levels deep for which to generate an index.html file", hidden = false).int().default(-1)
     val topDir: String by argument(help="Top directory to crawl")
@@ -244,78 +312,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
 
     val exclude: Set<String> = excludeSet ?: process_ignore_file(curr_dir)
 
-    val cssContent = """
-              body {
-                font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-                line-height: 1.5;
-                padding: 1rem;
-                color: #1f2328;
-              }
-              main {
-                max-width: 800px;
-                margin: 0 auto;
-              }
-              ul {
-                list-style-type: none;
-                padding-left: 0;
-              }
-              a.dir-link {
-                display: flex;
-                align-items: flex-start;
-                gap: 0.5rem;
-                width: 100%;
-                overflow-wrap: anywhere;
-                box-sizing: border-box;
-              }
-              .icon {
-                flex-shrink: 0;
-                width: 1.25rem;
-                text-align: center;
-              }
-              a {
-                padding: 0.5rem;
-                text-decoration: none;
-                color: #0969da;
-                border-radius: 4px;
-                transition: background-color 0.2s ease, outline-color 0.2s ease;
-              }
-              a:hover, a:focus-visible {
-                background-color: #f6f8fa;
-                text-decoration: underline;
-                outline: 2px solid #0969da;
-                outline-offset: -2px;
-              }
-              @media (prefers-reduced-motion: reduce) {
-                a {
-                  transition: none;
-                }
-              }
-              @media (prefers-color-scheme: dark) {
-                body {
-                  background-color: #0d1117;
-                  color: #c9d1d9;
-                }
-                a {
-                  color: #58a6ff;
-                }
-                a:hover, a:focus-visible {
-                  background-color: #161b22;
-                  outline-color: #58a6ff;
-                }
-              }
-              .empty-dir {
-                padding: 0.5rem;
-                opacity: 0.7;
-                font-style: italic;
-              }
-              """
-
-    val styleHash = "sha256-" + Base64.getEncoder().encodeToString(MessageDigest.getInstance("SHA-256").digest(cssContent.toByteArray(Charsets.UTF_8)))
-
-    val css = """
-              <style>
-${cssContent}              </style>
-              """
+    val css = """<style>${exactStyleContent}</style>"""
 
     val index_top = """<!doctype html>
 <html lang="ko">