{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"redocly_category":"Guides","product":"Fraud Prevention","type":"markdown"},"seo":{"title":"Integrate using Google Cloud CDN","description":"Everything about Mosaic Journeys, SDKs, and APIs","siteUrl":"https://developer.transmitsecurity.com/","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"integrate-using-google-cloud-cdn","__idx":0},"children":["Integrate using Google Cloud CDN"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://cloud.google.com/cdn/docs/overview"},"children":["Google Cloud CDN"]}," is a fully managed service that distributes HTTP(S) traffic across backend services and can inspect and modify traffic at the edge. This allows it to act not only as a global entry point for applications but also as a point of control for injecting or filtering content in transit."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mosaic provides a native integration with GCP ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Service Extensions"]}," that enables you to inject the Fraud Prevention into HTML responses automatically, without modifying your web application code."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This plugin intercepts HTML responses at the CDN level and injects the required ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The values YOUR_CLIENT_ID and YOUR_SERVER_PATH are automatically taken from the plugin configuration."," ","You do not need to replace them manually in your application code."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://cloud.google.com/sdk/gcloud/reference"},"children":["Google Cloud CLI"]}," to check logs and monitor the status of your Service Extension and CDN."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-4-configure-the-gcp-cdn","__idx":7},"children":["Step 4: Configure the GCP CDN"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["GCP"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Attach the plugin to your CDN"]}," so it can intercept traffic. This is done by creating a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Service Extension"]}," that links the plugin to the forwarding rule of your HTTPS CDN."]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Identify the forwarding rule used by your CDN:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# Set your CDN name (replace with your CDN name)\nLOAD_BALANCER_NAME=\"your-load-balancer-name\"\n\n# Get the target HTTPS proxy for your CDN\nTARGET_PROXY_NAME=$(gcloud compute target-https-proxies list --filter=\"urlMap:${LOAD_BALANCER_NAME}\" --format=\"value(name)\")\n\n# Find forwarding rules that use this target proxy\n# (replace FORWARDING_RULE_NAME with your CDN's forwarding rule name)\ngcloud compute forwarding-rules list --global --filter=\"target:${TARGET_PROXY_NAME}\" --format=\"value(name)\"\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create a Service Extension configuration file that attaches the previously deployed plugin (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["drs-html-injection-plugin"]},") to your forwarding rule:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","header":{"controls":{"copy":{}}},"source":"# Set variables for your GCP resources\nPROJECT_ID=\"YOUR_PROJECT_ID\" # replace with your GCP project ID\nFORWARDING_RULE_NAME=\"YOUR_FORWARDING_RULE_NAME\" # replace with your CDN's forwarding rule name\n\n# Create service extension configuration\ncat > drs-service-extension.yaml << EOF\nname: projects/${PROJECT_ID}/locations/global/lbTrafficExtensions/drs-injection-service\ndescription: \"DRS HTML Injection Service Extension\"\nloadBalancingScheme: EXTERNAL_MANAGED\nforwardingRules:\n- https://www.googleapis.com/compute/v1/projects/${PROJECT_ID}/global/forwardingRules/${FORWARDING_RULE_NAME}\nextensionChains:\n- name: drs-injection-chain\n matchCondition:\n celExpression: \"true\"\n extensions:\n - name: drs-html-injection-plugin\n service: projects/${PROJECT_ID}/locations/global/wasmPlugins/drs-html-injection-plugin\n supportedEvents:\n - RESPONSE_BODY\n - RESPONSE_HEADERS\n failOpen: true\nEOF\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":3},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Apply the Service Extension so it becomes active on the CDN:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"gcloud service-extensions import drs-service-extension.yaml\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-5-trigger-actions","__idx":8},"children":["Step 5: Trigger actions"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["Client"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To obtain risk recommendations for sensitive actions, your application should ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["report these actions from the web app"]}," using the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/sdk-ref/platform/introduction"},"children":["Platform SDK"]},". Add an event listener to the relevant form or button in your page and include the following code ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["in your web application"]}," (after SDK initialization). Replace ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[ACTION_TYPE]"]}," with an action from the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/risk/recommendations#action-types"},"children":["list of actions"]},". Optionally pass a correlation ID and a claimed user ID (for unauthenticated users)."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"// Trigger events for the action and get the actionToken\n// (Optional) correlationId and claimedUserId help improve Fraud Prevention\nconst tsAccountProtectionLoginHandler = `\n\n`;\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note (Backend handoff)"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Make sure to pass the received ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["actionToken"]}," to your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["backend"]}," together with the actual action invocation so that your server can fetch the recommendation in the next step."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-6-fetch-recommendation","__idx":9},"children":["Step 6: Fetch recommendation"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["Backend"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["From your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["server"]},", fetch recommendations for the reported action using the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/openapi/risk/recommendations.openapi/other/getriskrecommendation"},"children":["Recommendation API"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["These APIs are authorized using an OAuth access token. Obtain a token with ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["client credentials"]}," (from Step 1)."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":" const resp = await fetch(\n `https://api.transmitsecurity.io/oidc/token`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded'\n },\n body: new URLSearchParams({\n grant_type: 'client_credentials',\n client_id: '[CLIENT_ID]',\n client_secret: '[CLIENT_SECRET]'\n })\n }\n );\n const { access_token } = await resp.json();\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["From your backend, invoke the Recommendation API. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[ACCESS_TOKEN]"]}," is the token you obtained above and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[ACTION_TOKEN]"]}," is the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["actionToken"]}," received from the SDK in Step 5."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const query = new URLSearchParams({\n action_token: '[ACTION_TOKEN]',\n}).toString();\n\nconst resp = await fetch(\n `https://api.transmitsecurity.io/risk/v1/recommendation?${query}`,\n {\n method: 'GET',\n headers: {\n Authorization: 'Bearer [ACCESS_TOKEN]',\n },\n }\n);\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note (Backend step)"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["server-side (machine-to-machine)"]}," call and is not handled by the CDN plugin or the Web SDK."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-7-set-user-after-a-successful-login","__idx":10},"children":["Step 7: Set user after a successful login"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["Client"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A user identifier should be reported to Mosaic only after the user is fully authenticated, including any required 2FA. This sets the user for subsequent events in the current browser session."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Web SDK is automatically injected and initialized by the CDN plugin after Steps 3-4. For successful ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["login"]}," and custom login actions, if the code that completes the login still has the original ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["actionToken"]}," from ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#step-5-trigger-actions"},"children":["Step 5"]},", prefer ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/sdk-ref/platform/modules/drs#reportactionresult"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reportActionResult()"]}]},". This records the outcome on that login action and sets the user for the current browser session. We recommend passing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[USER_ID]"]}," as an opaque identifier from your system, not a plain-text personal identifier such as an email address."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"await window.tsPlatform.drs.reportActionResult('[ACTION_TOKEN]', 'success', {\n userId: '[USER_ID]'\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Fallback option"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If your application architecture does not preserve the original ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["actionToken"]}," through login completion, for example after a redirect, in a different page or component, in a server-side callback, or in an external identity flow, use ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/sdk-ref/platform/modules/drs#setauthenticateduser"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setAuthenticatedUser()"]}]}," as a fallback in your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["web application code"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"await window.tsPlatform.drs.setAuthenticatedUser('[USER_ID]');\n","lang":"js"},"children":[]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Do not include personal user identifiers (e.g., email) in plain text."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-8-clear-user","__idx":11},"children":["Step 8: Clear user"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge-wrapper"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"badge"},"children":["Client"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the user logs out or the session expires, clear the user so future actions aren’t associated with the previous user. Implement this in your ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["web application"]}," (e.g., on logout)."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const tsClearUserHandler = `\n\n`;\n","lang":"js"},"children":[]}]},"headings":[{"value":"Integrate using Google Cloud CDN","id":"integrate-using-google-cloud-cdn","depth":1},{"value":"How it works","id":"how-it-works","depth":2},{"value":"Before you start","id":"before-you-start","depth":2},{"value":"Step 1: Get client credentials","id":"step-1-get-client-credentials","depth":2},{"value":"Step 2: Set up your Google Cloud environment","id":"step-2-set-up-your--google-cloud-environment","depth":2},{"value":"Step 3: Deploy the HTML Injection WASM plugin","id":"step-3-deploy-the-html-injection-wasm-plugin","depth":2},{"value":"Example of injected code","id":"example-of-injected-code","depth":3},{"value":"Step 4: Configure the GCP CDN","id":"step-4-configure-the-gcp-cdn","depth":2},{"value":"Step 5: Trigger actions","id":"step-5-trigger-actions","depth":2},{"value":"Step 6: Fetch recommendation","id":"step-6-fetch-recommendation","depth":2},{"value":"Step 7: Set user after a successful login","id":"step-7-set-user-after-a-successful-login","depth":2},{"value":"Step 8: Clear user","id":"step-8-clear-user","depth":2}],"frontmatter":{"markdown":{"toc":{"depth":2}},"redirects":{"/guides/risk/integrate_google_cdn/":{}},"seo":{"title":"Integrate using Google Cloud CDN"}},"lastModified":"2026-07-19T07:39:52.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/risk/quick_start_google_cdn","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}