Host는 네트워크에 연결된 장치를 지칭할 수도 있고, URL에서 웹 서버의 주소를 가리키는 용어이다. 웹 주소에서의 Host는 도메인 이름과 포트 번호를 포함할 수 있다. 예를 들어, URL http://www.example.com:80/page.html에서 Host는www.example.com:80이다. 여기서 www.example.com은 도메인 이름이고, 80은 포트 번호이다.
Domain은 인터넷에서 사이트를 식별하는 주소이다. 쿠키와 관련하여, "Cookie Domain"은 해당 쿠키가 유효한 도메인을 명시한다. 쿠키 도메인이 설정되면, 이 도메인과 서브 도메인에서만 쿠키가 접근 가능하다. 예를 들어, 쿠키 도메인이 .example.com으로 설정되면, www.example.com, subdomain.example.com 등에서 해당 쿠키를 사용할 수 있다. 쿠키 도메인이 명시적으로 설정되지 않으면, 쿠키는 그 쿠키를 생성한 서버의 도메인에 대해서만 접근 가능하다.Origin은 웹 보안에서 매우 중요한 개념으로, 프로토콜, 호스트(도메인과 포트 번호를 포함) 그리고 포트를 포함하여 정의된다.
Origin은 콘텐츠의 출처를 식별하고, 다양한 보안 정책(예: SOP, CORS 등)에서 중요한 역할을 한다. 예를 들어, https://www.example.com:443에서 프로토콜은 https, 호스트는 www.example.com, 포트는 443이다. 이 모든 요소가 같아야 동일 출처로 간주된다.Host vs. Domain: Host는 특정 웹 서버를 가리키는 데 사용되며 포트 번호를 포함할 수 있다. 반면, Domain은 더 넓은 범위로, 같은 도메인 내에서 쿠키 등의 공유 자원을 관리하는 데 사용된다.
Domain vs. Origin: Domain은 보통 웹 주소의 일부로 쓰이며 쿠키와 같은 웹 리소스의 범위를 정의하는 데 사용된다. Origin은 프로토콜, 호스트, 포트 모두를 명시적으로 포함하여 웹 콘텐츠의 출처를 보다 엄격하게 정의한다. Origin이 같아야만 웹 페이지간 데이터를 자유롭게 공유할 수 있다.Host vs. Origin: Host는 도메인 이름과 선택적으로 포트 번호를 포함하지만, Origin은 프로토콜, 도메인, 포트 모두를 명시적으로 포함한다. 보안 정책 적용 시 Origin이 더 엄격하게 사용된다.
SameSite 쿠키는 웹사이트가 사용자의 브라우저와 상호 작용하는 방식을 보다 세밀하게 제어할 수 있게 하는 쿠키의 속성 중 하나이다. 이 속성은 크로스 사이트 요청 보안(Cross-Site Request Forgery, CSRF) 공격을 방지하는 데 효과적으로 사용될 수 있다. SameSite 속성은 쿠키가 한 웹사이트에서 생성되어 다른 웹사이트와의 상호 작용에서 사용되는 것을 제한한다.
SameSite=Strict로 설정된 쿠키는 쿠키를 생성한 동일한 사이트에서만 보내진다. 예를 들어, 사용자가 www.example.com에서 생성된 쿠키는 오직 www.example.com에서만 읽을 수 있다.이 설정은 사용자가 링크를 클릭하여 다른 사이트로 이동했을 때, 쿠키가 전송되지 않는다는 것을 의미한다. 이로 인해 사용자 경험이 제한될 수 있지만, 보안은 매우 강화된다.
SameSite=Lax 설정은 좀 더 유연하다. 이 설정은 사용자가 외부 사이트에서 현재 사이트로 자연스럽게 넘어갈 때 (예: 링크 클릭을 통해) 쿠키를 전송한다.그러나 외부 사이트에서 발생하는 POST 요청에서는 쿠키를 전송하지 않는다. 이는 대부분의 CSRF 공격 시나리오에서 보호할 수 있다. 이 설정은 사용자 경험을 크게 훼손하지 않으면서도 필수적인 보안을 제공한다.
SameSite=None 설정은 쿠키가 모든 출처의 요청에 대해 전송되도록 허용한다. 이 설정을 사용하려면 쿠키는 반드시 Secure 플래그도 설정되어야 하며, 쿠키는 오직 보안 연결(HTTPS)을 통해서만 전송된다.이 옵션은 다양한 도메인 간에 세션을 유지해야 하는 애플리케이션에서 유용하다.
SameSite 속성은 웹 애플리케이션을 CSRF 공격과 일부 크로스 사이트 스크립팅(XSS) 공격으로부터 보호하는 데 도움을 준다.개발자는 이 속성을 사용하여 애플리케이션의 쿠키 전송 정책을 더 세밀하게 제어할 수 있다.특히 Lax 설정은 대부분의 사용 사례에 적합한 보안과 사용성의 균형을 제공한다. 브라우저들은 SameSite 속성을 지원하고 있으며, 웹 개발자들은 이 옵션을 적절히 사용하여 애플리케이션의 보안을 강화할 수 있다.
웹 개발에서 사용자 데이터를 저장하는 방법으로 Cookies, localStorage, sessionStorage 세 가지가 주로 사용된다. 이 저장 방법들은 각기 다른 특성과 용도를 가지며, 사용 사례에 따라 적절한 저장소를 선택하는 것이 중요하다.
Cookies는일반적으로 4KB로 제한된다. 쿠키는 만료 날짜를 가질 수 있으며, 설정된 날짜가 지나면 자동으로 삭제된다. Secure, HttpOnly, SameSite 등의 플래그를 설정하여 보안을 강화할 수 있다. 모든 HTTP 요청에 쿠키 정보가 포함되어 서버로 전송되므로, 네트워크 트래픽에 영향을 줄 수 있다.사용자 인증, 사용자 설정 등을 관리하며, 서버가 사용자를 식별하도록 돕는다.
localStorage는 대부분의 브라우저에서 5MB~10MB 사이의 데이터를 저장할 수 있다. 브라우저가 닫혀도 데이터가 지속적으로 저장되며, 수동으로 삭제하지 않는 한 유지된다. 데이터가 서버로 전송되지 않아 네트워크 부하가 없다. 같은 도메인 및 프로토콜 내에서만 접근할 수 있다. 사용자 설정, 사이트 기본 설정, 대량의 데이터 저장 등에 사용된다.
sessionStorage는 localStorage와 비슷하게 5MB~10MB 사이다. 브라우저 탭이 열려 있는 동안에만 데이터가 유지되며, 탭을 닫으면 데이터가 삭제된다. 데이터가 서버로 전송되지 않아 네트워크 부하가 없다. localStorage와 같이 같은 도메인 및 프로토콜 내에서만 접근할 수 있다. 각 브라우저 탭에 독립적인 세션 데이터를 유지하는 데 사용되며, 예를 들어 온라인 폼 작성 중 페이지를 새로 고침해도 데이터가 유지되도록 한다.
'웹 개발 > 기타' 카테고리의 다른 글
jest와 github actions를 이용한 간단한 코드 테스트(React) (0) | 2024.07.12 |
---|---|
XSS, CORS, Code Injection (0) | 2024.05.26 |
HTTP, HTTPS, Mixed Content (0) | 2024.05.05 |
Web Workers와 Concurrency (0) | 2024.04.13 |
Synchronous I/O, Asynchronous I/O (1) | 2024.04.06 |