프론트엔드 개발을 위한 보안 입문

✨ 프론트엔드 보안 스터디를 소개합니다

2025년 상반기, SKT 해킹 사건이 업계에 큰 충격을 주었습니다. 이 사건을 계기로 저희는 보안의 중요성을 깨닫고, 단순한 기능 구현을 넘어 보안까지 고려하는 진정한 프론트엔드 개발자로 성장하기 위해 모였습니다.

이 페이지는 저희가 함께 배우고 성장을 기록합니다.

프론트엔드 개발에서 보안은 선택이 아닌 필수입니다. 우리는 그 가치를 믿고 함께 공부합니다.

lurgi - Overview

💪강력한 의견과 침착한 태도를 가지자. lurgi has 116 repositories available. Follow their code on GitHub.

https://github.com/lurgi

BadaHertz52 - Overview

web front dev SON HAE YOUNG (BADA) . BadaHertz52 has 49 repositories available. Follow their code on GitHub.

https://github.com/BadaHertz52

00kang - Overview

00kang has 36 repositories available. Follow their code on GitHub.

https://github.com/00kang

soi-ha - Overview

soi-ha has 39 repositories available. Follow their code on GitHub.

https://github.com/soi-ha

📚 우리가 함께 공부한 내용

6주 간의 여정을 통해 프론트엔드 개발자가 알아야 할 핵심 보안 지식을 탐구했습니다.

[1주] 웹 보안 기초와 HTTP

보안의 기본 개념과 HTTP 프로토콜의 보안 이슈에 대해서 학습합니다.

HTTPS와 HSTS 핵심 이해

HTTPS와 HSTS의 개념부터 작동 원리, TLS/SSL 인증서 체계, 웹 서버 설정 방법, SSL 스트리핑 방지까지 현대 웹 보안을 위한 모든 핵심 요소를 상세히 설명합니다.

https://lurgi.github.io/Development/notion/1f7785ff-8231-809d-ba58-eda93a5802ba

왜 HTTPS를 사용해야 하죠?

"왜 모든 사이트가 HTTPS를 사용해야 할까?", "정말 100% 안전한 걸까?"

https://velog.io/@badahertz52/%EC%99%9C-HTTPS%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EC%A3%A0

HTTP 그리고 HTTPS

본 글은 『프런트엔드 개발을 위한 보안 입문』 3장 "HTTP"를 기반으로 작성한 정리입니다.📖 기본 개념 정리1. HTTP란 무엇인가HTTP(Hypertext Transfer Protocol)는 웹에서 정보를 주고받기 위한 가장 기본적인 통신 규약입니다.하지만 보안적인 측면에서 다음과 같은 약점을 갖고 있습니다. 2. HTTP의 보안 약점1) 통신 데이터 도청 가능HTTP는 데이터를 암호화하지 않기 때문에, 공격자가 네트워크를 가로채면 사용자와 서버 간 주고받는 모든 내용을 볼 수 있습니다.2) 통신 상대의 진위 확인 불가HTTP는 서버가 진짜 서버인지 검증할 수 있는 시스템이 없습니다.따라서 공격자가 위조된 서버를 준비하고 요청을 가로채면 사용자도 속을 수 있습니다.3) 데이터 무결성 검증 불가HT..

https://00dabin.tistory.com/13

왜 HTTP와 HTTPS 혼용 사용이 위험할까?: Mixed Content

HTTP와 HTTPS 웹에서 데이터를 주고받을 때 사용하는 대표적인 프로토콜이 바로 HTTP와 HTTPS이다. 구분 HTTP ...

https://soi-ha.github.io/til/2025/05/30/Frontend-Security-Study-Ep1.html

[2주] Origin과 CORS

같은 출처 정책(SOP)의 중요성과 CORS 설정의 올바른 방법에 대해서 학습합니다.

CORS 이해하기 - 웹 크로스 도메인 통신 가이드

CORS(Cross-Origin Resource Sharing)의 개념부터 실무 구현까지 한 글에 담았습니다. 동일 출처 정책, JSONP, 프리플라이트 요청, 서버 설정, 클라이언트 구현 방법을 실제 코드 예제와 함께 상세히 설명합니다.

https://lurgi.github.io/Development/notion/202785ff-8231-80e0-a79a-dd4ca842e8cc

웹에서의 Spectre 공격 이해하기

Spectre 사이드 채널 공격의 원리부터 SharedArrayBuffer를 이용한 실제 구현까지. 웹 브라우저에서 발생하는 보안 취약점과 Site Isolation 등 대응책을 코드 예시와 함께 상세히 분석합니다.

https://lurgi.github.io/Development/notion/202785ff-8231-80fb-bf48-feb74de6e430

🛡️ Cross-Origin Isolation

웹 브라우저는 교차 출처를 어떻게 막을까?

https://velog.io/@badahertz52/Cross-Origin-Isolation

동일 출처 정책과 CORS, 웹 보안의 기본을 쉽게 풀어보기

왜 접근 제한이 필요할까? 웹은 다양한 리소스를 주고받는 구조로 이루어져 있다. 사용자가 접속한 웹사이트에서 실행되는 자바스크립트는 브라우저를 통해 다양한 데이터를 다룰 수...

https://soi-ha.github.io/til/2025/05/30/Frontend-Security-Study-Ep2.html

[3주] XSS 공격 방어

스크립트 인젝션 공격의 유형과 효과적인 방어 전략에 대해서 학습합니다.

[4주] CSRF, 클릭재킹

사용자 의도와 다른 행동을 유발하는 공격과 그 대응법에 대해서 학습합니다.

[5주] 인증과 인가 보안

안전한 로그인 시스템 구축과 권한 관리의 모범 사례에 대해서 학습합니다.

[6주]패키지 보안과 신기술

npm 생태계의 보안 위험과 최신 보안 동향에 대해서 학습합니다.

💡 스터디 운영 방식

매주 개인 블로그에 학습 내용을 정리하고 공유하는 방식으로 진행했습니다. 토요일 오프라인 모임에서는 랜덤으로 선정된 2명의 발표를 듣고 토론하는 시간을 가졌습니다.

블로그 포스팅: 각자의 언어로 보안 개념을 재해석하고 정리

온라인 미팅: 매주 토요일 오전 9시, 발표와 질의응답

지식 공유: 발표를 통해 서로의 이해를 높이고 다양한 관점 교환

실무 적용: 학습한 내용을 실제 프로젝트에 적용하는 방법 논의

🌟 주요 학습 자료

프런트엔드 개발을 위한 보안 입문 - 히라노 마사시

product.kyobobook.co.kr

https://product.kyobobook.co.kr/detail/S000211709203