HTML/CSS 미드레벨 보안 면접
새 면접Q. 사용자가 입력한 내용을 HTML 페이지에 표시하는 게시판을 개발 중입니다. XSS(Cross-Site Scripting) 공격을 방지하기 위해 HTML/CSS 레벨에서 적용할 수 있는 방어 기법들을 설명해주세요.
HTML 특수문자 처리, CSP 헤더, 그리고 HTML5의 보안 속성들을 고려해보세요.
먼저 사용자 입력값의 HTML 특수문자(<, >, &, ', ")를 HTML 엔티티(<, >, &, ', ")로 이스케이프 처리해야 합니다. Content-Security-Policy 헤더를 meta 태그로 설정하여 인라인 스크립트 실행을 차단하고 신뢰할 수 있는 출처의 리소스만 허용합니다. iframe을 사용할 경우 sandbox 속성을 적용하여 스크립트 실행을 제한하고, 외부 링크에는 rel='noopener noreferrer'를 추가하여 window.opener 접근을 차단합니다. 또한 httpOnly와 Secure 플래그가 설정된 쿠키를 사용하고, X-XSS-Protection 헤더를 활성화하여 브라우저의 XSS 필터를 작동시킵니다.
- • 사용자 입력값의 HTML 특수문자를 엔티티로 이스케이프 처리
- • Content-Security-Policy를 통한 인라인 스크립트 차단 및 리소스 출처 제한
- • iframe sandbox 속성과 rel='noopener noreferrer' 적용
- • httpOnly, Secure 쿠키 플래그 및 X-XSS-Protection 헤더 활성화
게시판, 댓글 시스템, 사용자 프로필 등 UGC(User Generated Content)를 다루는 모든 웹 서비스에서 필수적으로 적용해야 하는 보안 조치입니다.
CSP의 nonce 방식과 hash 방식의 차이점과 각각의 사용 시나리오를 설명해주세요.
Q. 금융 서비스 웹사이트를 개발하던 중 보안 감사에서 Clickjacking 취약점이 발견되었습니다. 공격자가 투명한 iframe으로 우리 사이트를 덮어씌워 사용자의 클릭을 가로채는 상황입니다. HTML/CSS와 HTTP 헤더를 활용하여 이 문제를 해결하는 방법을 설명해주세요.
iframe 삽입을 제어하는 HTTP 헤더와 CSS 기법, 그리고 자바스크립트 없이 가능한 방어 방법을 생각해보세요.
가장 효과적인 방법은 X-Frame-Options 헤더를 'DENY' 또는 'SAMEORIGIN'으로 설정하여 다른 도메인에서 iframe으로 삽입되는 것을 차단하는 것입니다. 더 세밀한 제어를 위해서는 CSP의 frame-ancestors 디렉티브를 사용하여 허용할 부모 도메인을 명시적으로 지정할 수 있습니다. CSS 레벨에서는 iframe { display: none; } 같은 스타일을 적용하되, 이는 보조 수단으로만 사용해야 합니다. 추가로 SameSite 쿠키 속성을 'Strict' 또는 'Lax'로 설정하여 크로스 사이트 요청 시 쿠키 전송을 제한함으로써 공격의 효과를 감소시킬 수 있습니다.
- • X-Frame-Options 헤더를 DENY 또는 SAMEORIGIN으로 설정
- • CSP의 frame-ancestors 디렉티브로 허용 도메인 명시
- • SameSite 쿠키 속성으로 크로스 사이트 요청 제한
- • CSS 기반 방어는 보조 수단으로만 활용
온라인 뱅킹, 결제 페이지, 로그인 폼 등 중요한 사용자 액션이 발생하는 페이지에서 필수적으로 적용해야 하는 보안 조치입니다.
X-Frame-Options와 CSP frame-ancestors의 차이점과 브라우저 호환성 측면에서 어떤 전략을 취해야 할까요?
Q. GDPR과 개인정보보호법을 준수해야 하는 글로벌 서비스의 로그인 폼을 설계하고 있습니다. HTML 폼 요소와 속성, CSS를 활용하여 비밀번호 입력 시 보안성을 높이고 개인정보 유출을 방지하는 방법들을 구체적으로 설명해주세요. 특히 브라우저 자동완성, 캐싱, 개발자도구 노출 등의 위험을 고려해야 합니다.
HTML5 input 속성들, autocomplete 정책, 그리고 민감정보가 메모리나 로그에 남지 않도록 하는 방법을 생각해보세요.
비밀번호 필드에는 type='password'와 함께 autocomplete='new-password' 또는 'current-password'를 명시하여 브라우저의 자동완성 동작을 제어해야 합니다. 민감정보 입력 폼에는 autocomplete='off'를 설정하고, 전체 폼에 method='POST'를 사용하여 URL에 데이터가 노출되지 않도록 합니다. 입력 필드에 name 속성 대신 data 속성을 활용하거나, 브라우저 히스토리에 남지 않도록 Cache-Control과 Pragma 헤더를 설정합니다. CSS에서는 -webkit-text-security: disc; 속성으로 추가 마스킹을 적용하고, user-select: none; 으로 복사를 방지할 수 있습니다. 또한 inputmode='none'과 pattern 속성을 조합하여 가상 키보드 노출을 제어하고, readonly 속성을 동적으로 해제하여 자동완성 공격을 방어합니다. 폼 제출 후에는 JavaScript로 입력값을 즉시 초기화하되, HTML만으로는 novalidate 속성으로 브라우저 기본 검증 메시지에 입력값이 노출되는 것을 방지해야 합니다.
- • autocomplete 속성을 세밀하게 제어하여 민감정보 자동완성 방지
- • POST 메서드 사용 및 Cache-Control 헤더로 URL/캐시 노출 차단
- • CSS 속성(-webkit-text-security, user-select)으로 추가 보안 레이어 구성
- • inputmode, pattern, readonly 속성 조합으로 입력 환경 제어
- • novalidate로 브라우저 검증 메시지의 데이터 노출 방지
로그인, 회원가입, 비밀번호 변경, 결제정보 입력 등 개인정보와 인증정보를 다루는 모든 폼에서 법적 컴플라이언스와 보안을 동시에 만족시켜야 하는 상황입니다.
최근 Password Manager와의 통합을 고려할 때, autocomplete='off'가 오히려 사용자 경험을 해치는 경우가 있습니다. 보안과 UX 사이의 균형을 어떻게 맞추시겠습니까?
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!