从JS文件导入的脚本是否可应用Content Security Policy nonce？

这种导入脚本被拦截的问题不是未携带nonce导致的，CSP nonce本身也不适用于JS内部导入的子脚本场景，调整CSP配置即可解决。

核心原因 #

你配置的CSP规则中，更具体的script-src指令会覆盖default-src的同源配置：

• 你配置了default-src 'self'，但单独指定了script-src 'nonce-4VOtk0Uo1l7pwtC'，此时脚本加载的规则完全以script-src的配置为准，默认的同源允许规则失效
• nonce仅对HTML中直接声明、带对应nonce属性的script标签生效，通过ES模块import语法加载的子脚本不受nonce规则校验，只会校验script-src中配置的允许源
• 你导入的./p-cfa9fa8a.js是同源脚本，但script-src中没有配置'self'，所以加载被拦截

关于导入脚本的nonce适配问题 #

JS文件内部通过import导入的子脚本，不需要也不能通过nonce解决拦截问题：

• nonce的作用范围仅限HTML层面声明的script标签，子脚本不会继承父脚本的nonce，也无法给导入的子脚本单独添加nonce
• 这类动态导入的脚本只需在script-src中配置对应的允许源即可放行

修复方案 #

修改你的CSP中script-src配置，添加'self'规则即可：

Content-Security-Policy
    default-src 'self'; frame-ancestors 'self'; form-action 'self'; script-src 'nonce-4VOtk0Uo1l7pwtC' 'self';

如果后续有跨域的模块需要导入，把对应的跨域域名也添加到script-src的允许列表中即可。

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