STUDY/Web 10

SQL Injection

데이터베이스 종류 DBMS 데이터베이스 관리 시스템 Codd의 12가지 규칙이 있음 기록, 조회, 수정, 삭제 가능 (CRUD) 관계형: 테이블(행, 열) 형식 MySQL, MariaDB, PostgreSQL, SQLite 비관계형: 키-값 형식 MongoDB, CouchDB, Redis RDBMS 관계형 데이터베이스 관리 시스템 SQL, Structured Query Language RDBMS의 데이터를 정의하고 조작하기 위해 고안된 언어 언어 설명 DDL (Data Definition Language) 데이터 정의 언어. 데이터베이스 생성/수정/삭제 DML (Data Manipulation Language) 데이터 조작 언어. 데이터베이스 내 데이터 조회/저장/수정/삭제 등 DCL (Data Cont..

STUDY/Web 2023.09.04

CSRF, Cross Site Request Forgery

교차 사이트 요청 위조 이용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 만드는 공격. 임의 이용자의 권한으로 임의 주소에 HTTP 요청을 보낼 수 있는 취약점 공격자가 작성한 악성 스크립트(HTTP 요청을 보내는 코드)를 이용자가 실행해야함 HTML tag 혹은 javascript로 작성. ex 1) HTML tag: img, form 두개의 태그를 사용해 HTTP 전송을 보내면 HTTP 헤더(쿠키)에 인증정보가 포함됨 보이지 않는 이미지 태그를 생성하고 src에 값을 넣어 요청 ex 2) javascript: /* 새 창 띄우기 */ window.open('~'); /* 현재 창 주소 옮기기 */ ocation.href = '~'; location.replace('~..

STUDY/Web 2023.09.04

XSS, Cross site scripting

클라이언트 사이드 해킹: 이용자를 식별하기 위한 세션 및 쿠키 정보를 탈취하고 해당 계정으로 임의 기능 수행 XSS: 공격자가 웹 리소스에 악성 스크립트를 삽입하고 이용자의 웹 브라우저에서 실행시켜 세션정보를 탈취함. 종류 설명 Stored XSS XSS에 사용되는 악성 스크립트가 서버에 저장되고 서버의 응답에 담겨오는 XSS Reflected XSS XSS에 사용되는 악성 스크립트가 URL에 삽입되고 서버의 응답에 담겨오는 XSS DOM-based XSS XSS에 사용되는 악성 스크립트가 URL Fragment에 삽입되는 XSS * Fragment는 서버 요청/응답 에 포함되지 않습니다. Universal XSS 클라이언트의 브라우저 혹은 브라우저의 플러그인에서 발생하는 취약점으로 SOP 정책을 우회하..

STUDY/Web 2023.09.04

SOP & CORS

SOP - Same Origin Policy, 동일 출처 정책 클라이언트의 권한을 이용해 HTTP 요청을 보내고 HTTP 응답 정보를 획득 하는 코드를 실행할 수 있음. 이런 경우 가져온 데이터를 악의적인 페이지에서 읽을 수 없도록 하는 보안 메커니즘 Cross Origin: 현재 페이지와 다른 출처 Origin과 URL을 비교했을 때 Scheme(프로토콜), Host, Port 가 다른경우 CORS - Cross Origin Resource Sharing, 교차 출처 리소스 공유 동일 출처 정책을 완화해서 다른 출처의 데이터를 처리해야 하는 경우가 필요함 처리 방법 1. CORS 관련 HTTP 헤더 추가 전송 - OPTIONS (HTTP Method) Header 설명 Access-Control-All..

STUDY/Web 2023.09.04

Cookie & Session

HTTP 프로토콜 특징 Connectionless: 하나의 요청에 하나의 응답을 한 후 연결을 종료함. Stateless: 통신이 끝난 후 상태 정보를 저장하지 않음 웹서버는 클라이언트를 기억할수 없음 쿠키 (Cookie) 상태를 유지하기 위해 사용 서버에 요청을 보낼때마다 쿠키를 같이 전송함 쿠키를 확인해서 클라이언트 구분 쿠키 변조 쿠키를 통해 인증 정보를 식별하는 경우 쿠키를 변조해서 다른 사람인 것 처럼 사용해도 인증 통과 가능 세션 (Session) 클라이언트가 인증 정보를 변조할 수 없게 하기위해 사용 인증 정보를 서버에 저장하고 해당 데이터에 접근할 수 있는 키(Session ID)를 만들어 클라이언트에 전달함. 브라우저는 해당 키를 쿠키에 저장하고 이후에 HTTP 요청을 보낼 때 사용함. ..

STUDY/Web 2023.09.04

배포 자동화 (4) HTTPS 적용 및 Nginx 설정

(1) Docker 설치 및 Jenkins 설정 (2) 백엔드, 프론트 엔드 도커 이미지 빌드 (3) 원격 서버에서 도커 이미지 실행: Jenkins 파이프라인 작성 (4) HTTPS 적용 및 Nginx 설정 : letsencrypt와 certbot을 사용한 SSL 인증서 설치, 리버스 프록시 적용 만들었던 서비스는 실시간으로 영상을 수신하게 만들어야 해서 https 적용을 해야했다. 1. Certbot container 생성 및 인증서 발급 cd sudo mkdir certbot cd certbot sudo mkdir conf www logs ​ sudo docker pull certbot/certbot sudo docker run -it --rm --name certbot -p 80:80\\ -v "..

STUDY/Web 2022.01.04

배포 자동화 (3) Jenkins 파이프라인 작성

(1) Docker 설치 및 Jenkins 설정 (2) 백엔드, 프론트 엔드 도커 이미지 빌드 (3) 원격 서버에서 도커 이미지 실행: Jenkins 파이프라인 작성 (4) HTTPS 적용 및 Nginx 설정 : letsencrypt와 certbot을 사용한 SSL 인증서 설치, 리버스 프록시 적용 프로젝트가 끝난지 벌써 2개월이 지났다. 기억을 많이 잃어버렸지만 있는 지식, 없는 지식까지 총동원해서 빠르게 완성시켜야겠다. 지난 포스팅에서 jenkins, express, nginx 각각 도커 이미지를 만들고 실행하는것까지 확인하였다. 이제 Gitlab의 master가 업데이트 되었을 때 프론트엔드와 백엔드의 이미지를 만들고(CI), 배포(CD)까지의 작업을 자동화 시켜야한다. 1. Jenkins 트리거 ..

STUDY/Web 2022.01.04

배포 자동화 (2) 백엔드, 프론트엔드 도커 이미지 빌드

(1) Docker 설치 및 Jenkins 설정 (2) 백엔드, 프론트 엔드 도커 이미지 빌드 (3) 원격 서버에서 도커 이미지 실행: Jenkins 파이프라인 작성 (4) HTTPS 적용 및 Nginx 설정 : letsencrypt와 certbot을 사용한 SSL 인증서 설치, 리버스 프록시 적용 지난 포스팅에서 배포 자동화를 한다고 이야기 했고 자동화를 위해 도커와 젠킨스를 설치했다. 이번 포스팅은 각각의 부분을 도커 이미지로 만들고 실행하는 것을 목표로한다. 프로젝트에서 프론트엔드는 Vue의 빌드 파일과 Nginx를, 백엔드는 Express.js를 사용한다. 1. Docker + Node.js(Express) 우선 백엔드 서버를 도커 이미지를 만들어보자 node와 npm이 설치 되어있는 상태에서 b..

STUDY/Web 2021.10.08

배포 자동화 (1) Docker 설치 및 Jenkins 설정

배포 자동화를 위한 단계는 다음과 같고 이 순서대로 글을 쓸 것이다. (1) Docker 설치 및 Jenkins 설정 (2) 백엔드, 프론트 엔드 도커 이미지 빌드 (3) 원격 서버에서 도커 이미지 실행: Jenkins 파이프라인 작성 (4) HTTPS 적용 및 Nginx 설정 : letsencrypt와 certbot을 사용한 SSL 인증서 설치, 리버스 프록시 적용 프로젝트에서 사용하는 환경은 AWS(ubuntu 20.04 LTS)이다. 1. Docker 설치 https://docs.docker.com/engine/install/ubuntu/ Set up the repository $ sudo apt-get update $ sudo apt-get install \ apt-transport-https \..

STUDY/Web 2021.09.27

[JavaScript] Ajax 비교 글 (axios, fetch, xhr)

웹배울때 axios를 더 많이 사용했는데 리액트 네이티브 사용할땐 fetch도 사용해 보려고 블로그 글 몇개 긁어왔다. https://www.daleseo.com/js-window-fetch/ [자바스크립트] fetch() 함수로 API 호출하기 Engineering Blog by Dale Seo www.daleseo.com https://velog.io/@lingodingo/ES6-XMLHttpRequest XMLHttpRequest, Fetch API 면접에서 이걸 묻는다면 도망치자 velog.io https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API React | axios란? (feat. Fetch API) # Intro 리액트는 효율적..

STUDY/Web 2021.07.23