feat: 更新环境配置并增强 iframe 安全处理机制

修改 .env.example，优化环境切换说明，并新增 API_BASE_URL 配置项，提升配置管理能力。更新 next.config.ts：使用 API_BASE_URL 代理 API 请求，增强开发与生产环境的灵活性。重构 iframe-bridge 与 use-token-refresh 组件，采用新的 iframe 来源校验方法，提升安全性检查能力。优化 csp-config.ts：动态注入允许的父级来源（parent origins）到 CSP 配置中，强化安全策略。调整 lottery-http：通过 Next.js 代理转发 API 请求，简化 API 调用流程。
2026-05-28 10:12:24 +08:00
parent 58afa8e844
commit 1316a62ce3
8 changed files with 203 additions and 54 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,14 +1,12 @@
 # =============================================================================
 # 前端本地配置示例
 # =============================================================================
+# 手动切换环境：保留一个生效，另一个注释掉

-# Next 开发服务代理目标：浏览器请求 /api/* 时由 Next 转发到这里。
-# 默认值已经在 next.config.ts 中兜底为 http://127.0.0.1:8000；本地 Laravel 端口不同时再改。
-LOTTERY_API_PROXY_TARGET=http://127.0.0.1:8000
-
-# 可选：如果设置此值，浏览器会绕过 Next 代理，直接请求该 API 地址。
-# 一般本地开发建议留空，让请求走同源 /api 代理，避免 CORS。
-# NEXT_PUBLIC_LOTTERY_API_BASE_URL=http://127.0.0.1:8000
+# 测试
+API_BASE_URL=http://127.0.0.1:8000
+# 线上
+# API_BASE_URL=https://api.your-production-domain.com

 # 可选：大厅「玩法与赔率」接口 `/api/v1/play/effective` 的 ?currency=（如 NPR）；不设则由后端选默认可下注币种。
 # NEXT_PUBLIC_LOTTERY_PLAY_CURRENCY=NPR
--- a/middleware.ts
+++ b/middleware.ts
@@ -0,0 +1,47 @@
+import { NextResponse, type NextRequest } from "next/server";
+
+import { generateCSP, nonCspSecurityHeaders } from "./src/lib/csp-config";
+
+type RuntimeOriginsEnvelope = {
+  code?: number;
+  data?: {
+    iframe_allowed_origins?: unknown;
+  };
+};
+
+async function loadRuntimeOrigins(request: NextRequest): Promise<string[]> {
+  try {
+    const url = new URL("/api/v1/integration/runtime-origins", request.url);
+    const response = await fetch(url, {
+      headers: { Accept: "application/json" },
+      cache: "no-store",
+    });
+
+    if (!response.ok) return [];
+
+    const payload = (await response.json()) as RuntimeOriginsEnvelope;
+    const origins = payload.data?.iframe_allowed_origins;
+
+    if (!Array.isArray(origins)) return [];
+
+    return origins.filter((origin): origin is string => typeof origin === "string");
+  } catch {
+    return [];
+  }
+}
+
+export async function middleware(request: NextRequest): Promise<NextResponse> {
+  const response = NextResponse.next();
+  const runtimeOrigins = await loadRuntimeOrigins(request);
+
+  response.headers.set("Content-Security-Policy", generateCSP(runtimeOrigins));
+  for (const header of nonCspSecurityHeaders) {
+    response.headers.set(header.key, header.value);
+  }
+
+  return response;
+}
+
+export const config = {
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|.*\\..*).*)"],
+};
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,20 +1,20 @@
 import type { NextConfig } from "next";

-import { securityHeaders } from "./src/lib/csp-config";
+import { nonCspSecurityHeaders } from "./src/lib/csp-config";

 const lotteryApiProxyTarget =
-  process.env.LOTTERY_API_PROXY_TARGET?.trim() || "http://127.0.0.1:8000";
+  process.env.API_BASE_URL?.trim() || "http://127.0.0.1:8000";

 const nextConfig: NextConfig = {
  allowedDevOrigins: ["192.168.0.101"],
  reactCompiler: true,

-  // 安全头配置 - 支持 iframe 嵌入
+  // 非 CSP 安全头；CSP 由 middleware 按后台接入站点白名单动态生成。
  async headers() {
    return [
      {
        source: "/:path*",
-        headers: securityHeaders,
+        headers: nonCspSecurityHeaders,
      },
    ];
  },
--- a/src/components/iframe-bridge.tsx
+++ b/src/components/iframe-bridge.tsx
@@ -4,6 +4,10 @@ import { useEffect, useCallback, type ReactNode } from "react";

 import { usePlayerSessionStore } from "@/stores/player-session-store";
 import { setPlayerBearerToken } from "@/lib/lottery-auth";
+import {
+  isIframeOriginAllowed,
+  loadIframeAllowedOrigins,
+} from "@/lib/iframe-origins";

 /**
 * iframe 通信桥接组件
@@ -87,21 +91,13 @@ export function IframeBridge({ children }: { children: ReactNode }): ReactNode {

    console.log("[IframeBridge] Setting up iframe communication");

-    const handleMessage = (event: MessageEvent): void => {
-      // 安全：验证来源域名
-      const allowedOrigins = [
-        process.env.NEXT_PUBLIC_MAIN_SITE_URL,
-        process.env.NEXT_PUBLIC_PARENT_ORIGIN,
-        "http://localhost:3800",
-        "http://127.0.0.1:3800",
-      ].filter(Boolean);
-
-      if (
-        allowedOrigins.length > 0 &&
-        !allowedOrigins.includes(event.origin)
-      ) {
-        console.warn("[IframeBridge] Rejected message from:", event.origin);
-        return;
+    const handleMessage = async (event: MessageEvent): Promise<void> => {
+      if (!isIframeOriginAllowed(event.origin)) {
+        await loadIframeAllowedOrigins();
+        if (!isIframeOriginAllowed(event.origin)) {
+          console.warn("[IframeBridge] Rejected message from:", event.origin);
+          return;
+        }
      }

      const { data } = event;
@@ -158,8 +154,10 @@ export function IframeBridge({ children }: { children: ReactNode }): ReactNode {

    window.addEventListener("message", handleMessage);

-    // 发送就绪通知
-    notifyReady();
+    // 先加载后台白名单，再发送 READY，避免父站立即回 Token 时被本端误拒。
+    void loadIframeAllowedOrigins().finally(() => {
+      notifyReady();
+    });

    // 定期发送心跳
    const heartbeat = setInterval(() => {
--- a/src/hooks/use-token-refresh.ts
+++ b/src/hooks/use-token-refresh.ts
@@ -2,6 +2,10 @@ import { useCallback, useEffect, useRef } from "react";

 import { usePlayerSessionStore } from "@/stores/player-session-store";
 import { useErrorStore } from "@/stores/error-store";
+import {
+  isIframeOriginAllowed,
+  loadIframeAllowedOrigins,
+} from "@/lib/iframe-origins";

 /** Token 过期前警告阈值（毫秒） */
 const TOKEN_WARNING_THRESHOLD = 60 * 1000; // 1 分钟
@@ -116,21 +120,15 @@ export function useTokenRefresh(): {
  useEffect(() => {
    if (typeof window === "undefined") return;

-    const handleMessage = (event: MessageEvent): void => {
-      // 安全检查：验证来源
-      const allowedOrigins = [
-        process.env.NEXT_PUBLIC_MAIN_SITE_URL,
-        // 开发环境允许本地
-        "http://localhost:3800",
-        "http://127.0.0.1:3800",
-      ].filter(Boolean);
+    void loadIframeAllowedOrigins();

-      if (
-        allowedOrigins.length > 0 &&
-        !allowedOrigins.includes(event.origin)
-      ) {
-        console.warn("[TokenRefresh] Ignored message from unknown origin:", event.origin);
-        return;
+    const handleMessage = async (event: MessageEvent): Promise<void> => {
+      if (!isIframeOriginAllowed(event.origin)) {
+        await loadIframeAllowedOrigins();
+        if (!isIframeOriginAllowed(event.origin)) {
+          console.warn("[TokenRefresh] Ignored message from unknown origin:", event.origin);
+          return;
+        }
      }

      const { data } = event;
--- a/src/lib/csp-config.ts
+++ b/src/lib/csp-config.ts
@@ -18,10 +18,37 @@ const ALLOWED_PARENT_ORIGINS: string[] = [
  // 生产环境应从环境变量读取
 ].filter((o): o is string => Boolean(o));

+function normalizeOrigin(value: string): string | null {
+  try {
+    return new URL(value).origin;
+  } catch {
+    return null;
+  }
+}
+
+export function staticAllowedParentOrigins(): string[] {
+  return Array.from(
+    new Set(
+      ALLOWED_PARENT_ORIGINS
+        .map((origin) => normalizeOrigin(origin))
+        .filter((origin): origin is string => origin !== null),
+    ),
+  );
+}
+
 /**
 * 生成 CSP 指令字符串
 */
-export function generateCSP(): string {
+export function generateCSP(extraParentOrigins: string[] = []): string {
+  const parentOrigins = Array.from(
+    new Set([
+      ...staticAllowedParentOrigins(),
+      ...extraParentOrigins
+        .map((origin) => normalizeOrigin(origin))
+        .filter((origin): origin is string => origin !== null),
+    ]),
+  );
+
  const directives: Record<string, string[]> = {
    // 默认只允许同源
    "default-src": ["'self'"],
@@ -42,7 +69,7 @@ export function generateCSP(): string {
    "connect-src": [
      "'self'",
      process.env.NEXT_PUBLIC_API_URL || "",
-      process.env.NEXT_PUBLIC_LOTTERY_API_BASE_URL || "",
+      process.env.API_BASE_URL || "",
      // WebSocket 连接
      "ws:",
      "wss:",
@@ -55,10 +82,10 @@ export function generateCSP(): string {
    "object-src": ["'none'"],

    // 框架允许同源和指定父站
-    "frame-src": ["'self'", ...ALLOWED_PARENT_ORIGINS],
+    "frame-src": ["'self'", ...parentOrigins],

    // 允许被嵌入到指定父站
-    "frame-ancestors": ["'self'", ...ALLOWED_PARENT_ORIGINS],
+    "frame-ancestors": ["'self'", ...parentOrigins],

    // 表单提交允许同源
    "form-action": ["'self'"],
@@ -88,11 +115,7 @@ export function isAllowedParent(parentOrigin: string): boolean {
 /**
 * 安全头配置（用于 next.config.ts）
 */
-export const securityHeaders = [
-  {
-    key: "Content-Security-Policy",
-    value: generateCSP(),
-  },
+export const nonCspSecurityHeaders = [
  {
    key: "X-Content-Type-Options",
    value: "nosniff",
@@ -106,3 +129,11 @@ export const securityHeaders = [
    value: "camera=(), microphone=(), geolocation=()",
  },
 ];
+
+export const securityHeaders = [
+  {
+    key: "Content-Security-Policy",
+    value: generateCSP(),
+  },
+  ...nonCspSecurityHeaders,
+];
--- a/src/lib/iframe-origins.ts
+++ b/src/lib/iframe-origins.ts
@@ -0,0 +1,78 @@
+"use client";
+
+import { lotteryHttp, unwrapData } from "@/lib/lottery-http";
+import { API_V1_PREFIX } from "@/api/paths";
+
+type RuntimeOriginsResponse = {
+  iframe_allowed_origins: string[];
+};
+
+let cachedOrigins: string[] | null = null;
+let pendingOrigins: Promise<string[]> | null = null;
+
+function normalizeOrigin(value: string | undefined): string | null {
+  const trimmed = value?.trim();
+  if (!trimmed) return null;
+
+  try {
+    return new URL(trimmed).origin;
+  } catch {
+    return null;
+  }
+}
+
+function staticAllowedOrigins(): string[] {
+  return [
+    process.env.NEXT_PUBLIC_MAIN_SITE_URL,
+    process.env.NEXT_PUBLIC_PARENT_ORIGIN,
+    "http://localhost:3800",
+    "http://127.0.0.1:3800",
+  ]
+    .map(normalizeOrigin)
+    .filter((origin): origin is string => origin !== null);
+}
+
+function uniqueOrigins(origins: string[]): string[] {
+  return Array.from(new Set(origins));
+}
+
+export function getKnownIframeAllowedOrigins(): string[] {
+  return uniqueOrigins([
+    ...staticAllowedOrigins(),
+    ...(cachedOrigins ?? []),
+  ]);
+}
+
+export async function loadIframeAllowedOrigins(): Promise<string[]> {
+  if (cachedOrigins !== null) {
+    return getKnownIframeAllowedOrigins();
+  }
+
+  pendingOrigins ??= lotteryHttp
+    .get(`${API_V1_PREFIX}/integration/runtime-origins`)
+    .then((response) => {
+      const data = unwrapData<RuntimeOriginsResponse>(response.data);
+      cachedOrigins = data.iframe_allowed_origins
+        .map(normalizeOrigin)
+        .filter((origin): origin is string => origin !== null);
+
+      return getKnownIframeAllowedOrigins();
+    })
+    .catch((error: unknown) => {
+      pendingOrigins = null;
+      console.warn("[IframeOrigins] Failed to load runtime origins:", error);
+      return getKnownIframeAllowedOrigins();
+    });
+
+  return pendingOrigins;
+}
+
+export function isIframeOriginAllowed(origin: string): boolean {
+  const normalized = normalizeOrigin(origin);
+  if (normalized === null) return false;
+
+  const allowedOrigins = getKnownIframeAllowedOrigins();
+  if (allowedOrigins.length === 0) return true;
+
+  return allowedOrigins.includes(normalized);
+}
--- a/src/lib/lottery-http.ts
+++ b/src/lib/lottery-http.ts
@@ -14,13 +14,12 @@ import {
 import { isApiEnvelope } from "@/types/api/envelope";
 import { useErrorStore } from "@/stores/error-store";

-const baseURL = process.env.NEXT_PUBLIC_LOTTERY_API_BASE_URL?.trim();
-
 /**
 * **第一层**：只挂 `baseURL` / `timeout` / 默认 `Accept`。业务解析、toast 都不在这里。
 */
 export const lotteryHttp = axios.create({
-  baseURL: baseURL && baseURL !== "" ? baseURL : undefined,
+  // 统一走 Next 同源 /api 代理，由 next.config.ts 的 API_BASE_URL 转发到后端。
+  baseURL: "/api",
  timeout: 30_000,
  headers: { Accept: "application/json" },
 });