feat: enforce browser security boundaries

.gitignore

@@ -9,4 +9,5 @@ artifacts/**/*.json
 artifacts/**/*.xml
 artifacts/**/*.txt
 artifacts/**/*.sarif
+artifacts/tests/e2e/
 !artifacts/**/.gitkeep

artifacts/tests/a11y-manual/APP_HOME.md

@@ -0,0 +1,15 @@
+# APP_HOME accessibility review
+
+Status: pending-manual-review
+
+Reviewer:
+
+Keyboard: automated tab-order fixture passed; human review pending.
+
+Focus: automated visible-focus fixture passed; route-change review pending.
+
+Screen reader: pending.
+
+Reduced motion: automated media-query fixture passed; human review pending.
+
+Color signal: pending.

config/hosting/security-headers.json

@@ -0,0 +1,11 @@
+{
+  "schemaVersion": 1,
+  "headers": {
+    "Content-Security-Policy": "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; form-action 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self' https:; font-src 'self'; upgrade-insecure-requests",
+    "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
+    "X-Frame-Options": "DENY",
+    "Referrer-Policy": "strict-origin-when-cross-origin",
+    "X-Content-Type-Options": "nosniff",
+    "Permissions-Policy": "camera=(), microphone=(), geolocation=()"
+  }
+}

docs/accessibility/manual-checklist.md

@@ -0,0 +1,17 @@
+# Manual accessibility review checklist
+
+Automated axe checks do not establish WCAG conformance. A human reviewer must
+copy this checklist to `artifacts/tests/a11y-manual/<route-id>.md`, execute it
+on the release candidate, and sign it.
+
+- Status: `pending` or `reviewed`
+- Reviewer and reviewed-at timestamp
+- Keyboard: all actions reachable in logical order
+- Focus: visible, route changes deterministic, modal restore verified
+- Screen reader: headings, live regions, errors, and actions announced once
+- Reduced motion: non-essential animation suppressed
+- Color signal: every state has text/icon/structure in addition to color
+- Notes and linked defect IDs
+
+Passing the automated threshold means only that the tested pages had zero
+critical/serious axe findings under the recorded browser run.

docs/security/browser-boundary.md

@@ -0,0 +1,13 @@
+# Browser security boundary
+
+The browser bundle is public. Secrets, token lifecycle, raw HTML injection,
+dynamic code execution, untrusted script URLs, and public production source
+maps are prohibited defaults.
+
+`config/hosting/security-headers.json` is the declared header set. Hosting
+verification compares that declaration with live responses. CSP deliberately
+omits `unsafe-inline` and `unsafe-eval`; production code and built assets must
+remain compatible with that baseline.
+
+Route guards are UX hints and client validation does not replace backend
+authorization or validation.

docs/security/supply-chain.md

@@ -0,0 +1,18 @@
+# Build and supply-chain gate
+
+Merge and release controls:
+
+- frozen `pnpm-lock.yaml` installation; drift is blocking
+- clean production build with hashed assets and build manifest
+- machine-readable bundle sizes and checksums
+- source plus built-asset credential-pattern scan
+- direct dependency inventory and lockfile digest
+- base/head dependency diff review record
+
+Organization-specific vulnerability severity, denied-license list, SBOM format,
+and scanner selection remain policy inputs. An approved suppression must record
+reason, owner, expiry, affected package, and compensating control. Expired
+suppressions are blocking.
+
+`artifacts/security/dependency-diff.json` is a local baseline. CI replaces it
+with the actual base/head direct and transitive lockfile diff before release.

eslint.config.js

@@ -35,6 +35,7 @@ export default [
       "artifacts/**",
       "tests/fixtures/typecheck/**",
       "tests/fixtures/architecture/forbidden/**",
+      "tests/fixtures/security/forbidden/**",
     ],
   },
   eslint.configs.recommended,
@@ -98,4 +99,24 @@ export default [
       ]),
     },
   },
+  {
+    files: ["**/*.{js,jsx}"],
+    rules: {
+      "no-eval": "error",
+      "no-new-func": "error",
+      "no-script-url": "error",
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "JSXAttribute[name.name='dangerouslySetInnerHTML']",
+          message: "Raw HTML injection is prohibited by FE-OC-019.",
+        },
+        {
+          selector:
+            "CallExpression[callee.object.name='document'][callee.property.name='createElement'][arguments.0.value='script']",
+          message: "Runtime script construction is prohibited by FE-OC-019.",
+        },
+      ],
+    },
+  },
 ];

package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build && node scripts/generate-build-manifest.mjs",
+    "build:release": "corepack pnpm build && corepack pnpm generate:supply-chain && corepack pnpm scan:security",
     "preview": "vite preview",
     "lint": "eslint src scripts tests vite.config.js vitest.config.js playwright.config.js --max-warnings=0",
     "check:architecture": "node scripts/check-architecture.mjs",
@@ -21,9 +22,14 @@
     "test:component": "vitest run tests/component --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/component.xml",
     "test:integration": "vitest run tests/integration --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/integration.xml",
     "test:e2e": "playwright test",
-    "test:a11y": "playwright test --grep @a11y",
+    "test:a11y": "playwright test --grep @a11y && node scripts/write-a11y-report.mjs",
+    "review:a11y-manual": "node scripts/verify-a11y-manual.mjs",
     "test:sample-removal": "node scripts/test-sample-removal.mjs",
-    "test:all": "pnpm test:runtime-schema && pnpm test:unit && pnpm test:component && pnpm test:integration"
+    "test:all": "corepack pnpm test:runtime-schema && corepack pnpm test:unit && corepack pnpm test:component && corepack pnpm test:integration",
+    "verify:lockfile": "corepack pnpm install --frozen-lockfile",
+    "generate:supply-chain": "node scripts/generate-supply-chain.mjs",
+    "scan:security": "node scripts/security-scan.mjs",
+    "check:browser-security": "node scripts/check-browser-security.mjs"
   },
   "dependencies": {
     "@tanstack/react-query": "5.101.4",

playwright.config.js

@@ -13,7 +13,7 @@ export default defineConfig({
     screenshot: "only-on-failure",
   },
   webServer: {
-    command: "pnpm dev --host 127.0.0.1",
+    command: "corepack pnpm dev --host 127.0.0.1",
     url: "http://127.0.0.1:5173",
     reuseExistingServer: !process.env.CI,
   },

schemas/artifacts/build-manifest.schema.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "build-manifest.schema.json",
+  "type": "object",
+  "required": [
+    "schemaVersion",
+    "buildId",
+    "commitSha",
+    "generatedAt",
+    "buildContext",
+    "outputs"
+  ],
+  "properties": {
+    "schemaVersion": { "const": 1 },
+    "buildId": { "type": "string", "minLength": 1 },
+    "commitSha": { "type": "string", "minLength": 1 },
+    "generatedAt": { "type": "string", "format": "date-time" },
+    "buildContext": {
+      "type": "object",
+      "required": ["nodeVersion", "packageManagerVersion", "runnerImage"],
+      "properties": {
+        "nodeVersion": { "type": "string" },
+        "packageManagerVersion": { "type": "string" },
+        "runnerImage": { "type": "string" }
+      },
+      "additionalProperties": false
+    },
+    "outputs": {
+      "type": "object",
+      "required": ["directory", "viteManifest"],
+      "properties": {
+        "directory": { "type": "string" },
+        "viteManifest": { "type": "string" }
+      },
+      "additionalProperties": false
+    }
+  },
+  "additionalProperties": false
+}

scripts/check-browser-security.mjs

@@ -0,0 +1,42 @@
+import { readdir } from "node:fs/promises";
+import { spawnSync } from "node:child_process";
+
+const pnpmCli = /** @type {string} */ (process.env.npm_execpath);
+
+/** @param {string[]} arguments_ */
+function runPnpm(arguments_) {
+  return spawnSync(process.execPath, [pnpmCli, ...arguments_], {
+    encoding: "utf8",
+  });
+}
+
+const allowed = runPnpm([
+  "exec",
+  "eslint",
+  "tests/fixtures/security/allowed",
+  "--no-ignore",
+  "--max-warnings=0",
+]);
+const forbidden = runPnpm([
+  "exec",
+  "eslint",
+  "tests/fixtures/security/forbidden",
+  "--no-ignore",
+  "--max-warnings=0",
+]);
+
+const distFiles = await readdir("dist", { recursive: true });
+const publicSourceMaps = distFiles.filter((file) => String(file).endsWith(".map"));
+
+if (allowed.status !== 0 || forbidden.status === 0 || publicSourceMaps.length > 0) {
+  process.stderr.write(allowed.stderr || allowed.stdout);
+  process.stderr.write(forbidden.stderr || forbidden.stdout);
+  if (publicSourceMaps.length > 0) {
+    process.stderr.write(`Public source maps found: ${publicSourceMaps.join(", ")}\n`);
+  }
+  process.exit(1);
+}
+
+process.stdout.write(
+  "Browser security fixtures: injection rejected, public source maps absent\n",
+);

scripts/generate-supply-chain.mjs

@@ -0,0 +1,102 @@
+import { createHash } from "node:crypto";
+import { gzipSync } from "node:zlib";
+import {
+  mkdir,
+  readFile,
+  readdir,
+  stat,
+  writeFile,
+} from "node:fs/promises";
+import path from "node:path";
+
+/** @param {string} directory @returns {Promise<string[]>} */
+async function filesWithin(directory) {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const nested = /** @type {string[][]} */ (await Promise.all(
+    entries.map((entry) => {
+      const target = path.join(directory, entry.name);
+      return entry.isDirectory() ? filesWithin(target) : [target];
+    }),
+  ));
+  return nested.flat().sort();
+}
+
+const packageJson = JSON.parse(await readFile("package.json", "utf8"));
+const lockfile = await readFile("pnpm-lock.yaml");
+const outputFiles = await filesWithin("dist");
+
+const outputs = await Promise.all(
+  outputFiles.map(async (outputFile) => {
+    const content = await readFile(outputFile);
+    const metadata = await stat(outputFile);
+    return {
+      path: outputFile,
+      bytes: metadata.size,
+      gzipBytes: gzipSync(content).byteLength,
+      sha256: createHash("sha256").update(content).digest("hex"),
+    };
+  }),
+);
+
+const dependencies = {
+  ...packageJson.dependencies,
+  ...packageJson.devDependencies,
+};
+const inventory = Object.entries(dependencies)
+  .sort(([left], [right]) => left.localeCompare(right))
+  .map(([name, version]) => ({ name, version, direct: true }));
+
+await mkdir("artifacts/performance", { recursive: true });
+await mkdir("artifacts/release", { recursive: true });
+await mkdir("artifacts/security", { recursive: true });
+
+await writeFile(
+  "artifacts/performance/bundle.json",
+  `${JSON.stringify(
+    {
+      schemaVersion: 1,
+      generatedAt: new Date().toISOString(),
+      context: {
+        nodeVersion: process.version,
+        packageManager: packageJson.packageManager,
+        runnerImage: process.env.CI_RUNNER_IMAGE ?? `${process.platform}-${process.arch}`,
+      },
+      outputs,
+    },
+    null,
+    2,
+  )}\n`,
+);
+
+await writeFile(
+  "artifacts/release/dependency-inventory.json",
+  `${JSON.stringify(
+    {
+      schemaVersion: 1,
+      lockfileSha256: createHash("sha256").update(lockfile).digest("hex"),
+      dependencies: inventory,
+    },
+    null,
+    2,
+  )}\n`,
+);
+
+await writeFile(
+  "artifacts/release/checksums.txt",
+  `${outputs.map((output) => `${output.sha256}  ${output.path}`).join("\n")}\n`,
+);
+
+await writeFile(
+  "artifacts/security/dependency-diff.json",
+  `${JSON.stringify(
+    {
+      schemaVersion: 1,
+      reviewStatus: "local-baseline",
+      directDependencies: inventory.length,
+      highRiskUnreviewed: [],
+      lockfileSha256: createHash("sha256").update(lockfile).digest("hex"),
+    },
+    null,
+    2,
+  )}\n`,
+);

scripts/security-scan.mjs

@@ -0,0 +1,82 @@
+import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+const scanRoots = ["src", "dist"];
+const findings = /** @type {Array<{ruleId: string, file: string}>} */ ([]);
+const patterns = [
+  { id: "private-key", expression: /-----BEGIN (?:RSA |EC )?PRIVATE KEY-----/g },
+  { id: "aws-access-key", expression: /\bAKIA[0-9A-Z]{16}\b/g },
+  { id: "github-token", expression: /\bgh[pousr]_[A-Za-z0-9_]{30,}\b/g },
+  {
+    id: "assigned-secret",
+    expression:
+      /\b(?:client_secret|password|private_key)\s*[:=]\s*["'][^"'${}]{12,}["']/gi,
+  },
+];
+
+/** @param {string} directory @returns {Promise<string[]>} */
+async function filesWithin(directory) {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const nested = /** @type {string[][]} */ (await Promise.all(
+    entries.map((entry) => {
+      const target = path.join(directory, entry.name);
+      return entry.isDirectory() ? filesWithin(target) : [target];
+    }),
+  ));
+  return nested.flat();
+}
+
+for (const root of scanRoots) {
+  for (const scanFile of await filesWithin(root)) {
+    if (/\.(png|jpg|jpeg|gif|woff2?|zip)$/i.test(scanFile)) continue;
+    const content = await readFile(scanFile, "utf8");
+    for (const pattern of patterns) {
+      pattern.expression.lastIndex = 0;
+      if (pattern.expression.test(content)) {
+        findings.push({ ruleId: pattern.id, file: scanFile });
+      }
+    }
+  }
+}
+
+const sarif = {
+  version: "2.1.0",
+  $schema:
+    "https://json.schemastore.org/sarif-2.1.0.json",
+  runs: [
+    {
+      tool: {
+        driver: {
+          name: "ca-frontend-secret-scan",
+          rules: patterns.map((pattern) => ({
+            id: pattern.id,
+            shortDescription: { text: "Potential credential material" },
+          })),
+        },
+      },
+      results: findings.map((finding) => ({
+        ruleId: finding.ruleId,
+        message: { text: "Potential secret material must be removed." },
+        locations: [
+          {
+            physicalLocation: {
+              artifactLocation: { uri: finding.file },
+            },
+          },
+        ],
+      })),
+    },
+  ],
+};
+
+await mkdir("artifacts/security", { recursive: true });
+await writeFile(
+  "artifacts/security/scan.sarif",
+  `${JSON.stringify(sarif, null, 2)}\n`,
+);
+
+if (findings.length > 0) {
+  process.stderr.write(`Security scan found ${findings.length} blocking result(s).\n`);
+  process.exit(1);
+}
+process.stdout.write("Source and built-asset secret scan: PASS\n");

scripts/verify-a11y-manual.mjs

@@ -0,0 +1,25 @@
+import { readFile } from "node:fs/promises";
+
+const evidence = await readFile(
+  "artifacts/tests/a11y-manual/APP_HOME.md",
+  "utf8",
+);
+
+const required = [
+  "Status: reviewed",
+  "Reviewer:",
+  "Keyboard:",
+  "Focus:",
+  "Screen reader:",
+  "Reduced motion:",
+  "Color signal:",
+];
+
+const missing = required.filter((marker) => !evidence.includes(marker));
+if (missing.length > 0) {
+  process.stderr.write(
+    `Manual accessibility evidence is incomplete: ${missing.join(", ")}\n`,
+  );
+  process.exit(1);
+}
+process.stdout.write("Manual accessibility evidence: PASS\n");

scripts/write-a11y-report.mjs

@@ -0,0 +1,18 @@
+import { mkdir, writeFile } from "node:fs/promises";
+
+await mkdir("artifacts/tests", { recursive: true });
+await writeFile(
+  "artifacts/tests/a11y.json",
+  `${JSON.stringify(
+    {
+      schemaVersion: 1,
+      generatedAt: new Date().toISOString(),
+      scope: ["APP_HOME", "SAMPLE_RESOURCE_LIST", "NOT_FOUND"],
+      threshold: { critical: 0, serious: 0 },
+      automatedStatus: "passed",
+      manualReview: "see artifacts/tests/a11y-manual/APP_HOME.md",
+    },
+    null,
+    2,
+  )}\n`,
+);

src/presentation/components/async-surface.jsx

@@ -1,7 +1,12 @@
 /** @param {{ label?: string }} props */
 export function LoadingSurface({ label = "불러오는 중" }) {
   return (
-    <section aria-busy="true" aria-label={label}>
+    <section
+      aria-busy="true"
+      aria-label={label}
+      aria-live="polite"
+      aria-atomic="true"
+    >
       <div className="ui-skeleton" aria-hidden="true" />
       <span className="sr-only">{label}</span>
     </section>
@@ -11,7 +16,7 @@ export function LoadingSurface({ label = "불러오는 중" }) {
 /** @param {{ title?: string, action?: React.ReactNode }} props */
 export function EmptySurface({ title = "표시할 항목이 없습니다.", action }) {
   return (
-    <section className="ui-empty">
+    <section className="ui-empty" aria-live="polite">
       <p>{title}</p>
       {action}
     </section>

src/presentation/security/safe-text.jsx

@@ -0,0 +1,9 @@
+/**
+ * Untrusted content is rendered as a React text node. HTML interpretation is
+ * intentionally not offered by this template.
+ *
+ * @param {{ value: unknown }} props
+ */
+export function SafeText({ value }) {
+  return <span>{typeof value === "string" ? value : String(value ?? "")}</span>;
+}

tests/component/browser-security.test.jsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SafeText } from "../../src/presentation/security/safe-text.jsx";
+import { assertSafeConfigNames } from "../../src/contracts/env.js";
+import { defineStorageKey } from "../../src/contracts/storage-keys.js";
+import { projectTelemetryEvent } from "../../src/contracts/telemetry.js";
+
+describe("browser security boundary", () => {
+  it("renders untrusted text without script or inline handler injection", () => {
+    render(
+      <SafeText value={'<img src=x onerror="window.compromised=true"><script>x</script>'} />,
+    );
+    expect(screen.getByText(/<img/)).toBeVisible();
+    expect(document.querySelector("script")).toBeNull();
+    expect(document.querySelector("[onerror]")).toBeNull();
+  });
+
+  it("rejects secret-like client configuration names", () => {
+    expect(() => assertSafeConfigNames({ PRIVATE_KEY: "not-public" })).toThrow();
+  });
+
+  it("rejects browser token storage registration", () => {
+    expect(() =>
+      defineStorageKey({
+        logicalName: "SESSION_TOKEN",
+        scope: "auth",
+        name: "session-token",
+        backend: "sessionStorage",
+        classification: "sensitive-forbidden",
+        schemaVersion: 1,
+        ttl: "session",
+        migration: "discard",
+        quotaFallback: "feature-disable",
+      }),
+    ).toThrow();
+  });
+
+  it("drops raw URL/query/token telemetry attributes", () => {
+    const result = projectTelemetryEvent("api.request.failed", {
+      error_kind: "SERVER_FAILURE",
+      http_status_group: "5xx",
+      attempt_count_bucket: "1",
+      route_id: "APP_HOME",
+      raw_url: "https://api.test?token=private",
+      query_string: "token=private",
+    });
+    expect(result.success).toBe(true);
+    expect(JSON.stringify(result)).not.toMatch(/raw_url|query_string|private/);
+  });
+});

tests/e2e/accessibility.spec.js

@@ -0,0 +1,37 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+for (const route of ["/", "/sample/resources", "/not-found"]) {
+  test(`@a11y ${route} has no critical or serious axe violations`, async ({
+    page,
+  }) => {
+    await page.goto(route);
+    await expect(page.getByRole("main")).toBeVisible();
+    const results = await new AxeBuilder({ page })
+      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+      .analyze();
+    const blocking = results.violations.filter((violation) =>
+      ["critical", "serious"].includes(violation.impact ?? ""),
+    );
+    expect(blocking).toEqual([]);
+  });
+}
+
+test("@a11y keyboard reaches the primary route action with visible focus", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.keyboard.press("Tab");
+  const action = page.getByRole("link", { name: "샘플 리소스" });
+  await expect(action).toBeFocused();
+  await expect(action).toHaveCSS("outline-style", "solid");
+});
+
+test("@a11y reduced-motion policy disables long animation", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await page.goto("/");
+  const duration = await page
+    .locator("body")
+    .evaluate((body) => getComputedStyle(body).animationDuration);
+  expect(["0s", "0.00001s", "1e-05s"]).toContain(duration);
+});

tests/fixtures/security/allowed/safe-text.jsx

@@ -0,0 +1,3 @@
+export function Fixture({ value }) {
+  return <span>{value}</span>;
+}

tests/fixtures/security/forbidden/dynamic-script.js

@@ -0,0 +1,5 @@
+export function attachScript(source) {
+  const script = document.createElement("script");
+  script.src = source;
+  document.head.append(script);
+}

tests/fixtures/security/forbidden/eval.js

@@ -0,0 +1 @@
+export const execute = (source) => eval(source);

tests/fixtures/security/forbidden/raw-html.jsx

@@ -0,0 +1,3 @@
+export function RawHtml({ value }) {
+  return <div dangerouslySetInnerHTML={{ __html: value }} />;
+}