프론트엔드의 보안

프론트엔드에서 보안이란 생각보다 잘 생각되지 않는 부분입니다.

주로 성능, 접근성, SEO와 같은 부분들을 기반으로 웹 사이트의 퀄리티를 체크하게 됩니다.

하지만 악의적인 공격에 대해 얼마나 이것을 잘 방어할 수 있는지에 대한 것은 잘 체크되지 않습니다.

우리가 성능, 접근성, SEO를 체크할때 lighthouse를 사용하듯이 보안 기능을 측정할 수 있는 사이트가 있습니다.

Security Headers 는 response header를 기반으로 보안 점수를 제공하는 사이트입니다.

 

웹에서의 공격 방식

1. SQL Injection

악의적인 사용자가 애플리케이션의 보안 취약점을 이용해서 데이터베이스에 잘못된 SQL 명령어를 주입하는 공격 기법입니다.

대응 방안:

- 입력값 검증하기.

- 준비된 구문(Prepared Statement) 사용하기.

- 특수문자 필터링하기.

 

2. XSS (Cross-Site Scripting)

해커가 웹사이트에 악성 스크립트를 몰래 심어두는 공격 방법입니다.

대응 방안:

- 스크립트 태그의 입력 방지하기.

- 특수문자 변환하기.

- 쿠키 설정 확인하기(httpOnly).

- 클라이언트에 중요한 데이터 담지 않기.

 

3. CSRF (Cross-Site Request Forgery)

사용자가 인증된 상태에서 의도하지 않은 요청을 보내도록 만드는 공격입니다.

대응 방안:

- CSRF 토큰 사용하기.

- Referer 헤더 확인하기.

- 추가 인증요소 사용하기.

 

4. 클릭 재킹 (Clickjacking)

사용자를 속여서 자신이 클릭하고 있다고 인지하는 것과 다른 것을 클릭하게 속이는 악의적인 기법입니다.

대응 방안:

- X-Frame-Options 헤더 사용하기.

- CSP의 frame-ancestors 속성 사용하기.

- SameSite 쿠키 사용하기. (strict, lax 속성의 경우 iframe 내의 요청에 포함되지 않음)

 

보안 대책

1. 컨텐츠 보안 정책 (CSP) 사용

컨텐츠 보안 정책(CSP)는 Mozila 재단에서 만든 표준으로 XSS 및 클릭재킹을 포함하여 코드 삽입 공격을 방어합니다.

CSP는 인라인 코드 실행을 비활성화하고, 도메인을 제한하여 리소스를 불러오는데 제한을 걸 수 있습니다.

외부 리소스에 액세스할 필요가 없는 경우 아래의 헤더 설정을 이용하면 된다고 합니다.

Content-Security-Policy: default-src 'none'; script-src 'self';
img-src 'self'; style-src 'self'; connect-src 'self';

CSP와 관련된 내용은 MDN을 확인하시면 됩니다.

 

2. XSS 보호 모드 사용

사용자 입력에서 악성 코드가 입력되는 것을 감지한다면 헤더에 아래의 설정을 추가함으로써 브라우저가 response를 차단하도록 만들 수 있습니다.

X-XSS-Protection: 1; mode=block

요즘 최신 브라우저에서는 XSS 보호모드가 기본적으로 되어 있지만 CSP 헤더를 지원하지 않는 브라우저들을 위해 X-XSS-Protection 헤더를 포함하는 것이 좋습니다.

관련 내용은 MDN을 확인하시면 됩니다.

 

3. 클릭 재킹 방지를 위한 iframe Embed 차단

클릭 재킹 공격을 방어하기 위해서는 iframe Embed를 막는것이 좋습니다.

iframe Embed를 막기 위해서는 CSP의 frame-ancestors를 사용할 수 있습니다.

Content-Security-Policy: frame-ancestors 'none';

관련 내용은 MDN을 확인하시면 됩니다.

 

4. 브라우저 기능 및 API에 대한 액세스 제한

컨텐츠 보안 정책(CSP)를 통해 웹사이트가 접속할 수 있는 도메인 수를 제한할 수 있는데, Permissions-Policy 헤더를 사용해 애플리케이션이 필요로 하지 않는 기능에 대한 액세스를 거부하도록 할 수 있습니다.

Permissions-Policy: picture-in-picture=(), geolocation=(self "https://example.com"), camera=*;

관련 내용은 MDN을 확인하시면 됩니다.

 

5. referrer 값 노출 방지

웹 사이트에서 다른 사이트로 이동하는 링크를 클릭하면, 가고자 하는 웹 사이트는 이전 웹 사이트의 URL을 referrer 헤더로 받습니다.

그런데 이 URL에는 세션 토큰이나 사용자 ID와 같은 민감한 데이터가 포함될 수 있습니다.

이를 방지하기 위해서는 Referrer-Policy 헤더를 이용하면 방지할 수 있습니다.

Referrer-Policy: no-referrer

관련 내용은 MDN을 확인하시면 됩니다.

[참고하면 좋은 글]

 

6. 유저로부터 입력값을 받는 곳에 innerHTML 사용 금지

XSS 공격은 다양한 곳에서 사용되지만 가장 많이 사용되는 곳이 바로 "innerHTML"이라고 합니다.

Dom-base XSS 공격을 방지하는 방법은 이 곳을 확인하시면 됩니다.

 

7. UI 프레임워크 사용

React, Vue, Angular와 같은 UI프레임워크를 사용하면 XSS의 위협으로부터 막아줍니다.
만약 XSS에 민감한 DOM API를 사용해야할 일이 있다면 React의 경우 dangerouslySetInnerHTML와 같이 멈칫하게 만드는 네이밍으로 고민하게 만들어줍니다.