Web Components는 재사용 가능한 UI를 캡슐화할 수 있는 웹 표준 기술입니다. Custom Elements, Shadow DOM, HTML Template 등으로 구성되며 프레임워크 독립적이라는 장점이 있지만, 컴포넌트 단위에서 보안을 고려하지 않으면 전체 애플리케이션의 공격 표면이 넓어질 수 있습니다. 본 글에서는 Web Components에서 신경 써야 할 주요 보안 이슈와 전략을 정리합니다.
Shadow DOM의 보안 한계와 우회 방지
Shadow DOM은 컴포넌트 내부 구조를 외부로부터 숨기는 데 효과적입니다. 외부에서 Shadow Root 내부에 직접 접근할 수 없도록 캡슐화되어 있기 때문에 스타일 충돌이나 의도치 않은 DOM 조작을 방지할 수 있습니다. 하지만 이는 **보안 기능이 아닌 구조적 은닉**일 뿐이며, 실제로 JavaScript를 통해 내부 요소에 접근이 가능하기 때문에 과신해서는 안 됩니다.
예를 들어 다음과 같이 shadowRoot를 노출할 경우 내부 구조가 외부 스크립트에 의해 열릴 수 있습니다:
const el = document.querySelector('my-element');
console.log(el.shadowRoot); // 내부 구조 접근 가능
이 문제를 방지하기 위해 **open 모드 대신 closed 모드**로 Shadow DOM을 설정할 수 있습니다:
this.attachShadow({ mode: 'closed' });
이렇게 하면 shadowRoot 속성을 통해 외부에서 내부 DOM에 직접 접근할 수 없습니다. 또한 컴포넌트 내부에서 중요한 데이터나 토큰을 보관하지 말고, 상태는 반드시 상위 앱에서 관리하도록 분리 설계하는 것이 좋습니다.
사용자 입력 처리 시 XSS 대응
Web Components는 독립적인 DOM 구조를 제공하지만, 내부에서 사용자 입력을 처리할 때는 여전히 XSS(크로스 사이트 스크립팅) 취약점에 노출될 수 있습니다. 예를 들어 템플릿을 바인딩하거나 innerHTML을 사용하는 경우 악성 스크립트가 삽입될 수 있습니다.
다음은 위험한 코드 예시입니다:
this.shadowRoot.innerHTML = `Hello ${userInput}`;
이 경우 userInput에 악성 스크립트가 포함될 경우 HTML 구조 안으로 그대로 주입될 수 있습니다. 이를 방지하기 위해 다음과 같은 전략을 사용할 수 있습니다:
- 직접 innerHTML을 사용하지 말고 DOM API를 활용해 안전하게 렌더링
- 템플릿 리터럴에 사용자 입력을 그대로 삽입하지 않기
- 타사 라이브러리 사용 시 DOMPurify 등 정제 필터 적용
또한 컴포넌트 외부에서 이벤트나 속성(attribute)으로 전달된 값도 반드시 검증하여 내부 렌더링 전에 Escape 처리하는 습관이 필요합니다. Shadow DOM은 구조 보호일 뿐, 콘텐츠의 보안성을 보장하지 않으므로 입력값에 대한 철저한 방어가 핵심입니다.
사용자 정의 요소(CES) 권한 및 통신 제한
Custom Elements는 애플리케이션 내 어디서든 사용될 수 있기 때문에, **불필요한 정보 노출**이나 **전역 상태 조작**으로 인한 보안 사고를 예방해야 합니다. 특히 다음과 같은 상황을 유의해야 합니다:
- 전역 window 객체에 접근하는 코드 사용 자제
- 외부 script에 내부 이벤트나 상태 노출 금지
- 서버 API 호출 시 내부 key, token 등을 하드코딩 금지
컴포넌트 간 통신은 반드시 CustomEvent와 이벤트 버블링을 활용하고, 외부로 노출되는 API(메서드, 속성)는 명확하게 제한해야 합니다. 또한 내부 DOM을 외부에서 탐지하지 못하도록 Part 또는 slot에 불필요한 ID나 클래스명을 사용하지 말고, 스타일 및 구조도 보안 위협을 고려해 설계해야 합니다.
추가적으로 외부 통신이 필요한 경우 CORS 정책을 철저히 적용하고, CSP(Content Security Policy) 설정을 통해 외부 스크립트 주입이나 미승인 도메인의 리소스 요청을 제한할 수 있습니다. 보안 헤더 설정은 Web Components에서만 적용되는 것은 아니지만, 컴포넌트 단위 보안을 높이는 데 매우 효과적입니다.
Web Components는 모듈화된 UI 구성에 매우 유리한 기술이지만, Shadow DOM이나 캡슐화 구조를 보안 기능으로 착각해서는 안 됩니다. open 모드와 closed 모드의 차이 이해, 사용자 입력에 대한 철저한 검증, DOM 조작 시 XSS 방지, 외부 통신 제한, CSP 정책 적용 등 다양한 보안 전략을 컴포넌트 설계 시 기본적으로 고려해야 합니다. 이러한 습관이 장기적으로 안전한 웹 아키텍처를 만드는 기반이 됩니다.