Vite-React-Electron项目中解决@react-pdf/renderer的CSP安全策略问题

在基于Vite构建的React-Electron项目中，开发者Denhope遇到了一个关于@react-pdf/renderer库的运行时错误。这个错误特别值得关注，因为它在Webpack构建环境下不会出现，仅在Vite环境下发生。

问题现象

当尝试生成PDF文档时，控制台会抛出以下错误信息：

RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'")

这个错误表明WebAssembly模块的编译和实例化过程被内容安全策略(CSP)阻止了，因为当前的策略不允许使用'unsafe-eval'。

问题根源

这个问题源于Vite默认启用了严格的内容安全策略(CSP)。CSP是一种重要的安全机制，用于防止跨站脚本攻击(XSS)等安全威胁。在Vite项目中，默认的CSP设置不允许eval操作，而@react-pdf/renderer库内部使用了WebAssembly，需要eval权限才能正常工作。

解决方案

要解决这个问题，我们需要调整项目的CSP设置。具体方法是在项目的index.html文件中添加或修改meta标签，扩展script-src策略以允许unsafe-eval操作：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';">

这个修改将：

1. 保留原有的'self'策略，允许加载同源脚本
2. 保留'unsafe-inline'，允许内联脚本
3. 新增'unsafe-eval'，允许eval操作

安全考虑

虽然这个解决方案能解决问题，但开发者需要注意：

1. 'unsafe-eval'确实会降低安全性，应该仅在确实需要时使用
2. 在生产环境中，应该评估是否有更安全的替代方案
3. 如果可能，考虑将PDF生成功能移至后端服务

为什么Webpack下不会出现此问题

这个问题的特殊性在于它只在Vite环境下出现。这是因为：

1. Vite默认启用了更严格的CSP策略
2. Webpack的默认配置对CSP的限制较少
3. Vite的现代构建方式对安全性有更高要求

总结

在Vite-React-Electron项目中使用@react-pdf/renderer时遇到CSP相关错误，主要是由于Vite的安全策略比Webpack更严格。通过适当调整CSP策略可以解决这个问题，但同时需要权衡安全性和功能性。开发者应当根据项目实际需求和安全要求来决定最终的解决方案。