Credential reaches the client browser

Detects direct credential flows into responses, loaders, globals, DOM, and external requests.

Detail	Value
Check ID	`CREDENTIAL_BROWSER_LEAKAGE`
Severity	High
How it runs	Deterministic scan and agent review

Anchor to Vulnerable exampleVulnerable example

import type { LoaderFunctionArgs } from "react-router";

import { authenticate } from "../shopify.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {

const { session } = await authenticate.admin(request);

// A loader return value is serialized into the HTML document, so

// this hands the offline token to anything that can read the

// page.

return { shop: session.shop, accessToken: session.accessToken };

};

Keep credentials server-side and return only non-sensitive derived data.

import type { LoaderFunctionArgs } from "react-router";

import { authenticate } from "../shopify.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {

const { admin, session } = await authenticate.admin(request);

// Do the privileged call on the server and return only what the

// UI renders. The same rule covers globals, DOM writes, and

// outbound requests to third parties.

const response = await admin.graphql(`{ shop { name } }`);

const { data } = await response.json();

return { shop: session.shop, name: data.shop.name };

};

Was this page helpful?