在Safari中无法登录Supabase用户的技术问题求助

问题描述 #

我正在为Nuxt3/Supabase应用添加Playwright测试，但Webkit/Safari环境下测试因HTTPS认证问题失败，Chrome中登录流程完全正常。错误截图如下：

已配置的package.json脚本（Chrome中运行正常）：

{
  "scripts": {
    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
    "cert": "mkcert -key-file ./localhost-key.pem -cert-file ./localhost.pem localhost"
    ...
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/test-utils": "^3.12.1",
    "@nuxtjs/supabase": "^1.1.6",
    "@playwright/test": "^1.43.1",
    "@vue/test-utils": "^2.4.5",
    "nuxt": "^3.8.2",
    "supabase": "^1.145.4",
    "supawright": "^0.2.0",
    "tsx": "^4.7.3",
    "typescript": "^5.3.3",
    "vue": "^3.3.10",
    "vue-router": "^4.2.5",
    "vue-tsc": "^1.8.26"
  },
  "dependencies": {
    ...
  }
}

尝试过的操作：

• 在Safari偏好设置中禁用跨源限制
• 在Nuxt配置中直接指定HTTPS证书路径（简化流程但问题未解决）：

export default defineNuxtConfig({
  devServer: {
    port: 8000,
    https: {
      key: fs.readFileSync('./localhost-key.pem').toString(),
      cert: fs.readFileSync('./localhost.pem').toString(),
    },
  },
})

• 查阅NuxtSupabase相关GitHub问题，但现有解决方案无效

可行解决方案 #

1. 配置Playwright信任本地自签名证书 #

Webkit/Safari对证书校验更严格，需在Playwright配置中明确忽略HTTPS错误或导入信任证书：

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
import fs from 'fs';

export default defineConfig({
  use: {
    ignoreHTTPSErrors: true,
    contextOptions: {
      ...(process.env.NODE_ENV === 'development' ? {
        certificates: [{
          origin: 'https://localhost:8000',
          cert: fs.readFileSync('./localhost.pem').toString(),
        }],
      } : {})
    }
  },
  projects: [
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

2. 让Supabase客户端在测试环境跳过SSL校验 #

修改Nuxt的Supabase配置，仅在测试环境关闭证书校验：

export default defineNuxtConfig({
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_ANON_KEY,
    clientOptions: {
      auth: {
        autoRefreshToken: true,
        persistSession: true,
        detectSessionInUrl: true
      },
      ...(process.env.NODE_ENV === 'test' ? {
        global: {
          fetch: (url, options) => {
            return fetch(url, { ...options, rejectUnauthorized: false });
          }
        }
      } : {})
    }
  }
});

注意：该配置仅限测试环境使用，生产环境绝对不能开启。

3. 给Webkit添加忽略证书错误的启动参数 #

在Playwright的Webkit项目配置中添加命令行参数：

// playwright.config.ts
projects: [
  {
    name: 'webkit',
    use: {
      ...devices['Desktop Safari'],
      launchOptions: {
        args: ['--ignore-certificate-errors']
      }
    },
  },
]

4. 确保mkcert根证书被系统信任 #

重新安装mkcert根证书并重新生成本地证书：

mkcert -install
npm run cert

5. 测试环境临时改用HTTP（备选方案） #

如果以上方法均无效，可在测试环境切换为HTTP：

// nuxt.config.ts
export default defineNuxtConfig({
  devServer: {
    port: 8000,
    https: process.env.NODE_ENV !== 'test' ? {
      key: fs.readFileSync('./localhost-key.pem').toString(),
      cert: fs.readFileSync('./localhost.pem').toString(),
    } : false,
  },
});

同时修改Playwright baseURL：

// playwright.config.ts
export default defineConfig({
  use: {
    baseURL: 'http://localhost:8000',
  },
});

内容的提问来源于stack exchange，提问作者J. Jackson