qo
Qovery
GitHub
console
Workspace
GitHub
CI Pipeline Executions
Current execution
Succeeded
staging
Runs and Agents
Timeline
Beta
Configuration
Self-Healing CI
Project Graph
Circular Dependencies
Enterprise
Resource Usage
Analysis
Conformance
Enterprise
Runs
Current run
Succeeded
Tasks
Resource Usage
Insights
Compare tasks
Analytics
Sign in
Toggle sidebar
fix(gtm): load GTM and Snitcher without inline scripts (#3003) * fix(gtm): load GTM and Snitcher without inline scripts Cloudflare is adding a `script-src` directive to the Content-Security-Policy of console*.qovery.com. The console injected inline JavaScript at runtime, which only runs under a CSP that allows `'unsafe-inline'`. That keyword lets any injected inline script run, which removes most of the XSS protection `script-src` is meant to add. This PR removes the inline scripts the console is responsible for, so `'unsafe-inline'` can be dropped from the policy. Where the inline scripts came from: - `@elgorditosalsero/react-gtm-hook` (`GTMProvider`) injected two inline `<script>` elements through `innerHTML`: the `dataLayer` bootstrap and the GTM loader snippet. - Snitcher was loaded by a GTM Custom HTML tag, which GTM injects as an inline script. Changes: - Remove the `@elgorditosalsero/react-gtm-hook` dependency. - Add `loadGoogleTagManager(id)` and `pushToDataLayer(data)` to `@qovery/shared/util-js`. They do the same bootstrap as the official GTM snippet (`gtm.start` event, async `gtm.js?id=` script), but the script tag is created from the bundle as an external script. - Add `loadSnitcher(profileId)` to `@qovery/shared/util-js`. It injects `https://snid.snitcher.com/<id>.js`. The current Snitcher loader starts on its own (`window.Snitcher`), so the old inline `snid` queue and the `snid('verify')` call are not needed. - `main.tsx`: load GTM and Snitcher at startup when `NX_PUBLIC_GTM` is set, instead of wrapping the app in `GTMProvider`. - `OnboardingProject`: send `onboarding-organization-created` with `pushToDataLayer` instead of `useGTMDispatch`. Behavior changes: - GTM is not loaded when `NX_PUBLIC_GTM` is empty. The hook used to request `gtm.js?id=undefined`. - GTM starts before the first React render instead of in an effect. - The GTM `<noscript>` iframe is gone. It never applies, since the console requires JavaScript. Related changes outside this repo: - GTM container GTM-PJ39JGR: - Delete the Twitter and Reddit Custom HTML tags. They duplicate the built-in Twitter tag and the Reddit Pixel template. - Delete the Common Room, Reb2b and Clearbit Custom HTML tags. Their vendor endpoints return 404 or 403, so the tags already do nothing. - Exclude console*.qovery.com from the Snitcher Custom HTML tag, since the console now loads Snitcher itself. Until then, Snitcher's loader ignores the second initialization. - Cloudflare rule "CSP for console*.qovery.com" (qovery-infra-as-code) adds `script-src`, `worker-src 'self' blob:` and `object-src 'none'`. It keeps `'unsafe-inline'` until this PR is deployed. Removing it before the deploy would block the old inline GTM loader and stop all tracking. - [x] `yarn nx test shared-util-js` (134 tests) and `yarn nx test domains-onboarding-feature` (39 tests) pass. New specs cover both loaders and the onboarding dataLayer event. - [x] `yarn prettier --check` on the changed files - [x] `yarn nx lint` for console, shared-util-js and domains-onboarding-feature - [x] Production build: no inline `<script>` in `index.html`, no GTM snippet left in the bundle, and both external loaders are present * refactor(gtm): scope tracking utilities to console --------- Co-authored-by: RemiBonnet <rbonnet@qovery.com>
nx-cloud record -- yarn nx format:check
⌘K
Succeeded
nx-cloud record -- yarn nx format:check
Click to copy
Linux
4 CPU cores
d19adc8c
3004
GitHub
console
Workspace