jwj3400

세션/쿠키 사용자가 로그인을 하면 세션 ID를 발급하여 response에 넣어 돌려줌 사용자는 서버에서 세션ID를 받아 쿠키에 저장한 후, 인증이 필요할 때마다 쿠키를 헤더에 실어 보냄 사용자의 쿠키를 해커가 가로챈 경우 서버는 해커를 사용자로 오인해 정보를 뿌려줄 수 있음 -> HTTPS를 사용해 탈취해도 정보를 읽기 힘들게함, 세션에 유효시간을 넣어줌 stateful(저장소가 필요한)한 서버가 되는 단점이 있음 토큰 JWT(Json Web Token) 사용자가 로그인하면 서버에서 Acces Token을 발행 토큰 발행을 위해 Header, Payload, Verify Signature가 필요 Header: 암호화할 방식, 토큰타입 Payload: 서버에 보낼 데이터 값이 들어감, 유저의 고유 ID, ..

XSS 공격대상이 Client 악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 기법 Stored XSS: 사용자가 게시물을 열람시 공격자가 입력해 놓은 악성 스크립트가 실행되어 사용자의 정보 유출, 스크립트 코드가 서버내에 저장됨 Reflected XSS: 공격자가 HTTP 요청에 악성 콘텐츠를 주입하면 그 결과 사용자에게 반사되는 형태, 사용자가 악성 스크립트 url을 클릭하도록 유도 공격자의 서버로 쿠키에 저장된 세션 토큰을 전송하는 식으로 를 목적으로함 CSRF CSRF란 명시적인 동의 없이 사용자를 대신하여 웹 어플리케이션에 악의적인 행동을 취하는 공격 쿠키와 세션을 이용한 로그인 순서 로그인 하면 세션 아이디를 서버에서 생성하고, 세션 아이디를 클라이언트 set-Cookie 헤더에 담아서 ..

CORS SOP(Same-Origin Policy) CORS는 한 사이트에서 주소가 다른 서버로 요청을 보낼 시 발생하는 문제 CORS는 브라우저 단에서 막는 것임 브라우저가 Origin을 따질 때에는 Scheme, Host, Port를 보고 origin을 따짐 (https 는 443이 기본 포트) CORS를 위해서는 벡엔드단에서 프론트엔드의 origin을 등록해놓아야함 허용할 origin을 Access-Control-Allow-Origin에 추가 CORS에는 세가지 시나리오가 존재 1. Preflight request 브라우저는 요청을 보낼 시 본 요청과 예비요청을 나누어서 보냄. 이 중 예비요청을 OPTIONS 메서드로 보내는데 이를 Preflight라고 함 요청을 보내면 Response로 Acces..

React-router-dom (v6 기준) BrowserRouter: history API를 이용해 UI를 업데이트, SPA(single page application)은 화변의 header나 footer, sidebar등 다시 로드해도 변함없는 부분이 있고 BrowserRouter는 변경되는 부분만 부분적으 렌더링함 Routes: Route로 생성된 자식 컴포넌트 중에 path와 url이 대응되는 컴포넌트 렌더링(element 요소) 이때 url이 중복되는 경우 먼저 마주치는 컴포넌트를 렌더링 (순서가 중요) ex) 아래코드에서 /secondPage에 접근해도 FirstPage로 넘어가짐 import { BrowserRouter, Routes, Route, Link } from 'react-route..

Margin 주변 요소와 거리를 두기 위한 영역 양수, 음수, auto, collapse 가능 (collapse는 둘 이상의 요소가 있을 때 margin 값이 더 큰것으로 합쳐지는 특징 ) margin과 padding 은 위, 오른쪽, 아래, 왼쪽 (시계방향) 순으로 값 지정 가능 .style { margin: 20px 10px 0px 0px; padding: 20px 10px 0px 0px; } Borader 요소 영역을 표현하는 선의 두께 Padding boarder와 요소간의 간격을 나타냄 padding 값은 div 틀 안에서 문자를 padding 만큼 밀어내는게 아니라 본래 div 값에서 padding 값만큼 div 경계를 밀어냄 padding은 margin과 달리 auto, collapse 사용..

1. transform 이용 .parentContainer { position: relative; } .childContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } top과 left를 50퍼를 주면 정 중앙에 상단 좌측 꼭짓점이 배치하게 됨 transform: translateX(), transform: translateY()를 통해서 오른쪽(x축으로) 이동, 아랫쪽 (y축으로 이동) 이동할 수 있고, -(minus)를 통해서 좌측과 상단으로 이동 transform: translate(x,y)는 translateX()와 translateY()를 합친 함수, 이를 통해서 도형의 50퍼만큼 위쪽과 왼쪽..