diff --git a/.jules/bolt.md b/.jules/bolt.md index a99ab95..c10fb9b 100644 --- a/.jules/bolt.md +++ b/.jules/bolt.md @@ -8,12 +8,6 @@ ## 2026-07-05 - content-visibility와 scrollbar jumping 방지 **Learning:** 긴 단일 페이지(static site)에서 `content-visibility: auto`를 사용하여 오프스크린 섹션의 렌더링을 최적화할 때, `contain-intrinsic-size`를 함께 지정하지 않으면 스크롤바가 튀거나 레이아웃 시프트가 발생할 수 있습니다. **Action:** 항상 길이 기반 폴백(예: `contain-intrinsic-size: 600px;`)을 선행하고, 브라우저가 실제 높이를 기억할 수 있도록 `auto` 키워드를 포함한 속성을 설정합니다. 섹션별 실제 높이에 맞춰 크기를 조정합니다. -## 2024-05-24 - 이미지 디코딩 최적화를 통한 메인 스레드 차단 방지 -**Learning:** 이미지 로드 시 기본적으로 메인 스레드에서 디코딩을 수행하기 때문에 메인 스레드 차단 및 UI jank가 발생할 수 있습니다. -**Action:** 오프스크린 이미지나 레이지 로드 이미지 등에 `decoding="async"` 속성을 추가하여 백그라운드 스레드에서 디코딩 작업을 처리하도록 함으로써 초기 페이지 로드 성능을 개선합니다. -## 2024-05-24 - LCP 최적화 및 SVG 이미지 처리 패턴 -**Learning:** LCP(가장 큰 콘텐츠 풀 페인트) 대상 이미지에 `decoding="async"` 속성을 부여하면 브라우저가 디코딩을 백그라운드로 넘기게 되어 초기 페인팅이 지연되는 안티패턴이 될 수 있습니다. 또한, SVG 이미지는 래스터 이미지처럼 디코딩되는 것이 아니라 파싱되므로 `decoding="async"`의 효과가 거의 없음을 확인했습니다. -**Action:** LCP 이미지에는 `fetchpriority="high"`를 유지하되 `decoding="async"`는 사용하지 않아 빠르게 동기적으로 그려지도록 하며, 다른 요소들에서 SVG를 사용할 때는 이 사실을 인지하고 무분별한 속성 적용을 지양합니다. ## 2026-07-10 - Remove unnecessary DOMPurify for performance **Learning:** 애플리케이션이 `textContent`와 같은 안전한 DOM API만 사용하고 `innerHTML` 등의 위험한 싱크를 사용하지 않는다면 DOMPurify와 같은 라이브러리를 통해 Trusted Types 정책을 생성할 필요가 없음. diff --git a/.jules/sentinel.md b/.jules/sentinel.md index c7c7ffe..4f173bc 100644 --- a/.jules/sentinel.md +++ b/.jules/sentinel.md @@ -18,22 +18,23 @@ **Vulnerability:** 애플리케이션에 Trusted Types가 적용되지 않아, 향후 innerHTML과 같은 안전하지 않은 DOM sink가 도입될 경우 잠재적인 DOM 기반 XSS 공격에 취약해질 수 있음. **Learning:** 애플리케이션이 `textContent`와 같은 안전한 DOM API만을 사용하고 위험한 sink가 없기 때문에, Trusted Types 정책이나 DOMPurify 같은 외부 새니타이저 없이도 CSP를 통해 네이티브하게 `require-trusted-types-for 'script'`를 강제할 수 있음. **Prevention:** 적용 가능할 때는 항상 CSP에 Trusted Types를 적용하여 DOM XSS 회귀를 선제적으로 방지해야 함. - ## 2026-07-03 - Native Trusted Types enforcement **Vulnerability:** Trusted Types 정책 부재로 인한 DOM 기반 XSS (Cross-Site Scripting) 취약점 위험. **Learning:** 이 정적 웹사이트는 `innerHTML` 같은 위험한 Sink를 사용하지 않고 `textContent`, `setAttribute` 등 안전한 DOM API만을 사용하고 있으므로, 별도의 Trusted Types 정책이나 외부 Sanitizer(예: DOMPurify) 없이도 CSP에서 `require-trusted-types-for 'script'`를 안전하게 기본 강제할 수 있음을 확인했습니다. **Prevention:** CSP에 `require-trusted-types-for 'script'`를 적용하여 XSS를 방어하고, 앞으로도 안전한 DOM API만 사용하도록 합니다. 부득이하게 `innerHTML`을 도입해야 할 경우에는 반드시 적절한 Sanitizer를 함께 구성해야 합니다. - ## 2026-07-01 - Add Trusted Types Policy via DOMPurify **Vulnerability:** Application lacked Trusted Types enforcement, which left it potentially vulnerable to DOM-based XSS if DOM sinks (like `innerHTML`) were manipulated. **Learning:** Enforcing `require-trusted-types-for 'script'` in CSP causes Chromium-based browsers to throw a Trusted Types violation (a `TypeError`) when a string is assigned to a DOM sink without a registered policy, rather than crashing the browser. **Prevention:** When a default Trusted Types policy is needed, pair the CSP `require-trusted-types-for 'script'` directive with a defensively loaded sanitizer such as DOMPurify, defer the scripts in dependency order, and keep policy creation wrapped so an existing policy or CSP restriction does not break page load. - ## 2026-07-08 - Trusted Types 기본 방어 적용 **Vulnerability:** DOM 기반 XSS (안전하지 않은 DOM 싱크 노출 위험) -**Learning:** 이 앱은 주로 `textContent`와 같은 안전한 DOM API를 사용하고 `innerHTML` 등의 위험한 싱크를 피함. 이러한 환경에서는 브라우저 네이티브인 `require-trusted-types-for 'script'` CSP 규칙이 1차 방어선이며, 기본 Trusted Types 정책과 DOMPurify는 실제 HTML 싱크 또는 호환성 요구가 있을 때 방어적으로 로드해야 함. +**Learning:** 이 앱은 주로 `textContent`와 같은 안전한 DOM API 사용을 하고 `innerHTML` 등의 위험한 싱크를 피함. 이러한 환경에서는 브라우저 네이티브인 `require-trusted-types-for 'script'` CSP 규칙이 1차 방어선이며, 기본 Trusted Types 정책과 DOMPurify는 실제 HTML 싱크 또는 호환성 요구가 있을 때 방어적으로 로드해야 함. **Prevention:** 새로운 기능을 추가할 때 앱의 DOM API 사용 방식을 먼저 파악하고, 네이티브 Trusted Types CSP만으로 충분한지 또는 DOMPurify 기반 기본 정책이 필요한지 판단할 것. 기본 정책을 유지한다면 `window.trustedTypes`와 `window.DOMPurify`를 확인하고 `try/catch`로 감싸 페이지 로드를 깨지 않도록 할 것. ## 2026-07-12 - Strict CSP in Component Gallery **Vulnerability:** Weak Content-Security Policy due to lack of headers and usage of inline scripts/styles in `components/index.html`. **Learning:** Adding a strict CSP (`style-src 'self'`) breaks inline HTML style attributes and inline `data:` image URIs in CSS, requiring extraction into CSS classes and explicit scheme additions (e.g., `img-src 'self' data:;`). **Prevention:** Always refactor inline `