Astro SSR站点在旧版iOS设备（iPhone6及更早）无法运行求助

问题根源 #

iPhone 6及更早的iOS设备搭载的Safari版本为iOS 12及以下，这些版本不支持ES2020+的语法特性（如可选链?.、空值合并运算符??），同时无法识别CSP指令strict-dynamic，导致脚本执行中断，站点失去交互性。

解决方案 #

1. 转译ES2020+语法至兼容版本 #

调整Astro和Svelte的编译配置，确保代码转译为旧浏览器能识别的版本：

• 修改astro.config.mjs，指定ESBuild的目标环境：

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte()],
  vite: {
    build: {
      target: ['es2019', 'ios12'],
    },
    optimizeDeps: {
      esbuildOptions: {
        target: ['es2019', 'ios12'],
      },
    },
  },
});

• 配置Svelte的编译目标，在src/svelte.config.js中添加：

export default {
  compilerOptions: {
    target: 'es2019',
  },
};

2. 修复CSP规则兼容问题 #

旧Safari不支持strict-dynamic，需调整CSP配置（以Netlify为例）：

• 在netlify.toml中修改CSP头部，移除strict-dynamic并添加reCAPTCHA所需的脚本源：

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "script-src 'self' https://www.google.com https://www.gstatic.com; object-src 'none';"

如果之前使用了'unsafe-inline'，确认是否真的需要，尽量减少不安全指令的使用。

3. 确保reCAPTCHA v3兼容旧浏览器 #

• 使用传统脚本加载方式引入reCAPTCHA，避免ES模块：

<script src="https://www.google.com/recaptcha/api.js?render=你的站点密钥" async defer></script>

不要给脚本添加type="module"属性，旧Safari对ES模块的支持不完善。

4. 本地验证 #

执行npm run build构建生产版本，用本地服务器（如npx serve dist）启动，在iOS 12的Safari模拟器中测试，确认控制台无语法错误，站点交互正常。

内容的提问来源于stack exchange，提问作者tipos