프론트 보안 대응 사항

프론트 개발자로써 웹사이트 보안에 있어서 어떤걸 방지하고 미리 대응하면 좋을까?

대부분 이슈는 서버나 백엔드쪽에서 보안유지를 하고 있는데 프론트에선 어떤걸 사전 방지 하면 좋을지 생각해보았다. 

 

1. 입력값 검증 (Input Validation)

 

• 예시 문제: 사용자가 웹 사이트의 입력 필드(검색, 회원가입 등)에 악의적인 코드를 입력할 경우, 예상치 못한 동작이나 페이지가 깨지는 현상이 발생할 수 있다.
• 해결 방법: 사용자가 입력한 데이터가 문자열이 맞는지, 특정 길이를 초과하지 않는지, 특수문자가 포함되지 않는지 등을 검증하는 로직을 추가한다.

 

2. XSS (Cross-Site Scripting) 방지

• 예시 문제: 사용자가 작성한 댓글에 <script>alert('해킹');</script> 같은 코드를 입력하면, 그 페이지에 접속한 다른 사용자에게 악성 스크립트가 실행된다.
• 해결 방법: 사용자 입력을 HTML에 그대로 렌더링하지 않고, 모든 입력값을 HTML 이스케이프 처리하여 태그가 실행되지 않도록 한다. 라이브러리를 사용 중이라면 React, Vue 등은 기본적으로 안전하게 렌더링해주니 그대로 사용하면 된다.(예. sanitize)

 

3. DOM 조작 시 보안

• 예시 문제: innerHTML, dangerouslySetInnerHTML 등을 사용해 동적으로 HTML을 추가하면, 악성 스크립트를 포함한 코드가 쉽게 주입될 수 있디.
• 해결 방법: DOM을 직접 조작하기보다는 React나 Vue의 템플릿을 사용하고, innerHTML 대신 textContent나 safeHtml과 같은 보안 메서드를 사용한다.

 

4. 서드파티 스크립트 및 라이브러리 주의

• 예시 문제: 외부 CDN에서 제공하는 스크립트나 타사 라이브러리를 무심코 사용하면, 해당 스크립트가 악성 코드를 포함하거나 예기치 못한 동작을 할 수 있다.
• 해결 방법: 타사 스크립트를 사용해야 할 때는 반드시 해당 소스의 신뢰성을 확인하고, 가능하면 해당 스크립트를 다운로드하여 직접 관리하거나 서드파티 라이브러리의 최신 버전을 사용하도록 한다.

<!-- 안전하지 않은 방식 -->
<script src="https://unknowncdn.com/unknown.js"></script>

<!-- 안전한 방식 (신뢰할 수 있는 출처, 무결성 확인) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5+5hb7x4kE5hs1P5b7EX7wbI69KP9FWP3xmOnJk" crossorigin="anonymous"></script>

 

5. 사용자 인증 정보 노출 방지

• 예시 문제: 사용자 토큰이나 API 키를 로컬 스토리지 또는 코드에 직접 저장할 경우, 브라우저의 개발자 도구에서 쉽게 접근이 가능해진다.
• 해결 방법: 프론트엔드 코드에는 민감한 정보를 포함시키지 않고, 필요한 경우 환경 변수나 서버에서 제공하는 비공개 API를 통해 전달받도록 한다.

// 잘못된 예시 (API Key를 코드에 직접 포함)
const API_KEY = '12345-abcde-67890';

// 개선된 예시 (API 키를 환경 변수로 관리)
const API_KEY = process.env.REACT_APP_API_KEY;

 

 

6. 파일 업로드 시 클라이언트 측 제한

• 예시 문제: 사용자가 큰 용량의 파일이나 허용되지 않은 파일(.exe 등)을 업로드 시도하면 서버에서 과부하가 발생하거나 공격에 노출될 수 있다.
• 해결 방법: 파일 업로드 시 클라이언트 측에서 파일 크기 및 확장자를 미리 체크하여 허용하지 않는 파일은 서버에 요청을 보내지 않도록 한다.

// 파일 업로드 전 검사하는 코드
const fileInput = document.getElementById('file-upload');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (file.size > 5000000 || !['image/png', 'image/jpeg'].includes(file.type)) {
    alert('업로드할 수 없는 파일입니다.');
    fileInput.value = ''; // 입력 초기화
  }
});

 

8. OAuth 및 JWT 인증

• 문제: 사용자가 로그인했을 때 발급된 토큰이 안전하게 관리되지 않으면, 해커가 이 토큰을 사용해 사용자인 척 행세할 수 있다.
• 해결: 토큰을 HttpOnly 쿠키에 저장하여 자바스크립트로 접근하지 못하게 한다.
   

여기까지 기본적으로 프론트 개발자 선에서 알아본 보안 방법인데 또 뭐 다른게 있을까?