🔐

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

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

2025년 상반기, SKT 해킹 사건이 업계에 큰 충격을 주었습니다. 이 사건을 계기로 저희는 보안의 중요성을 깨닫고, 단순한 기능 구현을 넘어 보안까지 고려하는 진정한 프론트엔드 개발자로 성장하기 위해 모였습니다.
이 페이지는 저희가 함께 배우고 성장을 기록합니다.
프론트엔드 개발에서 보안은 선택이 아닌 필수입니다. 우리는 그 가치를 믿고 함께 공부합니다.
lurgi - Overview
💪강력한 의견과 침착한 태도를 가지자. lurgi has 116 repositories available. Follow their code on GitHub.
lurgi - Overview
https://github.com/lurgi
lurgi - Overview
BadaHertz52 - Overview
web front dev SON HAE YOUNG (BADA) . BadaHertz52 has 49 repositories available. Follow their code on GitHub.
BadaHertz52 - Overview
https://github.com/BadaHertz52
BadaHertz52 - Overview
00kang - Overview
00kang has 36 repositories available. Follow their code on GitHub.
00kang - Overview
https://github.com/00kang
00kang - Overview
soi-ha - Overview
soi-ha has 39 repositories available. Follow their code on GitHub.
soi-ha - Overview
https://github.com/soi-ha
soi-ha - Overview

📚 우리가 함께 공부한 내용

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를 사용해야 하죠?
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
왜 HTTPS를 사용해야 하죠?
HTTP 그리고 HTTPS
본 글은 『프런트엔드 개발을 위한 보안 입문』 3장 "HTTP"를 기반으로 작성한 정리입니다.📖 기본 개념 정리1. HTTP란 무엇인가HTTP(Hypertext Transfer Protocol)는 웹에서 정보를 주고받기 위한 가장 기본적인 통신 규약입니다.하지만 보안적인 측면에서 다음과 같은 약점을 갖고 있습니다. 2. HTTP의 보안 약점1) 통신 데이터 도청 가능HTTP는 데이터를 암호화하지 않기 때문에, 공격자가 네트워크를 가로채면 사용자와 서버 간 주고받는 모든 내용을 볼 수 있습니다.2) 통신 상대의 진위 확인 불가HTTP는 서버가 진짜 서버인지 검증할 수 있는 시스템이 없습니다.따라서 공격자가 위조된 서버를 준비하고 요청을 가로채면 사용자도 속을 수 있습니다.3) 데이터 무결성 검증 불가HT..
HTTP 그리고 HTTPS
https://00dabin.tistory.com/13
HTTP 그리고 HTTPS
왜 HTTP와 HTTPS 혼용 사용이 위험할까?: Mixed Content
HTTP와 HTTPS 웹에서 데이터를 주고받을 때 사용하는 대표적인 프로토콜이 바로 HTTP와 HTTPS이다. 구분 HTTP ...
왜 HTTP와 HTTPS 혼용 사용이 위험할까?: Mixed Content
https://soi-ha.github.io/til/2025/05/30/Frontend-Security-Study-Ep1.html
왜 HTTP와 HTTPS 혼용 사용이 위험할까?: Mixed Content

[2주] Origin과 CORS

같은 출처 정책(SOP)의 중요성과 CORS 설정의 올바른 방법에 대해서 학습합니다.
CORS 이해하기 - 웹 크로스 도메인 통신 가이드
CORS(Cross-Origin Resource Sharing)의 개념부터 실무 구현까지 한 글에 담았습니다. 동일 출처 정책, JSONP, 프리플라이트 요청, 서버 설정, 클라이언트 구현 방법을 실제 코드 예제와 함께 상세히 설명합니다.
CORS 이해하기 - 웹 크로스 도메인 통신 가이드
https://lurgi.github.io/Development/notion/202785ff-8231-80e0-a79a-dd4ca842e8cc
CORS 이해하기 - 웹 크로스 도메인 통신 가이드
웹에서의 Spectre 공격 이해하기
Spectre 사이드 채널 공격의 원리부터 SharedArrayBuffer를 이용한 실제 구현까지. 웹 브라우저에서 발생하는 보안 취약점과 Site Isolation 등 대응책을 코드 예시와 함께 상세히 분석합니다.
웹에서의 Spectre 공격 이해하기
https://lurgi.github.io/Development/notion/202785ff-8231-80fb-bf48-feb74de6e430
웹에서의 Spectre 공격 이해하기
🛡️ Cross-Origin Isolation
웹 브라우저는 교차 출처를 어떻게 막을까?
🛡️ Cross-Origin Isolation
https://velog.io/@badahertz52/Cross-Origin-Isolation
🛡️ Cross-Origin Isolation
동일 출처 정책과 CORS, 웹 보안의 기본을 쉽게 풀어보기
왜 접근 제한이 필요할까? 웹은 다양한 리소스를 주고받는 구조로 이루어져 있다. 사용자가 접속한 웹사이트에서 실행되는 자바스크립트는 브라우저를 통해 다양한 데이터를 다룰 수...
동일 출처 정책과 CORS, 웹 보안의 기본을 쉽게 풀어보기
https://soi-ha.github.io/til/2025/05/30/Frontend-Security-Study-Ep2.html
동일 출처 정책과 CORS, 웹 보안의 기본을 쉽게 풀어보기

[3주] XSS 공격 방어

스크립트 인젝션 공격의 유형과 효과적인 방어 전략에 대해서 학습합니다.
XSS공격 이해하기
XSS(Cross-Site Scripting) 공격으로부터 웹사이트를 보호하는 완전한 가이드. 프론트엔드 개발자를 위한 실무 적용 가능한 방어 코드, CSP 설정, Trusted Types 활용법을 단계별로 설명합니다.
XSS공격 이해하기
https://lurgi.github.io/Development/notion/207785ff-8231-80ef-bebc-f6b6583a7760
XSS공격 이해하기
웹 보안의 위협, XSS(Cross-site Scripting)
크로스 사이트 스크립팅(Cross-site Scripting, XSS)? XSS은 공격자가 웹사이트에 악의적인 스크립트를 삽입하여 다른 사용자의 웹 브라우저에서 실행되도록 ...
웹 보안의 위협, XSS(Cross-site Scripting)
https://soi-ha.github.io/til/2025/06/08/Frontend-Security-Study-Ep3.html
웹 보안의 위협, XSS(Cross-site Scripting)

[4주] CSRF, 클릭재킹

사용자 의도와 다른 행동을 유발하는 공격과 그 대응법에 대해서 학습합니다.
CSRF, 클릭재킹, 오픈 리다이렉트
CSRF, 클릭재킹, 오픈 리다이렉트 등 주요 웹 보안 취약점의 공격 원리와 방어 기법을 상세히 설명합니다. 실제 코드 예시와 함께 웹 개발자가 바로 적용할 수 있는 실용적인 보안 구현 방법을 제공합니다.
CSRF, 클릭재킹, 오픈 리다이렉트
https://lurgi.github.io/Development/notion/20b785ff-8231-8081-8642-d4f3c7322694
CSRF, 클릭재킹, 오픈 리다이렉트
눈에 보이지 않는 위협: CSRF, 클릭재킹, 오픈 리다이렉트
CSRF (Cross-Site Request Forgery, 사이트 간 요청 위조) CSRF는 사용자가 로그인한 상태에서 의도하지 않은 요청을 다른 사이트를 통해 보내도록 ...
눈에 보이지 않는 위협: CSRF, 클릭재킹, 오픈 리다이렉트
https://soi-ha.github.io/til/2025/06/12/Frontend-Security-Study-Ep4.html
눈에 보이지 않는 위협: CSRF, 클릭재킹, 오픈 리다이렉트

[5주] 인증과 인가 보안

안전한 로그인 시스템 구축과 권한 관리의 모범 사례에 대해서 학습합니다.
인증과 인가의 이해
인증(AuthN)과 인가(AuthZ)의 핵심 개념부터 최신 보안 기술까지 상세히 설명합니다. 비밀번호 공격 유형과 대응책, 로그인 정보 보호 방법, FIDO/WebAuthn 등 최신 인증 트렌드를 알아보세요. 다중 인증(MFA)과 계정 보호 전략으로 보안을 강화하는 방법을 제시합니다.
인증과 인가의 이해
https://lurgi.github.io/Development/notion/212785ff-8231-809e-b8ea-df036926a01e
인증과 인가의 이해
웹 form 속 숨은 보안 이야기: 인증과 인가, 그리고 fieldset · autocomplete · inputmode
이번에 웹 프론트엔드 보안 스터디의 7번째 챕터 인증과 인가에 대해 읽으면서 새롭게 알게된 내용들과 잘 몰랐던 내용들에 대해 더 찾아보면서 학습한 내용들을 정리해봤다. 그래서...
웹 form 속 숨은 보안 이야기: 인증과 인가, 그리고 fieldset · autocomplete · inputmode
https://soi-ha.github.io/til/2025/06/27/Frontend-Security-Study-Ep5.html
웹 form 속 숨은 보안 이야기: 인증과 인가, 그리고 fieldset · autocomplete · inputmode

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

npm 생태계의 보안 위험과 최신 보안 동향에 대해서 학습합니다.
라이브러리를 노린 보안 리스크
프론트엔드 라이브러리 보안 위험과 대응 방안을 다룹니다. npm 패키지 취약점, CDN 변조 공격, 의존성 상속 위험성과 함께 npm audit, SRI, CSP 등 실무진을 위한 보안 대책을 제시합니다.
라이브러리를 노린 보안 리스크
https://lurgi.github.io/Development/notion/21a785ff-8231-80fc-a981-c661ee8ab4cb
라이브러리를 노린 보안 리스크
오픈소스 라이브러리, 정말 안전할까?
오픈소스 라이브러리, 왜 그리고 어떻게 쓰일까? 프론트엔드 개발에서는 라이브러리, 프레임워크, 빌드 툴 등을 자주 사용한다. 이 중 많은 도구들이 오픈소스 소프트웨어(OSS...
오픈소스 라이브러리, 정말 안전할까?
https://soi-ha.github.io/til/2025/06/27/Frontend-Security-Study-Ep6.html
오픈소스 라이브러리, 정말 안전할까?

🌟 주요 학습 자료

프런트엔드 개발을 위한 보안 입문 - 히라노 마사시
product.kyobobook.co.kr
https://product.kyobobook.co.kr/detail/S000211709203