SvelteKit严格CSP(无unsafe-inline)下异步加载样式与nonce使用问题

该需求可以正常实现，不属于app.html场景的边界情况，之前遇到的报错都是方案适配CSP规则、SvelteKit渲染特性时的常见问题，对应解决方式如下。

• 内联onload触发CSP拦截是符合预期的行为：严格CSP未开启unsafe-inline时，所有HTML标签上的内联事件处理器（包括onload/onclick等）都属于被拦截的内联脚本范畴，哪怕写在<link>标签上也不例外，和标签类型无关。
• %sveltekit.nonce%触发预渲染报错是渲染模式不匹配导致的：该占位符是SvelteKit提供的运行时注入标记，仅在动态渲染（SSR/边缘渲染）场景下会被替换为请求级的合法nonce值；预渲染是构建阶段生成静态HTML，不存在请求级的动态值，因此会直接抛构建错误。另外nonce不是<script>标签的专属属性，需要放行的内联样式、资源标签都可以添加该属性。

方案1：适配全量预渲染场景（推荐，配置成本最低） #

不需要注入nonce，也不需要额外写独立脚本，利用CSP的哈希校验规则放行固定的内联逻辑即可：

• 保留异步加载样式的标签写法：

<link rel="preload" as="style" href="/styles.css" onload="this.rel='stylesheet'" />

• 启动本地开发服务访问页面，复制控制台CSP报错中给出的对应内联脚本的SHA哈希值，将其加入svelte.config.js中CSP配置的script-src指令数组即可。
  该方案完全绕开动态nonce的限制，构建出的静态页面可以直接通过严格CSP校验，也不会触发预渲染报错，性能损耗为0。

方案2：适配动态渲染场景（无预渲染/部分路由预渲染） #

如果页面使用服务端动态渲染，可以通过nonce注入+独立事件绑定的方式实现：

• 先移除<link>标签上的内联onload属性，给标签加标识方便选择：

<link rel="preload" as="style" href="/styles.css" id="async-css" />

• 在app.html的<head>中添加绑定事件的内联脚本，注入nonce：

<script nonce="%sveltekit.nonce%">
  const cssLink = document.getElementById('async-css');
  cssLink.addEventListener('load', () => {
    cssLink.rel = 'stylesheet';
  });
</script>

• 如果存在部分路由开启预渲染的情况，不要把上述脚本放在全局app.html中，改为放到对应非预渲染路由的根布局+layout.svelte中通过<svelte:head>注入即可，避免触发全局预渲染校验报错。

• 不要把样式加载的事件绑定逻辑放到外部JS文件中执行，会因为脚本加载延迟导致无样式内容闪烁（FOUC），放在<head>中的内联脚本执行时机最早，不会阻塞页面渲染，体验最优。
• %sveltekit.nonce%属于SvelteKit 1.0版本后稳定支持的模板占位符，专门用于给模板内的资源标签注入请求级nonce，不存在功能不稳定的问题，只是目前没有放在公开文档的显眼位置。

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