마케팅 조직은 여전히 손으로 만든 정적 HTML을 빠른 로딩·감사 대응·적절한 가드레일이 있을 때 CDN 장애에도 살아남는다는 이유로 배포합니다.2026년 필수 가드레일은 모든 서드파티 <script>와 <link rel="stylesheet">에 Subresource Integrity(SRI), 무결성 검사에 참여하는 페치에는 crossorigin="anonymous", 실제 로드와 일치하는 Content-Security-Policy 헤더입니다. 컴포넌트 격리는 CSS @scope로 정적 마케 HTML 스타일 분리 글의 패턴과 함께 쓰면 시각적 퇴보를 공급망 사고로 오인하지 않습니다.
이 글은 실패 양상·수치 기대·배포 순서를 정리합니다.SHA-384 다이제스트, 업스트림 패치 때마다 해시를 다시 계산하는 데 릴리스당 약 15분, 컴플라이언스 동결 전 클라우드 Mac mini로 하루 약 16.9달러 실기 리허설이라는 운영 그림으로 읽어 주세요.
정적 사이트에도 SRI가 필요한 이유
서버에서 동적 코드를 안 돌려도 CDN 엣지나 중간 캐시가 제공하는 JavaScript가 바뀌면 결제 폼 데이터 유출이 현실이 됩니다. SRI는 고정 다이제스트와 다른 바이트 실행을 거부해 조용한 공급망 침해를 콘솔 오류로 바꿔 관측 가능하게 합니다. SRI 없는 정적 HTML은 CI 러너에서 방문자까지 경로상 모든 중개를 신뢰하는 셈입니다.
규제 산업에서는 실행한 OpenSSL 명령과 결과 해시를 변경 티켓에 붙여 감사인이 독립 재현할 수 있게 합니다. 증거는 스크린샷이 아니라 재현 가능한 로그가 중심입니다.
정적 파이프라인에서는 마케 담당이 CMS에서 HTML을 직접 바꾸기 때문에 벤더 스크립트 URL을 교체하는 순간 해시가 낡는 위험이 큽니다. 리뷰에서 “URL과 integrity 쌍”을 필수로 두고 프리뷰 헤더도 프로덕션과 맞추세요.
알고리즘 선택과 OpenSSL 다이제스트
벤더 스크립트에는 sha384를 권장합니다. 충돌 저항과 길이 균형이 좋고 최신 가이드와도 맞습니다. 계산 대상은 CDN이 실제로 배포하는 바이트 그대로입니다. 미니파이 후, 오리진 Brotli 사전압축, 배너 주석까지 포함해 한 바이트라도 다르면 하드 실패입니다. 객체 스토리지 업로드와 같은 단계에서 다이제스트를 생성하세요.
openssl dgst -sha384 -binary ./dist/vendor.js | openssl base64 -AGit에 체크인하는 YAML 매니페스트에 URL과 다이제스트를 함께 저장하고, HTML이 가리키는 URL에 항목이 없거나 오래되면 CI를 실패시킵니다. 나이틀리로 서드파티 URL을 다시 내려받아 비교하면 벤더의 조용한 재패치를 일찍 잡습니다.
스테이징·카나리아·프로덕션이 같은 파일명이라도 응답 헤더가 다르면 암호학적으로 같아도 브라우저 해석이 갈릴 수 있습니다. 환경마다 바이트를 고정하거나 매니페스트를 나누는지 문서화하세요.
crossorigin과 CORS 모드
교차 출처 클래식 스크립트는 integrity와 crossorigin="anonymous"를 함께 써 CORS 모드 페치로 만들고 브라우저가 검증에 필요한 정보에 닿게 합니다. crossorigin을 빼면 불투명 응답이 되어 엔진마다 검증이 건너뛰거나 달라질 수 있습니다. 어떤 CDN 경로가 관대한 Access-Control-Allow-Origin을 주는지 표로 두고, 마케가 새 번들을 올리면 속성 세트도 함께 갱신하도록 배포 게이트를 두세요.
프리로드·modulepreload 힌트에도 같은 원칙이 적용됩니다. 힌트와 실제 스크립트 속성이 어긋나면 프로덕션에서만 터지는 클래스의 버그가 납니다.
CDN 캐시 키와 퍼지 순서
번들을 바꿀 때 HTML과 JavaScript 퍼지 순서를 설계합니다. 낡은 HTML이 사라진 경로를 가리키면 404 장애, 낡은 JS가 남고 새 HTML과 맞물리면 무결성 오류가 늘어납니다. 콘텐츠 해시 파일명은 불변 캐시와 잘 맞고, 북마크 랜딩을 위해 안정 URL을 남기면 그 부트스트랩에 SRI를 유지해야 합니다.
엣지 설정에서 쿼리스트링을 캐시 키에 넣을지 바꾸면 의도치 않게 다른 객체를 받아 해시 불일치가 납니다. 인프라 변경은 프런트 매니페스트와 같은 티켓에 올리세요.
CSP: 해시, nonce, strict-dynamic
정적 사이트는 종종 script-src 'sha256-…'로 작은 부트스트랩을 허용했다가 빌드가 HTML을 내보내며 응답별 nonce-로 옮깁니다. 장수 nonce와 무제한 'unsafe-inline'을 섞지 마세요. 레거시 인라인을 남기면 경로를 분리해 감시 밀도를 높입니다.strict-dynamic은 체인 로더에 효과적이지만 첫 신뢰 스크립트가 루트입니다. 검토자용으로 신뢰 루트를 그림으로 남기세요.
Content-Security-Policy-Report-Only로 시험하고 위반 리포트의 소음과 실제 피해를 구분합니다. 인라인 이벤트나 낡은 태그 매니저가 남아 있으면 리포트만 폭주할 수 있습니다.
Safari·WebKit 세부
Safari 네트워크 스택은 요청 결합이 적극적입니다. 무결성 실패를 볼 때 추적 방지 기본값·ITP·스토리지 API 상호작용을 함께 봅니다. Web Inspector 오류 타이밍은 Chromium과 달라 QA에서 화면 녹화로 디자이너 서명까지 포함합니다.macOS Safari와 iOS Safari는 별 매트릭스로 주간 이상으로 만지세요.
| 기법 | 적합한 경우 | 운영 비용 |
|---|---|---|
| SRI + 안정 URL | 레거시 랜딩 | 벤더 패치마다 수동 해시 갱신 |
| 해시 파일명 | 신규 정적 파이프라인 | 불변 캐시 규칙 필수 |
| CSP nonce | 정적 셸 + 실험 인라인 | 응답마다 헤더 주입 |
비교표: 기법과 운영 비용
위 표는 출발점입니다. 법무가 사람이 읽을 경로를 요구하면 안정 URL + SRI, 퍼지 API 비용을 줄이려면 지문 파일명, 인라인이 자주 바뀌면 nonce 축으로 읽습니다.
엔지니어링 판단 매트릭스
안정 URL의 SRI는 감사 설명이 쉬운 대신 수작업이 남습니다. 지문 파일명은 퍼지 횟수를 줄이나 CDN 캐시 규칙이 엄격해야 합니다. nonce는 실험 속도는 올리나 엣지 워커 값 재사용 실수가 치명적입니다.
드리프트를 막는 CI
각 서드파티 URL을 받아 다이제스트를 재계산해 HTML 속성과 비교하는 잡을 추가합니다. 나이틀리로 돌려 침해·조용한 업데이트를 영업 전에 잡습니다. 실패 시 자동으로 Sev-2 티켓을 열어 벤더 변경인지 공격인지 구분합니다.
PR에서 매니페스트 차이를 필수 리뷰 대상으로 두고 마케용 문서에도 “해시 갱신 절차”를 짧게 넣습니다.
폰트·모듈·워커
CDN @font-face도 포맷이 안정적이면 SRI 가치가 있습니다. ES 모듈은 import()가 CSP 제약을 물려받아 허용 목록과 importmap 대응을 문서화합니다. Dedicated Worker는 별 정책 컨텍스트를 가질 수 있어 메인 스레드 헤더 한 방으로 가정하지 마세요.
Service Worker를 쓰는 정적 사이트는 캐시된 낡은 스크립트와 새 HTML 조합으로 무결성이 깨질 수 있습니다. 스킴 전체에서 버전 규약을 정하세요.
report-uri·report-to·Report-Only
초기에는 Content-Security-Policy-Report-Only와 로그 벤더가 해석하는 report-to부터 시작합니다. 롤아웃 주에는 페이지뷰의 약 0.5~2%가 리포트를 낼 수 있어 샘플링으로 비용과 신호를 맞춥니다.
리포트 홍수는 프로덕션에만 켜진 서드파티 태그 때문인 경우가 많습니다. 스테이징에서 먼저 건수를 본 뒤 enforcing으로 넘어갑니다.
롤백 전략
알려진 양호 HTML 아티팩트와 다이제스트를 Git 태그로 보관합니다. 벤더의 조용한 재패치면 30분 안에 전방 수정으로 해시를 재계산, 자사 파이프라인 퇴보면 HTML 커밋을 먼저 되돌리고 CDN을 퍼지합니다. 무결성 실패가 급증하면 상태 페이지를 갱신하세요. 사용자에게는 빈 번들이 보이며 우아하게 내려가지 않습니다.
보안 리뷰에서 전달할 포인트
SRI는 폭발 반경을 줄이지만 CSP·프레임 보호·서버 검증을 대체하지 않습니다.스코프된 CSS는 민감 위젯으로 스타일이 새는 것을 줄여 스크립트 무결성과 보완합니다. 리뷰에는 다이제스트 불일치 시 로드가 막히는 Safari 짧은 녹화를 첨부합니다.
성공·실패 세션 모두에서 HAR을 모아 감사인이 헤더 차이를 추적하게 합니다. 무결성 실패는 실제 변조보다 Access-Control-Allow-Origin 누락과 상관하는 경우가 많습니다. 증적은 일반적인 SOC2 창에 맞춰 최소 90일 보관합니다.
Apple Silicon Mac mini 렌탈은 네이티브 WebKit·폰트 렌더링·엔터프라이즈 고객에 가까운 키체인 기본값을 재현합니다. 대략 하루 16.9달러로 프로덕션 수준 Content-Security-Policy를 프리뷰에 올리고 해외로 실기를 보내지 않고 증적을 모을 수 있습니다. 탄력 임대는 VNC와 SSH 배포 병행, 디스크 스냅샷, 실험적 script-src 강화 즉시 롤백에도 맞습니다.
마지막으로 쿠키 동의 배너를 같은 CSP로 리허설하세요. 서드파티 CMP 인라인 부트스트랩이 새 정책을 깨 금요 배포나 마감 직전에 처음 붉어지는 전형입니다. 대형 캠페인·규제 제출·실적 발표·유지보수 동결·임원 키노트 전에는 반드시 일찍 스테이징합니다.
SRI·CSP·Safari를 함께 검증
클라우드 Mac mini로 CDN 스크립트 무결성, 헤더 정책, WebKit 서명오프를 컴플라이언스 동결 전에 고정하세요.