구독해서 새 게시물에 대한 알림을 받으세요.

Workers를 이용해 서드파티 도구의 보안과 속도를 보장하는 Zaraz

2021-12-08

12분 읽기
이 게시물은 English, 日本語, Indonesia, ไทย简体中文로도 이용할 수 있습니다.

우리는 2020년 3월 말경에 Zaraz를 만들기로 결정했습니다. 우리는 다른 제품을 개발 중이던 중 모든 사람들이 웹사이트에 많은 타사가 있을 때 성능에 미치는 영향에 대해 묻는다는 사실을 알게 되었습니다. 타사 콘텐츠는 오늘날 대부분의 웹사이트에서 중요한 부분을 차지하며 분석, 챗봇, 전환 픽셀, 위젯 등을 지원합니다. 타사 정의는 사이트 소유자의 직접적인 통제 하에 있지 않지만 '승인'이 있는 기본 사이트-사용자 관계 외부에서 호스팅되는 자산(종종 JavaScript)입니다. Yair는 이러한 타사 툴의 영향을 측정하는 과정과 우리가 어떻게 스타트업을 중심으로 전환했는지에 대해 자세히 썼지만 저는 Zaraz를 구축한 방법과 배후에서 실제로 수행하는 작업에 대해 쓰고 싶었습니다.

Zaraz use Workers to make third-party tools secure and fast

타사에서는 이미 만들어진 솔루션을 웹사이트에 통합할 수 있으며 코딩 작업을 거의 수행할 필요가 없습니다. 분석이요? 그냥 코드 조각을 내려놔요. 채팅 위젯? 이거 하나만 더하면 되요. 일반적으로 타사 공급업체는 툴 추가 방법을 안내하며, 그 이후에는 모든 것이 제대로 작동해야 합니다. 그렇죠? 하지만 타사 코드를 추가하면 원격 소스로부터 훨씬 더 많은 코드를 가져오기 때문에 방문자의 브라우저에서 일어나는 일들에 제어가 점점 더 어려워집니다. 귀하의 웹사이트에 있는 많은 타사가 해킹을 당하지 않았고, 귀하의 방문자의 컴퓨터에서 정보를 훔치거나, 암호화폐를 채굴하거나, 키 프레스를 기록하기 시작했다고 어떻게 보장할 수 있습니까?

그것은 고의적인 해킹일 필요도 없습니다. 타사 툴을 점점 더 조사하면서 패턴을 발견했습니다. 즉, 종종 타사 벤더가 모든 것을 선별하거나 주의하지 않고 수집하는 것이 더 쉽습니다. 대개 사용자 이메일은 타사 도구에 접근할 수 있으며 GDPR, CCPA 등으로 인해 웹사이트 소유자에게 문제를 일으킬 수 있습니다.

현재 타사 툴 작동 방식

일반적으로 페이지에 타사를 추가할 때 귀하 HTML의 에 JavaScript 코드를 추가하라는 메시지가 표시됩니다. Google Analytics가 가장 인기 있는 타사이므로, 이 코드를 어떻게 처리하는지 살펴보겠습니다.

이 경우와 대부분의 다른 경우에 귀하가 붙여넣는 스니펫은 실제로 실행할 JavaScript 코드를 더 많이 호출합니다. 위의 스니펫은 새로운 요소를 생성하고 여기에 https://www.google-analytics.com/analytics.js src 속성을 부여하고 DOM에 추가합니다. 그런 다음 브라우저는 스니펫 자체보다 더 많은 JavaScript 코드를 포함하는 analytics.js 스크립트를 로드하고 때로는 브라우저에 더 많은 스크립트를 다운로드하도록 요청하고 그중 일부는 analytics.js 자체보다 큽니다. 그러나 지금까지 분석 데이터가 전혀 캡처되지 않았지만 이것이 처음에 Google Analytics를 추가한 이유입니다.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

스니펫의 마지막 줄인 ga('send', 'pageview');는 analytics.js 파일에 정의된 함수를 사용하여 최종적으로 pageview를 보냅니다. 이 기능은 분석 데이터를 캡처하기 때문에 필요하고 이것은 브라우저의 종류, 화면 해상도, 언어 등을 가져옵니다. 그런 다음 모든 데이터가 포함된 URL을 구성하고 이 URL에 대한 요청을 보냅니다. 이 단계 후에야 분석 정보가 캡처됩니다. Google Analytics를 사용하여 기록하는 모든 사용자 행동 이벤트는 다른 요청으로 이어집니다.

대부분의 툴은 둘 이상의 리소스 파일로 구성되어 있으며, 웹사이트에서 테스트하지 않고는 어떤 툴을 로드할지 미리 알 수 없습니다. 귀하는 Request Map Generator를 사용하여 웹사이트에 로드된 모든 리소스의 시각적 표현(서로 호출하는 방법 포함)을 얻을 수 있습니다. 아래는 당사가 만든 데모 전자상거래 웹사이트의 요청 맵입니다.

그 큰 파란색 원은 우리 웹사이트의 리소스이고 다른 모든 원은 타사 툴입니다. 큰 녹색 원이 실제로 메인 페이스북 픽셀(fbents.js)의 하위 요청임을 알 수 있고, 그리고 브라우저가 더 많은 네트워크 요청을 수행하도록 비용을 들여 일부 데이터를 동기화하기 위해 얼마나 많은 툴(오른쪽 위의 LinkedIn)이 리디렉션 체인을 만들고 있는지 알 수 있습니다.

a chart showing all the resources fetched when downloading an example website. The map shows how one resource can end up in a chain of other external resources, that are often coming from untrusted servers and responding with very large payloads.

태그 관리자를 실행할 새 위치 - 엣지

우리는 타사를 더 빠르고, 더 안전하고, 사적으로 만들고 싶기 때문에, 우리는 그들에 대한 근본적인 새로운 사고방식과 그들이 어떻게 운영될지에 대한 새로운 시스템을 개발해야 했습니다. 우리는 다음과 같이 계획을 세웠습니다. 타사가 브라우저 외부에서 코드를 실행할 수 있는 동시에 필요한 정보에 계속 액세스하고 필요할 때 DOM과 대화할 수 있는 플랫폼을 구축하는 것입니다. 우리는 타사가 악하다고 생각하지 않습니다. 즉, 그들은 결코 모든 사람들을 위해 인터넷을 느리게 할 의도가 없었으며, 단지 다른 선택권이 없었을 뿐입니다. 엣지에서 코드를 실행하고 빠르게 실행할 수 있게 되면서 새로운 가능성이 열렸고 모든 것이 바뀌었지만 전환은 어렵습니다.

타사 코드를 이동하여 브라우저 외부에서 실행함으로써 우리는 여러 번 승리할 수 있습니다.

  • 웹사이트가 더 빨리 로딩되고 상호작용이 더 활발해질 것입니다. 웹사이트를 렌더링하는 브라우저는 이제 가장 중요한 것인 귀하의 웹사이트에 집중할 수 있습니다. 모든 타사 스크립트의 다운로드, 구문 분석 및 실행은 더 이상 웹사이트의 렌더링 및 상호 작용과 경쟁하거나 차단하지 않습니다.

  • 타사에게 전송되는 데이터에 대한 제어. 타사 도구는 종종 예를 들어 사이트 행동/사용을 측정하기 위해 페이지와 브라우저에서 정보를 자동으로 수집합니다. 많은 경우 이 정보는 비공개로 유지되어야 합니다. 예를 들어, 대부분의 도구는 document.location을 수집하지만 URL에 사용자 이메일이 포함된 "암호 재설정" 페이지가 자주 표시됩니다. 이는 이메일이 일반적으로 동의 없이 타사 제공업체에 의해 무의식적으로 전송 및 저장되고 있음을 의미합니다. 타사의 실행을 엣지로 이동한다는 것은 전송되는 내용에 대한 완전한 가시성을 확보한다는 의미입니다. 이는 도구가 개인 식별 정보를 수집하거나 데이터의 비공개 부분이 타사 서버에 도달하기 전에 마스킹하려는 경우 경고 및 필터를 제공할 수 있음을 의미합니다. 이 기능은 현재 공개 베타에서 사용할 수 없지만 오늘 사용을 시작하려면 당사에 문의하십시오.

  • 브라우저에서 실행되는 코드의 양을 줄이고 그 안에서 실행되는 모든 코드를 스캔함으로써 우리는 코드가 변조되지 않았는지, 의도한 대로만 작동하는지 지속적으로 확인할 수 있습니다. 우리는 이것을 자동으로 하기 위해 Zaraz와 Cloudflare Page Shield를 연결하는 작업을 하고 있습니다.

귀하가 일반 태그 관리자를 통해 타사 도구를 구성하면 방문자의 브라우저에서 통제할 수 없는 많은 일이 발생합니다. 태그 관리자는 모든 트리거 규칙을 로드한 다음 평가하여 로드할 도구를 결정합니다. 그런 다음 일반적으로 이러한 도구들의 스크립트 태그를 페이지의 DOM에 추가하여 브라우저가 스크립트를 가져오고 실행하도록 만듭니다. 이러한 스크립트는 신뢰할 수 없거나 알 수 없는 원본에서 발생하므로 브라우저에서 악성 코드가 실행될 위험이 증가합니다. 또한 이 스크립트는 완전히 실행될 때까지 브라우저가 대화형이 되지 않도록 차단할 수도 있습니다. 스크립트는 일반적으로 브라우저에서 원하는 모든 작업을 자유롭게 수행할 수 있지만, 가장 일반적으로는 일부 정보를 수집하여 타사 서버의 특정 엔드포인트로 전송합니다. Zaraz를 사용하면 브라우저는 기본적으로 이러한 작업을 수행하지 않습니다.

CloudFlare Workers 선택

우리는 Zaraz 코딩을 시작했을 때 인프라 결정이 서비스에 막대한 영향을 미칠 것이라는 점을 빠르게 이해했습니다. 사실, 잘못 고르는 것은 서비스가 전혀 없다는 것을 의미할 수 있습니다. Zaraz의 가장 일반적인 대안은 기존 태그 관리 소프트웨어입니다. 일반적으로 서버 측 구성 요소가 없습니다. 즉, 사용자가 구성을 "게시"할 때마다 JavaScript 파일이 렌더링되고 CDN에서 정적 자산으로 호스팅됩니다. Zaraz의 아이디어는 대부분의 코드 평가를 브라우저 밖으로 옮기고 매번 동적으로 생성된 JavaScript 코드로 응답하는 것입니다. 우리는 서버측 구성 요소를 가질 수 있지만 CDN만큼 빠른 솔루션을 찾아야 했습니다. 그렇지 않으면, 웹사이트를 더 빨리 만드는 대신 속도를 늦추게 될 위험이 있습니다.

우리는 방문하는 사용자와 가까운 곳에서 Zaraz를 제공해야 했습니다. 전 세계에 서버를 설치하는 것이 아주 초보적인 스타트업에게는 너무 큰 일처럼 여겨졌기 때문에, 우리는 베포된 서버리스 플랫폼 몇 개를 살펴보았습니다. 우리는 작은 목록의 요구 으로 이 검색에 접근했습니다.

  • JavaScript 실행: 타사 도구는 모두 JavaScript를 사용합니다. 클라우드 환경에서 실행할 수 있도록 포팅한다면 가장 쉬운 방법은 JavaScript도 사용할 수 있게 하는 것입니다.

  • 보안: 우리는 민감한 데이터를 처리합니다. 누군가가 우리 EC2 인스턴스를 해킹할 위험을 감당할 수 없습니다. 우리는 HTTP 응답을 보낸 후 데이터가 일부 서버에 남아 있지 않도록 하고 싶었습니다.

  • 완전히 프로그래밍 가능: 일부 CDN을 통해 요청 처리를 위한 복잡한 규칙을 설정할 수 있지만 HTTP 헤더 변경, 리디렉션 또는 HTTP 응답 코드 설정만으로는 충분하지 않습니다. 즉석에서 JavaScript 코드를 생성해야 합니다. 즉, 응답을 완전히 제어해야 합니다. 또한 일부 외부 JavaScript 라이브러리를 사용해야 합니다.

  • 매우 빠르고 전 세계에 베포되어 있음: 회사의 초기 단계에서 우리에게는 이미 미국, 유럽, 인도, 이스라엘에 고객이 있었습니다. 그들에게 PoC(Proof of Concept)를 보여줄 준비를 하면서 어디에 있든 속도가 빠를 수 있도록 해야 했습니다. 응답 시간이 상당히 빠른 태그 관리자 및 고객 데이터 플랫폼과 경쟁하고 있었기 때문에 콘텐츠가 정적으로 CDN에 호스팅된 것처럼 신속하게 대응할 수 있어야 했습니다.

처음에는 전 세계를 돌며 자체 HTTP 서버를 사용할 Docker 용기를 만들어야겠다고 생각했지만, Y Combinator 배치의 한 친구가 우리는 Cloudflare Workers를 확인해야 한다고 말했습니다.

처음에 우리는 그것이 작동하지 않을 것이라고 생각했습니다. Workers는 Node.js 애플리케이션처럼 작동하지 않고 우리는 제한이 우리가 원하는 것을 구축하는 데 방해가 된다고 느꼈습니다. 우리는 사용자 브라우저에서 들어오는 요청을 Workers가 처리하도록 한 다음 AWS Lambda를 사용하여 데이터를 실제로 처리하여 타사 벤더로 전송하는 작업을 계획했습니다.

Workers를 사용한 첫 번째 시도는 매우 단순했습니다. 즉석에서 생성된 동적 브라우저측 JavaScript를 실제로 반환하는 데 사용할 수 있음을 확인만 하는 것이었습니다.

그것은 아주 작은 예였지만, 저는 나중에 Yair에게 전화를 걸어 "이것이 실제로 작용할 수 있습니다!"라고 말한 것을 기억합니다. 그것은 Workers의 유연성을 증명했어요. 우리는 방금 JavaScript 파일을 제공하는 엔드포인트를 만들었고, 이 JavaScript 파일은 동적으로 생성되었으며, 응답 시간은 10ms 미만입니다. 이제 HTML에 <script src="path/to/worker.j">를 넣고 이 Workers를 일반적인 JavaScript 파일처럼 처리할 수 있습니다.

addEventListener('fetch', (event) => {
 event.respondWith(handleRequest(event.request))
})
 
async function handleRequest(request) {
   let code = '(function() {'
  
   if (request.headers.get('user-agent').includes('Firefox')) {
     code += `console.log('Hello Firefox!');`
   } else {
     code += `console.log('Hey other browsers...');`
   }
  
   code += '})();'
  
   return new Response(code, {
     headers: { 'content-type': 'text/javascript' }
   });
}

더 깊이 들여다보면서 Workers가 우리 목록의 요구 사항에 계속해서 응답하는 것을 발견했고, Workers 내부에서 가장 복잡한 작업도 수행할 수 있다는 것을 배웠습니다. Lambda 함수는 점점 더 적은 일을 시작했고 결국 제거되었습니다. 우리의 작은 Node.js 개념 증명은 Workers로 쉽게 변환되었습니다.

Cloudflare Workers 플랫폼 사용: "거인의 어깨 위에 서기"

우리가 시드를 키울 때 "만약 이것이 효과가 있다면, 왜 이것은 전에 만들어지지 않았는가?"와 같은 많은 질문을 들었습니다. 우리는 종종 이 문제가 오랫동안 지속되어 왔지만, 접근 가능한 엣지 컴퓨팅이 새로운 가능성이라고 말했습니다. 나중에 견본을 만든 후 첫 번째 투자자를 업데이트했을 때, 우리는 믿을 수 없을 정도로 빠른 응답 시간에 대해 이야기했고 "거인의 어깨 위에 서는 것"에 대해 많은 찬사를 받았습니다. Workers는 간단히 우리의 모든 박스를 체크했습니다. JavaScript를 실행하고 브라우저와 동일한 V8 엔진을 사용한다는 것은 도구를 클라우드에서 실행하도록 포팅할 때 동일한 환경을 유지할 수 있다는 것을 의미했습니다(고용에도 도움이 되었음). 또한 나중에 특정 작업에 WebAssembly를 사용할 수 있는 가능성도 열어두었습니다. Workers가 기본적으로 서버가 없고 비상태 유지라는 사실은 당사 자체의 신뢰성에 대한 판매 포인트였습니다. 즉, 우리는 고객들에게 실수로라도 개인 데이터를 저장할 수 없다고 말했는데, 이는 사실이었습니다. webpack과 Wrangler의 통합은 우리가 로직의 100%를 Workers로 이동하기 위해 모듈 및 외부 종속성이 있는 완전한 애플리케이션을 작성할 수 있음을 의미했습니다. 그리고 성능은 우리가 모든 데모를 완성하는 데 도움이 되었습니다.

Zaraz를 구축하면서 Workers 플랫폼이 더욱 발전했습니다. 사용자 구성을 저장하는 데 Workers KV를 사용하고 Workers 간의 통신을 위해 Durable Object를 사용하게 되었습니다. 우리의 주요 Worker는 50개 이상의 대중적인 타사 도구의 서버 측 구현을 보유하여 전통적으로 브라우저 내에서 실행되는 수십만 개의 JavaScript 코드 행을 대체합니다. 이 목록은 계속 증가하고 있으며, 최근에는 타사 벤더가 자체적으로 툴에 대한 지원을 구축할 수 있는 SDK도 발표했습니다. 처음으로 그들은 안전하고 사적이면서 신속한 환경에서 이를 수행할 수 있습니다.

타사를 구축하는 새로운 방법

대부분의 타사 툴은 다음과 같은 두 가지 기본적인 기능을 수행합니다. 먼저, 그것들은 화면 해상도, 현재 URL, 페이지 제목 또는 쿠키 내용과 같은 정보를 브라우저에서 수집합니다. 두 번째, 그것들은 그것을 서버로 보냅니다. 이것은 종종 간단하지만, 웹사이트가 수십 개의 이러한 도구들을 가지고 있고, 각각의 도구들이 그들이 필요로 하는 정보를 질의하고 나서 그것의 요청들을 보내면, 그것은 실질적인 속도를 떨어뜨릴 수 있습니다. Zaraz에서는 이것이 매우 다르게 보입니다. 즉, 모든 툴은 실행 기능을 제공하며, Zaraz가 사용자 요청을 평가하여 툴 로드를 결정하면 이 실행 기능을 실행합니다. 우리는 이 방법을 통해 50개 이상의 다양한 툴에 대한 통합을 구축했으며, 타사 공급업체가 Zaraz에 자체 통합을 작성하도록 초대했습니다.

위의 코드는 브라우저 대신 Cloudflare Worker에서 실행됩니다. 이전에 툴이 10배 더 많다는 것은 브라우저에서 웹사이트를 렌더링하는 데 필요한 요청이 10배 더 많고 평가에 필요한 JavaScript 코드가 10배 더 많다는 것을 의미했습니다. 예를 들어, 이 코드는 종종 반복적인 데, 거의 모든 도구들은 그들 자신의 "쿠키 가져오기" 기능을 구현합니다. 또한 아무도 조작하지 않는다는 것을 신뢰해야 하는 출처가 10배 더 많습니다. 엣지에서 툴을 실행할 때 브라우저에는 전혀 영향을 미치지 않습니다. 즉, 원하는 만큼 툴을 추가할 수 있지만 브라우저에 로드되지 않으므로 영향을 미치지 않습니다.

run({system, utils}) { 
  // The `system` object includes information about the current page, browser, and more 
  const { device, page, cookies } = system
  // The `utils` are a set of functions we found useful across multiple tools
  const { getCookieString, waitUntil } = utils

  // Get the existing cookie content, or create a new UUID instead
  const cookieName = 'visitor-identifier'
  const sessionCookie = cookies[cookieName] || crypto.randomUUID()

  // Build the payload
  const payload = {
    session: sessionCookie,
    ip: device.ip,
    resolution: device.resolution,
    ua: device.userAgent,
    url: page.url.href,
    title: page.title,
  }

  // Construct the URL
  const baseURL = 'https://example.com/collect?'
  const params = new URLSearchParams(payload)
  const finalURL = baseURL + params

  // Send a request to the third-party server from the edge
  waitUntil(fetch(finalURL))
  
  // Save or update the cookie in the browser
  return getCookieString(cookieName, sessionCookie)
}

이 예에서는 먼저 우리는 "방문자 식별자"라고 하는 세션을 식별하는 쿠키의 존재를 확인합니다. 이것이 있으면 해당 값을 읽고, 그것이 없으면 그것에 새 UUID를 생성합니다. 여기서 Workers의 힘은 모두 액세스할 수 있습니다. 즉, 다른 Workers 기능을 사용할 수 있는 것처럼 crypto.randomUUID() 를 사용합니다. 그런 다음 사용자 에이전트, 현재 URL, 페이지 제목, 화면 해상도, 클라이언트 IP 주소 등 예제 툴에 필요한 모든 정보와 "방문자 식별자" 쿠키의 내용을 수집합니다. 우리는 Worker가 요청을 보낼 필요가 있는 최종 URL을 구성하고, 요청이 그곳에 도착하는지 확인하기 위해 waitMill을 사용합니다. Zaraz의 가져오기 버전은 당사의 툴에게 자동 로깅, 데이터 손실 방지 및 재시도 기능을 제공합니다.

마지막으로 getCookieString 기능의 값을 반환합니다. 실행 기능에 의해 반환된 모든 문자열은 브라우저 측 JavaScript로 방문자에게 전달됩니다. 이 경우 getCookieString은 document.cookie = 'visitor-identifier=5006e6fa-7ce6-45ef-8724-c846f1953369; Path=/; Max-age=31536000'; 같은 것을 반환하여 브라우저가 자사 쿠키를 생성하도록 합니다. 다음에 사용자가 페이지를 로드할 때 방문자 식별자 쿠키가 있어야 Zaraz가 UUID를 새로 만드는 대신 재사용하게 됩니다.

이 실행 기능 시스템을 사용하면 우리는 브라우저로부터 제공되는 모든 필수 컨텍스트와 데이터, Workers의 기능을 제공하면서도 각 툴을 분리하여 시스템의 나머지 부분과 독립적으로 실행할 수 있습니다. 우리는 안전한 사설 및 빠른 타사 툴의 미래를 구축하기 위해 타사 벤더를 초대하고 있습니다.

새로운 이벤트 시스템

많은 타사 툴은 사용자 방문 중에 행동 정보를 수집해야 합니다. 예를 들어, 사용자가 신용 카드 양식에서 "제출"을 클릭한 후 바로 대화 픽셀을 넣을 수 있습니다. 우리는 툴을 클라우드로 이동했기 때문에 더 이상 브라우저 컨텍스트에서 해당 라이브러리에 액세스할 수 없습니다. 이를 위해 우리는 zaraz.track()을 만들었습니다. 프로그래밍 방식으로 도구를 호출하고 선택적으로 추가 정보를 제공할 수 있는 방식니다.

이 예에서는 Zaraz가 "카드 제출"이라는 트리거에 대해 알 수 있도록 하며, 일부 데이터, 즉 요소에서 가져온 트랜잭션의 값, ID 합계를 사용하여 하드 코딩되고 백엔드에서 직접 인쇄되는 트랜잭션 코드를 연결합니다.

document.getElementById("credit-card-form").addEventListener("submit", () => {
  zaraz.track("card-submission", {
    value: document.getElementById("total").innerHTML,
    transaction: "X-98765",
  });
});

Zaraz 인터페이스에서는 구성된 툴을 서로 다른 트리거와 여러 트리거에 구독할 수 있습니다. 위의 코드가 트리거되면 Zaraz는 엣지에서 어떤 툴이 카드 제출 트리거에 가입되어 있는지 확인한 다음 제공된 올바른 추가 데이터로 툴을 호출하여 트랜잭션 코드와 값으로 요청을 채웁니다.

이것은 기존 태그 관리자가 작동하는 방식과 다릅니다. GTM의 dataLayer.push는 유사한 목적을 제공하지만 클라이언트 측에서 평가됩니다. 결과적으로 GTM 자체를 집중적으로 사용하면 스크립트가 너무 커져 웹사이트에서 로드하는 가장 무거운 툴이 될 수 있습니다. dataLayer.push를 사용하여 전송된 각 이벤트는 브라우저에서 코드를 반복적으로 평가하고 평가와 일치하는 각 툴은 브라우저에서 코드를 실행하고 더 많은 외부 자산을 다시 호출할 수 있습니다. 이러한 이벤트는 일반적으로 사용자 상호 작용과 결합되므로 툴 실행이 메인 스레드를 차지하기 때문에 웹사이트와의 상호 작용이 느려지는 경우가 많습니다. Zaraz를 사용하면 이러한 툴이 존재하며 엣지에서만 평가되므로 웹사이트의 속도와 보안이 향상됩니다.

트리거를 사용하기 위해 코더를 지정할 필요는 없습니다. Zaraz 대시보드를 사용하면 클릭 리스너, 스크롤 이벤트 등과 같은 사전 정의된 템플릿 세트에서 선택할 수 있으며 코드를 건드리지 않고도 웹사이트의 모든 요소에 첨부할 수 있습니다. zaraz.track()을 자신의 툴을 프로그래밍할 수 있는 기능과 결합하면 기본적으로 웹사이트에 Workers를 한 줄로 통합할 수 있습니다. 원하는 백엔드 코드를 작성할 수 있으며 Zaraz는 올바른 매개변수를 사용하여 정확한 시간에 이를 호출합니다.

Cloudflare에 가입

새로운 고객이 Zaraz를 사용하기 시작했을 때, 우리는 패턴을 발견했습니다. 당사와 협력한 최고의 팀들은 Cloudflare를 선택했고, 일부 팀들은 백엔드 인프라의 일부를 Workers로 옮기고 있었습니다. 우리는 Cloudflare를 사용하는 기업의 성능과 통합도 더욱 개선할 수 있을 것으로 판단했습니다. 페이지 내부에 있는 코드의 일부를 인라인으로 처리하고 네트워크 요청의 양을 더 줄일 수 있습니다. 또한 통합을 통해 Workers를 사용하여 Zaraz를 고객의 도메인으로 프록시할 수 있기 때문에 스크립트를 DNS로 확인하는 데 걸리는 시간을 줄일 수 있었습니다. Cloudflare와의 통합으로 당사의 제품은 더욱 매력적으로 되었습니다.

2020년 겨울, Y Combinator를 하면서 타사 웹사이트가 웹사이트 성능에 얼마나 많은 영향을 미칠 수 있는지 깨달았을 때, 타사 블롯의 양을 줄임으로써 더 빠르고, 개인적이며, 안전한 웹을 만드는 거대한 미션이 눈앞에 다가왔습니다. 이 임무는 오늘날까지 그대로 유지되었습니다. Cloudflare와의 대화가 깊어질수록, 우리는 같은 비전을 공유하는 사람들과 대화하고 있다는 사실에 흥분했습니다. 우리는 인터넷 상의 수백만 개의 웹사이트로 솔루션을 확장하여 더 빠르고 안전하게 만들고 탄소 배출량을 줄일 수 있는 기회를 갖게 되어 매우 기쁩니다.

무료 베타 버전을 탐색하려면 여기를 클릭하십시오. 엔터프라이즈이며 추가/고객 요구사항이 있는 경우 여기를 클릭하여 대기자 목록에 가입하십시오. Discords 채널에 가입하려면 여기를 클릭하십시오.

TwitterHacker NewsReddit

CIO 주간 Cloudflare Workers

Twitter에서 팔로우하기

Yo'av Moshe |@yoavmoshe

Cloudflare |Cloudflare

Cloudflare에서는 전체 기업 네트워크를 보호하고, 고객이 인터넷 규모의 애플리케이션을 효과적으로 구축하도록 지원하며, 웹 사이트와 인터넷 애플리케이션을 가속화하고, DDoS 공격을 막으며, 해커를 막고, Zero Trust로 향하는 고객의 여정을 지원합니다.

어떤 장치로든 1.1.1.1에 방문해 인터넷을 더 빠르고 안전하게 만들어 주는 Cloudflare의 무료 앱을 사용해 보세요.

더 나은 인터넷을 만들기 위한 Cloudflare의 사명을 자세히 알아보려면 여기에서 시작하세요. 새로운 커리어 경로를 찾고 있다면 채용 공고를 확인해 보세요.
CIO WeekCloudflare Workers개발자Developer Platform

X에서 팔로우하기

Yo'av Moshe|@yoavmoshe
Cloudflare|@cloudflare

관련 게시물

2024년 10월 31일 오후 1:00

Moving Baselime from AWS to Cloudflare: simpler architecture, improved performance, over 80% lower cloud costs

Post-acquisition, we migrated Baselime from AWS to the Cloudflare Developer Platform and in the process, we improved query times, simplified data ingestion, and now handle far more events, all while cutting costs. Here’s how we built a modern, high-performing observability platform on Cloudflare’s network. ...