mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Sean Oliver
d439ba57f4
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Hardening ahead of any decision to enable session replay, plus a dependency bump. Follow-up to #48515. ### What's inside - ~50 lines of logic: the callback, the `url()` pattern, and the theme and SVG-reference gates ([session-replay.ts](https://github.com/supabase/supabase/pull/48818/changes#diff-b7e4f10387ee7a116dd1673f70a55c0ba066687ff2d228bc2320eba75a349fac)) - ~170 lines of allowlist, one attribute name per line, skimmable ([same file](https://github.com/supabase/supabase/pull/48818/changes#diff-b7e4f10387ee7a116dd1673f70a55c0ba066687ff2d228bc2320eba75a349fac)) - ~150 lines of comments saying why each group is allowlisted, since a wrong entry is a privacy or a fidelity bug ([same file](https://github.com/supabase/supabase/pull/48818/changes#diff-b7e4f10387ee7a116dd1673f70a55c0ba066687ff2d228bc2320eba75a349fac)) - ~430 lines of tests, one case per policy decision ([session-replay.test.ts](https://github.com/supabase/supabase/pull/48818/changes#diff-f9feb872ad0136cf87c7e9fb2af72eb3f4019464c06f0b7dd050ffb85373ccb8)) - 1 line of dependency bump, plus its lockfile ([package.json](https://github.com/supabase/supabase/pull/48818/changes#diff-50d7c39a9430d37971aa76858165ab4f7921c4cc4340b28e9b673ce6982e63cf)) ## What is the current behavior? Session replay is disabled in every environment, and no recordings exist. This is about what a recording *would* contain if it were ever switched on. Attributes are the one channel replay masking cannot reach. `maskTextFn` only sees DOM text nodes, so a component interpolating customer data into a `placeholder`, `title` or `aria-label` would be captured verbatim. Before `posthog-js` 1.413.0 there was no hook for it at all, and the only mitigation was blocking the element, which drops it from the capture entirely. Two places in Studio where that would apply: - `CreateOrUpdateCustomProviderSheet.tsx:506-507` interpolates the project's API host into both `value` and `placeholder`. The `value` is masked. The `placeholder` is not. - `FileExplorerHeader.tsx:185` renders `Search in ${currentFolderName}...`, a customer storage folder name. The list is not complete. Any component echoing context into a tooltip reproduces it, and the author has no reason to be thinking about replay. Linear [GROWTH-1094](https://linear.app/supabase/issue/GROWTH-1094). Blocks [GROWTH-1073](https://linear.app/supabase/issue/GROWTH-1073). ## What is the new behavior? `maskAttributeFn` with a default-deny policy: an allowlist of the attributes replay needs to render, everything else masked. ### Policy edge cases - **rrweb's `rr_*` layout attributes have to be allowlisted explicitly.** posthog-js only applies its own exemption for those when `maskAllElementAttributes` does the masking. A callback does not get the exemption. - **HTML `id` is masked. SVG `id` passes.** `AreaChart.tsx:119` emits `<linearGradient id="colorUv">` and references it as `fill="url(#colorUv)"`, so masking it breaks the gradient. But Studio also binds customer-named values to `id` (`bucket.id` is a storage bucket name). Split on `element.namespaceURI`. - **SVG reference attributes pass only fragment-only targets.** recharts clips every series with `clip-path="url(#clipPath-<id>)"`, so `clip-path`, `mask`, `filter`, `marker-*`, `fill` and `stroke` have to survive. They accept external URLs too, so the policy checks the target rather than allowlisting the attribute name. - **The `url()` pattern consumes escaped delimiters and ignores case.** A target containing a quote serializes as `\"` and one containing a bracket as `\)`, so a naive `[^")]*` stops at the backslash and leaves the tail of the URL recorded. `URL(...)` is the same function as `url(...)`. A token the pattern cannot parse falls through to a masking fallback rather than passing. - **`url()` targets inside `style` are masked, keeping the declarations.** The feedback widget puts `toPng(document.body)`, a base64 PNG of the whole dashboard, into a `background-image`, and the storage preview panes put signed object URLs there. No other masking path covers those, because they are not text nodes, a canvas, a network request or an `img src`. The config also pins `maskAllElementAttributes: false`. Left unset it resolves from the PostHog UI, and `true` discards `maskAttributeFn` entirely. The `posthog-js` floor rises to `^1.416.1`, the first version carrying both attribute masking and the "coarse option wins" precedence. This does not enable recording anywhere. ## Additional context ### Verification Ran on the studio-staging preview against a live session: 817 seconds, 190 clicks, 82 keypresses. Staging has no server-side masking config, so everything masked came from this code. | Check | Result | |---|---| | Storage folder search placeholder | Asterisked. Pre-fix it read `Search in <folder>...` | | Custom auth provider sheet | Fully masked, including the callback URL field | | Canary folder name in event properties | 0 hits, with 51 events in the session as the control | | Console capture | `console_log_count: 0` despite the project having `capture_console_log_opt_in: true` | | Telemetry regression | None: `$pageview` x34, `$pageleave` x5, `$groupidentify` x4, `$identify` x1 | Recording was scoped to that one preview by an origin restriction plus a URL trigger. Both were reverted afterwards along with the project toggle. The policy has 175 unit tests. Separately, the config was bundled with esbuild and applied to a DOM reproducing Studio's serialized output (the AreaChart gradient, a recharts `clip-path`, a lucide icon, an inline `background-image`), and the chart, gradient fill and icon come out pixel-identical. ### Known fidelity costs - `img src` is masked, so images don't render in replay. Storage object URLs are signed customer content. - `ProviderIcon` renders its mark as `maskImage: url(<src>)` and `normalizeIconPath` accepts absolute URLs, so provider icons don't render either. ### Out of scope rrweb records `<style>` element text without calling either masking function, because its text-node serializer skips masking when the parent is `STYLE`. This PR does not reach that channel. Fixed separately in #50270 / [GROWTH-1229](https://linear.app/supabase/issue/GROWTH-1229). `captureJsonLd` also defaults on as of PostHog's 2026-08-30 defaults, which is a capture channel masking doesn't reach. Studio renders no `ld+json`, so it's inert there, and pinning it off was left out to keep this PR to its scope. ### The allowlist is the weak part The policy is default-deny over attribute *names*, so its surface is every attribute any shipped library emits, and that set grows with each dependency. A miss is also invisible to these tests, which assert what the function returns rather than whether some selector elsewhere still matches. Both failure directions are reachable that way: an attribute carrying customer data, and an attribute a stylesheet needs. [GROWTH-1232](https://linear.app/supabase/issue/GROWTH-1232) tracks the mechanism change: scope by namespace instead of by name, since 50 of the 159 entries exist only to serve SVG rendering, plus a conformance test that derives the expected set from the codebase so a new dependency fails CI rather than degrading a replay. Deliberately not done here, since rewriting the mechanism of a privacy control buys maintainability rather than correctness.
52 lines
1.3 KiB
JSON
52 lines
1.3 KiB
JSON
{
|
|
"name": "common",
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"main": "./index.tsx",
|
|
"types": "./index.tsx",
|
|
"license": "MIT",
|
|
"scripts": {
|
|
"preinstall": "npx only-allow pnpm",
|
|
"clean": "rimraf .turbo tsconfig.tsbuildinfo",
|
|
"gen:types": "supabase gen types typescript --local >| ./database-types.ts",
|
|
"typecheck": "tsc --noEmit"
|
|
},
|
|
"dependencies": {
|
|
"@types/dat.gui": "^0.7.12",
|
|
"@usercentrics/cmp-browser-sdk": "^4.42.0",
|
|
"api-types": "workspace:*",
|
|
"config": "workspace:*",
|
|
"configcat-js": "^9.5.1",
|
|
"dat.gui": "^0.7.9",
|
|
"flags": "^4.0.0",
|
|
"lodash": "catalog:",
|
|
"next-themes": "catalog:",
|
|
"posthog-js": "^1.416.1",
|
|
"react-use": "^17.4.0",
|
|
"valtio": "catalog:"
|
|
},
|
|
"devDependencies": {
|
|
"@types/lodash": "4.17.5",
|
|
"@types/node": "catalog:",
|
|
"@types/react": "catalog:",
|
|
"@types/react-dom": "catalog:",
|
|
"@typescript/native": "catalog:",
|
|
"@vitest/coverage-v8": "catalog:",
|
|
"@vitest/ui": "catalog:",
|
|
"lucide-react": "*",
|
|
"tsconfig": "workspace:*",
|
|
"type-fest": "5.6.0",
|
|
"typescript": "catalog:",
|
|
"vite": "catalog:",
|
|
"vitest": "catalog:"
|
|
},
|
|
"peerDependencies": {
|
|
"@supabase/auth-js": "catalog:",
|
|
"@supabase/supabase-js": "catalog:",
|
|
"lucide-react": "*",
|
|
"next": "catalog:",
|
|
"react": "catalog:",
|
|
"react-dom": "catalog:"
|
|
}
|
|
}
|