# Integrate Google Cloud CDN with Fraud Prevention JavaScript SDK [Google Cloud CDN](https://cloud.google.com/cdn/docs/overview) 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. Mosaic provides a native integration with GCP **Service Extensions** that enables you to inject the **Device Risk & Security (Fraud Prevention) JavaScript SDK** into HTML responses automatically, without modifying your web application code. This plugin intercepts HTML responses at the CDN level and injects the required ` ``` Note 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. Note Use the [Google Cloud CLI](https://cloud.google.com/sdk/gcloud/reference) to check logs and monitor the status of your Service Extension and CDN. ## Step 4: Configure the GCP CDN div div GCP **Attach the plugin to your CDN** so it can intercept traffic. This is done by creating a **Service Extension** that links the plugin to the forwarding rule of your HTTPS CDN. 1. Identify the forwarding rule used by your CDN: ```bash # Set your CDN name (replace with your CDN name) LOAD_BALANCER_NAME="your-load-balancer-name" # Get the target HTTPS proxy for your CDN TARGET_PROXY_NAME=$(gcloud compute target-https-proxies list --filter="urlMap:${LOAD_BALANCER_NAME}" --format="value(name)") # Find forwarding rules that use this target proxy # (replace FORWARDING_RULE_NAME with your CDN's forwarding rule name) gcloud compute forwarding-rules list --global --filter="target:${TARGET_PROXY_NAME}" --format="value(name)" ``` 1. Create a Service Extension configuration file that attaches the previously deployed plugin (`drs-html-injection-plugin`) to your forwarding rule: ```yaml # Set variables for your GCP resources PROJECT_ID="YOUR_PROJECT_ID" # replace with your GCP project ID FORWARDING_RULE_NAME="YOUR_FORWARDING_RULE_NAME" # replace with your CDN's forwarding rule name # Create service extension configuration cat > drs-service-extension.yaml << EOF name: projects/${PROJECT_ID}/locations/global/lbTrafficExtensions/drs-injection-service description: "DRS HTML Injection Service Extension" loadBalancingScheme: EXTERNAL_MANAGED forwardingRules: - https://www.googleapis.com/compute/v1/projects/${PROJECT_ID}/global/forwardingRules/${FORWARDING_RULE_NAME} extensionChains: - name: drs-injection-chain matchCondition: celExpression: "true" extensions: - name: drs-html-injection-plugin service: projects/${PROJECT_ID}/locations/global/wasmPlugins/drs-html-injection-plugin supportedEvents: - RESPONSE_BODY - RESPONSE_HEADERS failOpen: true EOF ``` 1. Apply the Service Extension so it becomes active on the CDN: ```bash gcloud service-extensions import drs-service-extension.yaml ``` ## Step 5: Set user div div Client A user identifier must be reported to Mosaic **after the user is fully authenticated** (including any required 2FA). This sets the user for all subsequent events in the current browser session. The Web SDK is automatically injected and initialized by the CDN plugin after Steps 3–4. You only need to call `setAuthenticatedUser` once `window.tsPlatform` is available. Implement this in your **web application code**. The `[USER_ID]` is an opaque identifier for the user in your system. ```js await window.tsPlatform.drs.setAuthenticatedUser('[USER_ID]'); ``` Note Do not include personal user identifiers (e.g., email) in plain text. ## Step 6: Trigger actions div div Client To obtain risk recommendations for sensitive actions, your application should **report these actions from the web app** using the [Platform SDK](/sdk-ref/platform/introduction). Add an event listener to the relevant form or button in your page and include the following code **in your web application** (after SDK initialization). Replace `[ACTION_TYPE]` with an action from the [list of actions](/guides/risk/recommendations#action-types). Optionally pass a correlation ID and a claimed user ID (for unauthenticated users). ```js // Trigger events for the action and get the actionToken // (Optional) correlationId and claimedUserId help improve Fraud Prevention const tsAccountProtectionLoginHandler = ` `; ``` Note (Backend handoff) Make sure to pass the received `actionToken` to your **backend** together with the actual action invocation so that your server can fetch the recommendation in the next step. ## Step 7: Fetch recommendation div div Backend From your **server**, fetch recommendations for the reported action using the [Recommendation API](/openapi/risk/recommendations.openapi/other/getriskrecommendation). These APIs are authorized using an OAuth access token. Obtain a token with **client credentials** (from Step 1). ```js const { access_token } = await fetch( `https://api.transmitsecurity.io/oidc/token`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } body: new URLSearchParams({ grant_type: client_credentials, client_id: [CLIENT_ID], client_secret: [CLIENT_SECRET] }) } ); ``` From your backend, invoke the Recommendation API. The `[ACCESS_TOKEN]` is the token you obtained above and `[ACTION_TOKEN]` is the `actionToken` received from the SDK in Step 6. ```js const query = new URLSearchParams({ action_token: '[ACTION_TOKEN]', }).toString(); const resp = await fetch( `https://api.transmitsecurity.io/risk/v1/recommendation?${query}`, { method: 'GET', headers: { Authorization: 'Bearer [ACCESS_TOKEN]', }, } ); ``` Note (Backend step) This is a **server-side (machine-to-machine)** call and is not handled by the CDN plugin or the Web SDK. ## Step 8: Clear user div div Client 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 **web application** (e.g., on logout). ```js const tsClearUserHandler = ` `; ```