# 보안: 엄격한 CSP · Trusted Types

> 'unsafe-inline' 없는 CSP, Trusted Types 정책 '82chart', 폐쇄망의 외부 요청.

Source: https://82chart.com/docs/security/

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

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

```http
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 파일](https://82chart.com/docs/cdn/) 문서의 오프라인 묶음(zip)을 반입해 쓰면 됩니다.