보안: 엄격한 CSP · Trusted Types

CSP(콘텐츠 보안 정책)란 페이지가 실행하거나 적용할 수 있는 스크립트·스타일의 출처를 브라우저에 알려 XSS 같은 공격을 막는 HTTP 헤더이고, Trusted Types 는 innerHTML 같은 위험한 DOM 입력에 허가된 정책을 거친 값만 받게 하는 브라우저 기능입니다.

공공·금융 사이트는 보안약점 진단 때문에 Content-Security-Policy 에서 'unsafe-inline' 을 빼고, XSS 를 막는 Trusted Types 를 켜는 경우가 많습니다. 82chart 는 0.4 부터 아래 정책 그대로 동작합니다.

Content-Security-Policy: default-src 'self'; style-src 'self'; require-trusted-types-for 'script'; trusted-types 82chart

• 인라인 style 없음. 만들어 내는 SVG 에 style="…" 속성이 없습니다. 첫 등장 애니메이션의 지연은 c82-d1…c82-d15 클래스로, 늘어나는 기준점은 SVG 의 transform-origin 속성으로 적고 나머지는 82chart.css 에 있습니다. 크기·위치처럼 바뀌는 값은 스크립트의 CSSOM(element.style)으로 넣는데, 이것은 CSP 의 style-src 대상이 아닙니다.
• Trusted Types. 페이지가 Trusted Types 를 강제하면(require-trusted-types-for 'script'), 82chart 는 이름이 82chart 인 정책 하나를 만들어 그것으로만 SVG 를 넣습니다. 그러니 trusted-types 지시어에 82chart 를 넣어 주세요. 차트가 쓰는 글자는 모두 이스케이프(< 등)해서 만들기 때문에 정책은 받은 문자열을 바꾸지 않고 넘깁니다. 한 페이지에 82chart 가 여러 번 실려도 정책은 하나만 만듭니다.
• inline script 없음. CDN 파일과 npm 패키지 모두 eval 이나 new Function 을 쓰지 않습니다.
• 스타일시트. 82chart.css 를 같은 출처에서 <link> 로 불러오면 style-src 'self' 로 충분합니다. 번들러가 CSS 를 <style> 로 넣는 개발 모드는 따로 허용이 필요할 수 있습니다.
• PNG 내려받기는 SVG 를 blob: 이미지로 그려 바꾸므로 img-src 'self' blob: 이 필요합니다. SVG·CSV 내려받기는 추가 허용이 없어도 됩니다.

저장소의 e2e 테스트(apps/e2e/tests/csp.spec.ts)가 이 정책으로 서비스한 페이지에서 여러 종류의 차트를 그리고, 툴팁·키보드·확대 단추·범례 펼치기·메뉴를 써 본 뒤 CSP 위반이 0건인지 확인합니다.

밖으로 나가는 요청

82chart 가 스스로 보내는 요청은 하루 한 번의 사용 통계(도메인과 버전만, 데이터 없음) 하나뿐입니다. localhost, IP 주소, 점 없는 호스트 이름(http://intranet), .local · .internal · .corp · .lan · .intra · .home.arpa 같은 내부 이름에서는 보내지 않습니다. 페이지 전체에서 끄려면 <html data-82chart-telemetry="off">, 차트 하나는 telemetry: false. CSP 의 connect-src 'self' 로 막아도 차트는 그대로 동작합니다. 글꼴이나 다른 파일은 내려받지 않습니다.

인터넷이 없는 폐쇄망에서는 CDN 파일 문서의 오프라인 묶음(zip)을 반입해 쓰면 됩니다.