
2023년 리뷰
2023년 한해 동안 배운 기술들, 생각들 정리
my story

2023년 한해 동안 배운 기술들, 생각들 정리
my story
리액트 18에 추가된 사항들 정리
frontend
리액트를 정확하게 사용하는 방법들을 정리
frontend
노드를 프로처럼 사용하기 위한 모든 팁들을 정리!
backend
프로처럼 자바스크립트 사용할 수 있는 10가지 팁
javascriptsame-site, same-origin origin(출처)이란 scheme + hostname + port 의 조합입니다. 예를 들어, URL이 https://www.example.com:443/search?query=frontend인 경우, origin은 https://www.example.com:443이 됩니다. 출처 A 출처 B same-origin 여부 https://www.example.com:443 https://www.naver.com:443 cross-origin : 호스트가 다름 https://example.com:443 cross-origin : 호스트가 다름 https://search.example.com:443 cross-origin : 호스트가 다름 http://www.example.com:443 cross-origin : 프로토콜이 다름 https://www.example.com:80 cross-origin : 포트가 다름 https://www.example.com:443 same-origin : 완전 일치 https://www.example.com same-origin : 포트가 암시적으로 일치 site(사이트)는 .com, .org 와 같이 IANA에 등록된 TLD(Top-Level Domain, 최상위 도메인)와 바로 그 앞의 도메인의 조합을 말합니다. 가령 https://www.example.com:443/search인 경우라면, site는 example.com 이 됩니다. 다만 이것만으로는 식별이 불가한 경우가 있을 수 있어서, .co.kr 이나 .github.io 같이 eTLD (effective Top-Level Domain, 유효 최상위 도메인) 이라는 개념을 추가로 정의하여, eTLD + 1 으로 site를 정의하기도 합니다.

2023년 한해 동안 배운 기술들, 생각들 정리
my story
리액트 18에 추가된 사항들 정리
frontend
리액트를 정확하게 사용하는 방법들을 정리
frontend
노드를 프로처럼 사용하기 위한 모든 팁들을 정리!
backend
2022년 한해 동안 배운 기술들, 생각들 정리
my story
기본 적인 Node 사용법에 대해 전부 정리!
backend
프로처럼 자바스크립트 사용할 수 있는 10가지 팁
javascript
기본 문법부터 사용하는 실전까지 최종정리
javascript
2021년 한해 동안 배운 기술들, 생각들 정리
my story'레퍼러가 없어졌어요!' 사용자들이 서비스를 어떻게/잘 사용하고 있는지를 파악하고 분석하는 일은 중요합니다. 여타 다른 서비스들처럼, 필자가 개발하는 서비스 역시 성과 측정이나 사용자 행동 패턴 분석 등의 목적으로 Google Analytics와 같은 외부 솔루션과 인하우스 솔루션을 복합적으로 활용하여 데이터를 수집하고 있었습니다. 그런데 어느 날 '특정 기간 이후부터 로그에서 레퍼러가 확인되지 않는다'는 연락이 왔습니다. 사용자가 무슨 행동을 했는지(event/action)는 알 수 있지만, 어떤 페이지에서 이동해 왔는지(referer)를 알 수 없게 되어 유입/유출(funnel) 분석에 문제가 생긴 것입니다. 다행히 원인은 금방 짚어낼 수 있었습니다. 특정 시점부터 갑자기 유실된 것이었기 때문에, 해당 시점을 전후로 발생했던 어떠한 변경을 추적해 나가면 되었기 때문입니다. 동일 출처 정책 웹 사이트 보안의 기본적인 대전제는 동일 출처Same-Origin 입니다. 이것을 Same-Origin Policy(SOP) 라고 합니다. 가능한 공격 벡터를 줄이기 위해, 어떤 출처에서 로드된 문서나 스크립트와 같은 리소스가 다른 출처의 리소스와 상호작용할 수 있는 방법을 제한하는 보안 정책의 핵심입니다. 어떤 요청이 동일한 출처에서 발생하지 않은 경우에는 Cross-Site 또는 Cross-Origin 이라고 하며, 개인 정보 보호 및 웹 공격 방어 차원에서 특정한 기능이나 정보가 제한됩니다. 대개 프론트엔드에서는 CORS와 같이, 백엔드 서버와 통신한다던가 하는 통상적인 개발 과정에서 이러한 이슈와 흔히 맞닥뜨리기 마련인데, 이 중에서도 요청이 발생한 출처의 URL 정보를 의미하는 Referer 헤더가 일부 또는 전체 생략되는 현상이 익숙할 수 있습니다. HTTP 레퍼러를 다루는 글에서 아주 흔하게 언급되는 내용이기는 하지만, 스펙 정의 단계에서 'referrer'를 'referer'로 오타를 낸 것에서 기인해 'HTTP referer'가 되었다는 배경이 있습니다: RFC 1945 - section 10.13 다만 Referrer-Policy 헤더에서는 'referrer'로 철자가 정확하게 되어 있는 등 일관적이진 않습니다. 어떤 상황에서 이러한 동작이 발생하는지 알아보기에 앞서, origin과 site의 차이가 무엇인지 각 정의를 먼저 살펴보겠습니다. 본 블로그의 모든 컨텐츠는 MIT 라이센스를 따릅니다.
copyright jiyoon.lee