[웹서비스 개발팀] CS(GA, Cors ) 조사

Anna Park·2024년 8월 5일

Google Analytics cors

webservice

목록 보기

31/33

1. GA(google analytics) 조사

https://marketingplatform.google.com/about/analytics/

유저의 전체 탐색 여정 파악하는 도구이며 나아가 통계 자료를 활용하여 고객에 대한 이해도를 높이며 마케팅을 개선할 수 있는 도구로 활용됩니다.

기능들을 아래 내용으로 정리해 보았습니다.

머신러닝을 활용하여 구매 또는 앱 제거 가능성이 높은 사용자 예측 기능을 통한 선제적 통계
솔루션 및 파트너 제품과 작동하여 마케팅 실적 개선 가능(Ads, cloud 등)
공유 가능한 보고서(실시간 보고, 사용자 참여 보고, 수익 창출 보고서 등)를 통해 신속하게 팀과의 협업 가능
비즈니스 요구에 맞게 데이터에 액세스 및 시각화(유입경로 탐색, 세그먼트중복, 경로탐색, 동질 집단, 사용자 탐색 등)

방법

계정 설정 시 업종 카테고리, 비즈니스 규모, 사용 목적을 업체에 맞게 선택,

계정 생성 시 발급 받은 GA추적코드를 웹사이트에 심어(1) 소스 코드에 직접 GA 태그를 추가하는 것과 2) 구글 태그관리자(Google Tag Manager, GTM) 툴을 통해 설치하는 것 두 가지 방법) 활용합니다.

2. CORS 정책 조사

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

시작

검색을 시작하자마자 ‘CORS는 왜 이렇게 우리를 힘들게 하는걸까?’, ‘초보자도 간단하게 이해하는 개념과 해결방법’ 등이 눈에 띕니다.

Cross-Origin Resource Sharing 교차 출처 리소스 공유 정책이라고 하는데 너무 어려운 말이라 Mdn Web Docs를 찾아보니 번역 문서가 있는데 브라우저가 자신의 출처가 아닌 다른 어떤 출체(도메인, 스킴, 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTP 헤더 기반 메커니즘입니다. 이 말도 어려워서

claude

생성형 AI에게 예시를 부탁해봤습니다.

단순 요청 예시:
https://example.com의 웹 페이지에서 https://api.example.org의 API를 호출하는 경우를 가정해봅시다.
클라이언트 코드:

fetch('https://api.example.org/data')
	.then(response => response.json())
    .then(data => console.log(data));

서버 응답 헤더:

Access-Control-Allow-Origin: https://example.com

이 경우, API 서버가 특정 출처(https://example.com)를-jk7q/) 허용하도록 설정되어 있어 요청이 성공적으로 처리됩니다.

사전 요청(Preflight) 예시:
같은 상황에서 커스텀 헤더를 포함한 POST 요청을 보내는 경우입니다.
클라이언트 코드:

fetch('https://api.example.org/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  },
  body: JSON.stringify({ key: 'value' })
})

이 경우 브라우저는 먼저 OPTIONS 요청을 보냅니다:

OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, X-Custom-Header

서버 응답:

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type, X-Custom-Header
Access-Control-Max-Age: 86400

이 응답을 받은 후에야 브라우저는 실제 POST 요청을 보냅니다.

자격 증명(Credentials)을 포함한 요청 예시:
쿠키를 포함한 요청을 보내는 경우입니다.
클라이언트 코드:

fetch('https://api.example.org/user-data', {
  credentials: 'include'
})

서버 응답 헤더:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

이 경우 서버는 특정 출처를 명시해야 하며(와일드카드 '*' 사용 불가), Access-Control-Allow-Credentials를 true로 설정해야 합니다.

CORS 오류 예시:
만약 서버가 올바른 CORS 헤더를 제공하지 않는다면, 브라우저는 요청을 차단하고 다음과 같은 오류를 콘솔에 표시합니다:

Access to fetch at 'https://api.example.org/data' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

이러한 예시들은 CORS 정책이 실제로 어떻게 작동하는지, 그리고 개발자가 어떻게 CORS를 구성해야 하는지를 보여줍니다. CORS는 웹 보안을 유지하면서도 필요한 경우 다른 출처의 리소스에 접근할 수 있게 해주는 중요한 메커니즘입니다.