Mercado Libre는 18개 국가에서 운영 중인 중남미의 대표적인 전자상거래 플랫폼입니다. MercadoLibre는 1억 명 이상의 활성 사용자와 마켓플레이스, 결제 (Mercado Pago), 물류를 비롯한 다양한 서비스를 갖춘 복잡한 디지털 인프라를 보유하고 있습니다.
Mercado Libre는 40개가 넘는 도메인을 소유하고 있으며, 그중 많은 도메인이 교차 사이트 사용자 인증 및 사기 감지와 같은 기능을 사용 설정하기 위해 서드 파티 쿠키를 사용해 왔습니다.
Mercado Libre는 서드 파티 쿠키를 사용할 수 있는 중요한 사용자 환경과 기능을 파악하기 위해 광범위한 작업을 진행했습니다. 개인 정보 보호 샌드박스 API를 비롯한 서드 파티 쿠키의 대안을 연구하고 구현하면 서드 파티 쿠키를 사용할 수 있는지 여부와 관계없이 속성이 예상대로 작동하고 사용자에게 계속해서 긍정적인 경험을 제공할 수 있습니다.
서드 파티 쿠키에 대한 의존도를 줄이고 고객의 개인 정보를 보호하기 위한 Mercado Libre의 여정을 알아보세요.
쿠키 감사 및 영향 평가
Mercado Libre는 서드 파티 쿠키 사용의 세 가지 측면을 고려했습니다.
- Mercado Libre는 도메인 간의 크로스 사이트 쿠키 공유를 사용하나요?
- 서드 파티로서 제공하는 서비스가 서드 파티 쿠키를 사용하나요?
- 서드 파티 쿠키를 사용할 수 없으면 의존하는 서드 파티 서비스에 영향을 미치나요?
이 규모의 디지털 속성에 서드 파티 쿠키 사용이 미치는 영향을 평가하려면 관련된 비즈니스 부서가 많으므로 조정된 접근 방식이 필요했습니다.
Mercado Libre 프런트엔드 플랫폼팀은 영향 감사를 주도하고 다른 팀에 중앙 집중식 커뮤니케이션 및 지원을 제공했습니다. 여기에는 모든 팀이 새로운 관행을 채택할 수 있도록 회사 전체에서 필요한 변경사항을 이해할 수 있는 리소스와 교육이 포함되었습니다.
교차 사이트 쿠키 공유 사용 사례
Mercado Libre의 비즈니스 부문은 각각 mercadolibre.com, mercadopago.com, mercadoshops.com과 같은 별도의 도메인에서 운영됩니다.
자세한 감사를 통해 생태계 내 사용자 경험에 크로스 사이트 쿠키 공유가 중요한 위치를 파악했습니다.
- 사용자 인증: 18개 국가에서 월간 활성 구매자 7,500만 명의 일부에게 서비스가 중단될 수 있습니다.
- 내부 분석: 4,000명 이상의 비즈니스 분석가가 의사결정을 위해 교차 사이트 데이터를 사용합니다. 사용자 여정 추적에 미칠 수 있는 영향
- 사기 방지: 서드 파티 쿠키를 사용할 수 없는 경우 (Mercado Libre의 경우 초당 50회 이상의 구매, Mercado Pago의 경우 초당 244건의 거래) 안전한 결제 흐름에 필수적입니다.
이 포괄적인 분석에는 팀, 소유자, 비즈니스 영향, 사용 사례 설명, 현재 동작, 잠재적 중단, 제안된 개인 정보 보호 샌드박스 솔루션과 같은 정보가 포함되었습니다.
Mercado Libre의 파티셔닝된 쿠키
CHIPS라고도 하는 파티션된 쿠키를 사용하면 개발자가 최상위 사이트별로 별도의 쿠키 저장소를 사용하여 분할된 스토리지에 쿠키를 선택할 수 있습니다.
CHIPS를 사용하여 서드 파티 쿠키 없이 사기 감지
도전과제
Mercado Libre는 서드 파티 쿠키를 사용하여 결제 플랫폼에 액세스하는 사용자에게 원활한 환경을 제공합니다. 여기에는 플랫폼에서 직접 이루어지는 결제와 Mercado Pago를 결제 프로세서로 사용하는 투명한 통합이 모두 포함됩니다. 예를 들어 사용자가 알고 있는 기기에서 신용카드가 사용되는 시점을 파악하여 신용카드 사기를 방지하는 데 도움이 되는 메커니즘에 서드 파티 쿠키를 사용합니다.
기기 정보는 Mercado Libre의 머신러닝 모델이 결제를 승인할지 여부를 결정하는 데 사용하는 주요 데이터 신호 중 하나입니다. 따라서 상당수의 사용자에 대해 이 정보를 보유하지 않으면 결제 승인 비율이 크게 감소할 수 있습니다.
솔루션
서드 파티 쿠키의 한계를 해결하기 위해 Mercado Libre는 결제 플랫폼과 통합된 각 웹사이트에 고유한 쿠키를 설정하는 솔루션인 CHIPS를 테스트했습니다. 목표는 Mercado Libre가 각 매장에 대한 여러 정보를 유지할 수 있도록 하는 것입니다.
이 경우 CHIPS를 통해 Mercado Libre는 서드 파티 쿠키가 차단된 경우에도 재구매 고객에게 원활하고 효율적인 환경을 지원할 수 있었습니다.
기술 심층 분석
Mercado Pago를 결제 프로세서로 사용하는 가장 일반적인 통합 방법은 카드 데이터 토큰화 모듈과 사기 방지 모듈을 모두 통합한 JavaScript를 사용하는 것입니다. 사기 방지 모듈은 서드 파티 쿠키를 사용하여 결제를 사용자의 기기에 연결합니다.
이전에는 Mercado Pago에서 서드 파티 쿠키를 사용하여 다음 다이어그램과 같이 매장에서 사용자의 기기를 식별하고 추적할 수 있었습니다.
현재 Mercado Libre는 분할된 쿠키를 사용하여 최상위 사이트마다 별도의 쿠키를 설정하여 기기 식별을 유지하고 있습니다. 다음 이미지에서 볼 수 있듯이 이 접근 방식은 스토어 간에 정보 공유를 제한하므로 개인 정보를 보호합니다. 파티션된 쿠키는 서드 파티 쿠키를 사용할 수 없는 경우에 사용됩니다. 이렇게 하면 스토어 간에 정보 공유가 제한되어 사용자 개인 정보 보호가 개선됩니다.
초기 개발
먼저 Mercado Libre는 Chrome에서 서드 파티 쿠키를 사용 중지하고 Mercado Libre가 서드 파티 제공업체로 참여하는 사이트에 쿠키가 제대로 설정되지 않았음을 확인했습니다. 그런 다음 Mercado Libre는 이러한 쿠키를 파티셔닝되도록 업데이트했습니다. 이 변경사항을 통해 사용자가 서드 파티 쿠키를 사용 중지했더라도 Chrome에서 파티션된 쿠키를 설정할 수 있음을 확인할 수 있었습니다. 그런 다음 Mercado Libre는 CHIPS 보안 설계 안내에 따라 Set-Cookie
헤더를 추가했으며 오류가 발생하지 않았습니다.
비즈니스 효율성
Mercado Libre는 이미 Mercado Pago 통합 및 맞춤 도메인으로 Mercado 스토어에 CHIPS를 사용하기 시작했습니다. 이제 Mercado Libre는 사용자의 기기에 표준 비파티션 쿠키와 함께 파티션된 쿠키를 추가로 저장합니다.
Mercado Libre의 CHIPS 구현은 간단했습니다.
머신러닝 사기 모델에서 CHIPS의 효과 테스트
Mercado Libre는 서드 파티 쿠키가 차단된 시나리오를 시뮬레이션하기 위해 대조군에 대한 표준 파티션되지 않은 쿠키 신호 전송을 중단하고 대신 파티션된 (CHIPS) 쿠키를 사용할 계획입니다. 처음에는 이 대조군에 사이트 인구의 일부가 포함되며 Mercado Libre는 효과를 테스트하면서 사이트의 점유율과 수를 점진적으로 늘릴 계획입니다.
효과는 이전 유사 기간과 비교하여 대조군의 결제 승인 건수에 따라 측정됩니다.
이전 실험
Mercado Libre는 파티션되지 않은 쿠키 대신 CHIPS를 사용하여 동일한 기기를 식별하고 기기의 사용 기간 (쿠키)을 측정할 수 있는지 확인하기 위해 통제 그룹에 대해 유사한 실험을 진행했습니다.
대조군은 아르헨티나와 브라질의 타겟팅된 판매자로 구성되었으며 두 그룹은 동일한 방식으로 작동했습니다.
결론적으로 Mercado Libre는 CHIPS를 사용하는 기기의 약 70% 의 ID를 확인할 수 있었습니다. 즉, 나머지 30% 는 신규 사용자이거나 예상치 못한 동작이 발생한 케이스였습니다.
CHIPS 구현 종료
Mercado Libre는 개인 정보 보호와 최소한의 사용자 불편 사이에서 절충점을 찾더라도 사용자 개인 정보를 보호하기 위해 최선을 다하고 있습니다. CHIPS는 간단하게 구현할 수 있었으며 동일한 사이트 내에서 이러한 절충의 영향을 최소화하는 데 도움이 되었습니다. Mercado Libre는 비공개 상태 토큰과 같은 다른 개인 정보 보호 샌드박스 솔루션을 계속 모색하고 있습니다. 이러한 솔루션은 환경 격차를 완전히 해소하여 개인 정보 보호와 유용성이라는 두 가지 장점을 모두 누릴 수 있습니다.
Mercado Libre의 관련 웹사이트 세트
관련 웹사이트 세트 (RWS)는 회사가 사이트 간의 관계를 선언하는 방식으로, 브라우저에서 특정한 목적으로 제한된 서드 파티 쿠키 액세스를 허용합니다.
관련 웹사이트 세트를 사용하여 분석 기능 유지
도전과제
새 기기가 Mercado Libre가 소유하고 운영하는 (O&O) 도메인 중 하나에 들어가면 Meli는 쿠키를 사용하여 mercadolibre.com, mercadopago.com과 같은 다양한 도메인에서 기기의 활동을 파악합니다.
솔루션
서드 파티 쿠키를 사용할 수 없는 상황을 해결하기 위해 Mercado Libre는 단일 세트에서 기본 도메인과 다른 5개의 연결된 도메인의 제한사항을 준수하면서 서드 파티 쿠키가 사용되는 모든 고객 대상 도메인에 RWS를 구현했습니다.
기술 심층 분석: 포함할 적절한 도메인 찾기
세트에 포함할 도메인을 조사하는 과정에서 Mercado Libre는 많은 도메인에 더 이상 사용되지 않는 오래된 쿠키가 있음을 발견했습니다. 이러한 도메인은 세트에서 제외되었습니다.
웹 프런트엔드 플랫폼팀은 Mercado Libre의 관련 웹사이트 세트를 만들고 관리했습니다. 전체 세트는 관련 웹사이트 세트 GitHub 저장소에서 확인할 수 있습니다.
{
"contact": "infraestructura@mercadolibre.com",
"primary": "https://mercadolibre.com",
"associatedSites": [
"https://mercadolivre.com",
...
],
"rationaleBySite": {
"https://mercadolivre.com": "Mercado Libre in Brazil",
...
},
"ccTLDs": {
"https://mercadolibre.com": [
"https://mercadolibre.com.ar",
...
],
"https://mercadolivre.com": [
"https://mercadolivre.com.br"
],
...
}
},
제출이 승인된 후 2주 만에 세트가 프로덕션에 게시되었습니다.
Storage Access API를 사용하여 O&O 도메인 전반에서 서드 파티 쿠키 복제
요구사항
서버가 쿠키를 설정하려면 CORS를 지원해야 하며 요청이 교차 출처여야 하고 사용자 인증 정보가 포함되어야 합니다.
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader('Access-Control-Allow-Origin', `${req.headers.origin}`);
쿠키는 다음과 같이 구성해야 합니다.
Secure
SameSite=None
기본적으로 서드 파티 쿠키를 사용할 수 없는 경우 클라이언트는 navigator.permissions.query()
를 사용하여 파티션되지 않은 쿠키에 액세스할 권한이 있는지 확인한 다음 requestStorageAccessFor()
를 사용하여 각 삽입된 도메인의 저장소 액세스 권한을 요청해야 합니다. 또한 사용자 에이전트가 처음으로 권한을 요청하려면 화면과의 사용자 상호작용 (예: 클릭, 키보드 작업)이 필요합니다.
RWS 문제 해결
이미지 픽셀과 같이 기존의 쿠키 전파 프로세스 및 Storage Access API를 사용하는 경우 사용자 상호작용이 필요하여 제한사항이 있었습니다. Mercado Libre의 도메인 간 사용자 유지 로그인이 이러한 경우였습니다. 사용자가 서드 파티 쿠키를 선택 해제하면 로그인이 중단됩니다.
관련 웹사이트 세트 및 개인 정보 보호 샌드박스 기술은 서드 파티 쿠키를 일대일로 대체하도록 설계되지 않았으며 일부 사용 사례를 지원하지 않을 수 있습니다.
이미지 픽셀
- Mercado Libre는
crossorigin="use-credentials"
속성을 추가할 수 있습니다. 하지만 사용자 상호작용 (사용자가 링크를 클릭함)에 의존하면 Mercado Libre에서 쿠키가 설정될지 확신할 수 없습니다. 화면 간에 탐색이 있는 경우에도 픽셀이 취소됩니다. Chrome에서 탐색을 감지하면 현재 페이지의 모든 리소스 요청을 취소하여 새 페이지 로드를 시작합니다.
- Mercado Libre는
sendBeacon()
crossorigin
를 구성할 수 없으므로 요청이 실패하고 쿠키가 전송되지 않습니다.
sendBeacon()
또는 이미지 픽셀을 사용한 리디렉션- 이는 사용자 상호작용에 종속되므로 JavaScript를 실행하는 여러 도메인 간의 중간 화면으로 리디렉션을 통해 쿠키를 설정할 수 없습니다.
WebView 제한사항
WebView에서는 Permissions API를 사용할 수 없습니다. 이로 인해 Mercado Libre는 Permissions API를 사용할 수 있는 곳 (WebView를 제외한 모든 곳)에서만 Storage Access API가 실행되는 로직을 구현해야 했습니다. 또한 requestStorageAccessFor()
는 현재 Safari 또는 Firefox에서 지원되지 않습니다.
Mercado Libre는 플랫폼과 관계없이 필요에 따라 기능 감지를 계속 사용합니다.
만능 솔루션
Mercado Libre는 fetch()
및 {keepalive: true, credentials: 'include'}
를 사용해야 했습니다. 이렇게 하면 CORS를 구성하고, 사용자 인증 정보를 포함하고, 브라우저에서 취소되지 않고 백그라운드에서 요청이 실행되도록 할 수 있습니다.
fetch(domain, {
keepalive: true,
credentials: 'include',
});
// or
fetch(domain, {
method: 'POST'
body: data,
keepalive: true,
credentials: 'include',
});
전체 예시:
const TP_DOMAINS = ['https://mercadolibre.com',
'https://www.mercadoshops.com.ar',
'https://www.mercadopago.com',
'https://www.mercadopago.com.ar'];
if ('requestStorageAccessFor' in document) {
// Check the permission to see if storage access is already available.
let storageAccessPermission = await navigator.permissions.query({
name: 'top-level-storage-access',
requestedOrigin: TP_DOMAINS[0]
})
// If the permission has already been granted, request storage access.
if (storageAccessPermission.state === 'granted') {
requestStorageAccessForDomains();
}
// If the state "prompt" is returned, a storage access request must be triggered by user gesture.
else if (storageAccessPermission.state === 'prompt') {
document.addEventListener('click', requestStorageAccessForDomains, { capture: true });
document.addEventListener('keydown', requestStorageAccessForDomains, { capture: true });
}
} else {
console.log('requestStorageAccessFor is not supported');
}
function requestStorageAccessForDomains() {
// Request storage access for each domain.
TP_DOMAINS.forEach(rSAFor)
// Clean up listeners so they are not called again.
document.removeEventListener('click', requestStorageAccessForDomains);
document.removeEventListener('keydown', requestStorageAccessForDomains);
}
function rSAFor(domain) {
document.requestStorageAccessFor(domain).then(
success => { setCookie(domain); },
err => { console.log('requestStorageAccessFor error: ' + err); }
);
}
function setCookie(domain) {
const url = new URL(domain);
const hostname = url.hostname.split('.').slice(1).join('.');
fetch(domain + '/pixel.gif?name=_d2id&value=DONE&max_age=94608000&domain=.' + hostname, {
keepalive: true,
credentials: 'include',
});
}
Chrome에서 테스트
Chrome 플래그를 설정하여 관련 웹사이트 세트를 로컬에서 테스트할 수 있습니다. 예를 들어 related-website-sets.glitch.me의 데모는 다음과 같습니다.
--use-related-website-set="{\"primary\": \"https://related-website-sets.glitch.me\", \"associatedSites\": [\"https://rws-member-1.glitch.me\"]}"
https://related-website-sets.glitch.me/
RWS 구현 종료
대규모 사이트의 RWS 구현은 간단하지 않습니다. Mercado Libre는 한 명의 개발자만의 리소스만 필요했지만 18개 국가에 출시하는 데 처음부터 끝까지 약 3개월이 걸렸습니다.
RWS를 구현하려는 사용자를 위한 권장사항: 조기에 시작하세요. RWS를 구현하지 말고 기다리세요. Mercado Libre는 서버와 클라이언트 측에서 쿠키를 변경하고, 새 헤더를 추가하고, 백엔드를 변경하고, JavaScript를 업데이트해야 했습니다.
최종 의견 및 다음 단계
Mercado Libre는 개인 정보 보호 샌드박스 API를 성공적으로 구현하여 변화하는 개인 정보 보호 환경에 적응하기 위한 노력을 보여주었습니다. Mercado Libre는 서드 파티 쿠키 사용을 사전에 테스트하고 해결하여 분석 및 사기 방지와 같은 중요한 비즈니스 기능을 유지하는 동시에 사용자 개인 정보를 개선하고 변화하는 규정을 준수했습니다. 이 사례 연구는 서드 파티 쿠키 사용 가능 여부가 보장되지 않는 미래로의 전환을 모색하는 조직에 유용한 통계를 제공합니다.