Web
RSA를 이용하여 페이로드(ex. 비밀번호) 암호화하기 (Vue.js / Spring Boot)
0. 상황 Vue.js에서 아이디(userId)와 비밀번호(userPassword)를 입력하여 로그인을 해봅니다. 개발자 모드(F12)를 켜서 페이로드를 살펴보면 다음과 같이 사용자가 입력한 아이디와 비밀번호를 바로 확인할 수 있습니다. 보안을 위해 비밀번호(userPassword)를 암호화하여 요청하고 싶습니다. 이때 우리는 바로 전 포스팅에서 생성한 비대칭 키 RSA를 사용할 것입니다. 1. Vue.js에서 RSA 공개키로 암호화 JavaScript 라이브러리인 jsencrypt를 사용하여 암호화를 수행할 것입니다. 이를 위해 먼저 jsencrypt를 설치해줍니다. npm install jsencrypt 그런 다음, Vue.js 컴포넌트에서 RSA 공개키로 암호화를 수행하는 코드를 작성합니다. 저는 ..
OpenSSL을 통해 RSA 공개키, 개인키 생성하기
1. OpenSSL 설치하기 Windows: https://slproweb.com/products/Win32OpenSSL.html 혹은 https://code.google.com/archive/p/openssl-for-windows/downloads 등에서 OpenSSL을 다운로드하여 설치하면 됩니다. Mac: brew install openssl 2. openssl.exe 파일 위치로 이동하기 openssl-0.9.8k_X64\bin\openssl.exe 위치로 이동해줍니다. 3. private_key 생성 1) private_key.pem 생성 openssl-0.9.8k_X64\bin> openssl genrsa -out private_key.pem 1024 생성된 private_key.pem (PK..
웹 보안을 위한 XSS, CSRF 방어
XSS: Cross-Site Scripting XSS는 공격자가 악의적인 스크립트를 웹 페이지에 삽입하는 공격입니다. 해당 스크립트 코드는 게시판이나, 이미지, 웹 메일 등에 삽입될 수 있습니다. 삽입된 스크립트는 사용자의 브라우저에서 실행되며, 공격자에게 사용자의 정보를 노출하거나 악의적인 행동을 수행할 수 있습니다. 공격자가 위와 같은 악의적인 스크립트를 취약한 웹 페이지에 삽입합니다. 사용자가 해당 페이지를 열면, 악의적인 스크립트가 실행되어 예상치 못한 동작을 수행합니다. XSS는 사용자가 웹 사이트를 신용하여 악의적인 스크립트를 클릭한 경우로, 주로 사용자(클라이언트)를 대상으로 한 공격입니다. XSS 해결 1: 이스케이프 처리 XSS 취약점은 웹 어플리케이션 사용자로부터 입력받은 데이터 값을 ..
CORS(Cross-Origin Resource Sharing) 이해와 해결 방법
CORS CORS (Cross-Origin Resource Sharing)는 'Cross-Origin Resource Sharing'의 약어로, 웹 보안 메커니즘 중 하나입니다. 이 메커니즘은 웹 브라우저에서 실행되는 웹 페이지가 다른 웹사이트(출처)에서 데이터를 요청할 때 발생할 수 있는 보안 정책 중 하나입니다. 서로 다른 출처(origin) 간에 데이터 공유하려하면 이를 제한하는 보안 메커니즘(SOP, Same-Origin Policy)에 의해 CORS 오류가 발생하게 됩니다. 이러한 CORS 에러를 해결하기 위해선 CORS를 설정하여, 출처가 다른 서버 간의 리소스 공유를 허용해주어야합니다. 출처(Origin): Protocol + Hostname(Domain) + Port · 도메인(Hostna..
웹 데이터 저장: 로컬 스토리지, 세션 스토리지, 쿠키
웹 어플리케이션은 사용자 데이터를 저장하고 관리하는데 다양한 방법을 제공합니다. 그중 클라이언트 측에서 데이터를 저장하고 관리하기 위한 방법으로 `로컬 스토리지(Local Storage)`, `세션 스토리지(Session Storage)` 그리고 `쿠키(Cookies)`가 있습니다. 로컬 스토리지 (Local Storage) 로컬 스토리지는 브라우저에서 데이터를 영구적으로 저장하는데 사용됩니다. 이 데이터는 브라우저를 종료해도 유지되며, 사용자의 로컬 환경에서 접근이 가능합니다. 주로 사용자 설정과 같은 데이터를 저장하는데 유용합니다. 데이터는 문자열로 저장됩니다. 브라우저마다 별도로 유지되며, 도메인간에 공유되지 않습니다. 저장 용량은 일반적으로 5~10MB이고, 브라우저마다 다를 수 있습니다. 세션 ..
Jar와 War의 차이(spring initializr packaging)
JAR와 WAR은 자바 프로그램 및 관련 자원을 패키지하고 배포하기 위한 파일 형식입니다. 프로젝트 생성시 `Packaging` 옵션에서 JAR 혹은 WAR를 선택하여 해당 형식으로 어플리케이션 패키징하여 배포할 수 있습니다. JAR (Java Archive) 확장자: .jar JAR 파일은 자바 클래스 파일, 리소스 파일 (이미지, 설정 파일 등) 및 라이브러리(JAR 파일 자체 또는 외부 라이브러리)를 하나의 아카이브 파일로 패키징합니다. 일반적으로 JAR 파일은 자바 클래스 파일과 그 클래스들이 사용하는 이미지, 설정 파일, 텍스트 파일, 라이브러리 등을 포함합니다. 이것은 다른 프로그램에서 재사용되거나 실행될 수 있도록 도와줍니다. 예를 들어, 다른 사람이 만든 유용한 코드 조각을 JAR 파일로 ..
Servlet에 대해 알아보자!! 동작 원리 파악하기
Servlet 서블릿은 자바를 기반으로 한 웹 어플리케이션 개발 기술로, 클라이언트의 요청과 응답을 처리하고 동적인 콘텐츠를 생성하는 역할을 담당합니다. Servlet의 역할 앞서 포스팅한 웹 서버 vs 웹 어플리케이션 서버 vs CGI 프로그램: 차이 쉽게 이해하기 에서 서블릿과 서블릿 컨테이너에 관해 간단하게 설명을 했었습니다. 앞에 내용을 안다는 전제하에 설명을 하도록 하겠습니다. 원래는 클라이언트가 데이터를 전송하기 위해서는 소켓 연결, HTTP 요청 메시지 파싱, Content-Type 확인, HTTP 응답 메시지 생성 등 많은 것들을 직접해주어야 했지만 서블릿을 지원하는 WAS(엄밀히 말하면 WAS안에 포함되어 있는 서블릿 컨테이너)를 사용하면서 비즈니스 로직을 제외한 모든 처리를 서블릿이 해..
웹 서버 vs 웹 어플리케이션 서버 vs CGI 프로그램: 차이 쉽게 이해하기
웹 (Web): HTTP 기반 웹은 HTTP(하이퍼텍스트 전송 프로토콜) 기반으로 작동합니다. HTTP 메시지는 웹 상에서 클라이언트와 서버 간에 데이터를 교환하는데 사용되는 형식화된 텍스트입니다. HTML, 문서파일, 이미지, 오디오, 영상, XML, JSON 등 다양한 데이터유형을 클라이언트와 서버 사이에서 안전하게 전송할 수 있습니다. 웹 서버 (Web Server) 웹 서버는 클라이언트(웹 브라우저)로부터 HTTP 요청을 받아들이고, 정적인 웹 리소스를 제공하는 역할을 합니다. 정적 리소스: HTML 파일, 이미지, CSS 파일 등 웹 서버 예: Apache, Nginx 등 웹 어플리케이션 서버 (Web Application Server): 웹 어플리케이션 서버는 웹 서버의 확장된 개념으로, 동적..