BASIC6 [Basic] Session & Cookie 1. 쿠키(Cookie)특징:클라이언트 측 저장: 쿠키는 클라이언트(브라우저)에 저장되며, 서버는 클라이언트가 보낸 쿠키 데이터를 참조할 수 있습니다.크기 제한: 각 쿠키는 일반적으로 4KB 정도의 크기 제한이 있으며, 브라우저마다 관리하는 쿠키의 개수 제한이 있습니다.만료 시간: 쿠키는 만료 시간이 설정 가능하며, 만료 시간 이후에는 브라우저가 해당 쿠키를 삭제합니다.세션 쿠키(Session Cookie): 브라우저가 닫히면 삭제되는 쿠키.영구 쿠키(Persistent Cookie): 만료 기간을 설정해두면 그 시간까지 유지되는 쿠키.보안: 쿠키는 평문으로 저장되기 때문에 민감한 정보는 저장하지 않는 것이 좋습니다. HTTPS를 통해 전달할 수 있으며, HttpOnly, Secure, SameSite와.. 2024. 10. 7. [Basic] 프론트엔드 XSS 보안 XSS 방어하기현재 XSS를 방어해주는 라이브러리나 프레임워크가 존재합니다. 하지만 이를 제대로 사용하기 위해서는 어떠한 대책이있는지 알아두고 있는 것이 좋습니다. 방어하는 방법은 아래와 같이 여러가지가 존재합니다.문자열 이스케이프 처리 예시에서 제시한 img tag에서 에서 '' 등을 이스케이프 처리 합니다. 아래와 같은 문자들을 이스케이프 처리 할 수 있습니다.특수문자이스케이프 처리&&>>""'' 속성값의 문자열을 쌍따옴표로 감싸기 만약 URL이 이러한 형태를 띄고 있다면 이스케이프 처리만으로는 방어하기 힘듭니다.위와 같은 URL이 HTML로 변환되면 아래와 같습니다.이렇게 되면 input 속성이 설정되는 결과를 낳아서 의도하지 않은 동작과 공격을 당할 수 있습니다. 1차적으로는 이러한 속성값을 쌍따.. 2024. 10. 2. [Basic] Client Side Rendering vs Sever Side Rendering 1. Client-Side Rendering (CSR)Client-Side Rendering에서는 초기 HTML 페이지가 빈 상태로 브라우저에 전달되고, JavaScript가 로드된 후에 클라이언트에서 동적으로 페이지를 렌더링합니다. 모든 렌더링 작업은 브라우저에서 이루어지며, 사용자 인터페이스가 완성되기 전까지는 JavaScript가 완전히 실행되어야 합니다.동작 방식: 브라우저가 HTML과 함께 JavaScript 파일을 다운로드하여 실행한 후, React 컴포넌트가 클라이언트에서 렌더링됩니다.장점: 페이지 이동이 빠르고, 동적 콘텐츠 로딩에 유리합니다.단점: 첫 페이지 로딩 속도가 느릴 수 있으며, SEO(검색 엔진 최적화)에 불리할 수 있습니다.2. Server-Side Rendering (SSR.. 2024. 9. 26. [Basic] SPA ( Single Page Application ) - SPA는 'Single Page Application'의 약자로 단일 페이지로 구성된 웹 애플리케이션을 말한다. - 렌더링의 역할을 서버에게 넘기지 않고 브라우저에서 처리하는 방식- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신 > 장점1. 전체적인 트래픽 감소 / 렌더링 효율 향상2. 모듈화 / 컴포넌트 개발 용이3. 빠른 화면 이동 가능4. 향상된 UX 제공 > 단점1. 정적리소스 한번에 다운로드 --> 초기 구동 속도 느림2. 코드 외부 노출 위험 존재3. SEO 가 어렵다. ------------------------- SEO 가 어려운 이유는 클라이언트 렌더링시에 DOM 에 빈상태로.. 2024. 9. 25. 이전 1 2 다음