🛡️ Sentinel: [MEDIUM] Fix CSP hash mismatch for inline styles

.gitignore

@@ -4,4 +4,5 @@
 # Ignore Gradle build output directory
 build
 
-.idea
+.idea
+node_modules/

.jules/sentinel.md

@@ -83,3 +83,8 @@
 **Vulnerability:** 정적 HTML 생성 도구에서 매번 다른 Nonce를 동적으로 생성하여 CSP에 적용하는 것은, 캐싱 효율을 저하시킬 뿐만 아니라 정적 배포 환경(예: GitHub Pages 등)에서 올바른 보안 정책 수립을 방해할 수 있는 안티 패턴입니다.
 **Learning:** 정적으로 고정된 인라인 스타일이나 스크립트에는 난수화된 Nonce보다 콘텐츠 자체의 해시(SHA-256 등)를 사용하는 것이 안전하고 일관된 방식임을 배웠습니다.
 **Prevention:** 자동 생성되는 정적 HTML의 콘텐츠 보안 정책(CSP)에는 `style-src 'sha256-<HASH>'` 방식을 적용하고, `<style>` 태그에서 불필요한 `nonce` 속성을 제거하여 브라우저의 무결성 검증 기능을 적극 활용하십시오.
+
+## 2024-07-31 - [html4tree] CSP Hash Mismatch in Inline Styles
+**Vulnerability:** Inline styles with incorrectly calculated Content-Security-Policy (CSP) hashes were being blocked by the browser. This weakens the security posture and causes styles to break or inline scripts to fail execution, negating the defense-in-depth provided by CSP.
+**Learning:** The browser calculates CSP hashes based on the *exact* inner text content. When injecting multiline string templates in Kotlin, surrounding whitespace or newline paddings in the template wrapper implicitly alter the final string, causing a mismatch with the hash calculated on the unpadded content string.
+**Prevention:** Always apply `.trimIndent()` to multiline content strings before hashing them, and inject them into the HTML structure without any implicit padding or extra newlines (e.g., `<style>${exactStyleContent}</style>`) to ensure perfect hash matching.

src/main/kotlin/html4tree/main.kt

@@ -245,77 +245,74 @@ 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;
-              }
-              """
+        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()
 
     val styleHash = "sha256-" + Base64.getEncoder().encodeToString(MessageDigest.getInstance("SHA-256").digest(cssContent.toByteArray(Charsets.UTF_8)))
 
-    val css = """
-              <style>
-${cssContent}              </style>
-              """
+    val css = "<style>${cssContent}</style>"
 
     val index_top = """<!doctype html>
 <html lang="ko">