启用CSP后如何设置嵌入式PDF查看器CSS？解决内联样式报错

我之前也碰到过一模一样的情况，本质原因是Chrome的内置PDF阅读器在渲染PDF文件时，会自动插入一些内联样式来处理页面布局、缩放等逻辑，而你的CSP规则style-src 'self'不允许任何内联样式，所以就触发了违规提示。

下面给你几个实用的解决方案，你可以根据自己的需求选择：

方案一：仅对PDF文件放宽CSP规则（推荐） #

如果不想改变全局的CSP严格性，只需要针对PDF文件单独调整规则，允许内联样式。可以在.htaccess里用FilesMatch指令实现：

# 全局CSP规则（保持你的原有设置）
Header set Content-Security-Policy "style-src 'self'; [其他规则...]"

# 针对PDF文件单独放宽style-src规则
<FilesMatch "\.pdf$">
  Header set Content-Security-Policy "style-src 'self' 'unsafe-inline'; [其他规则...]"
</FilesMatch>

这样既保留了其他资源的严格CSP，又能让Chrome的PDF阅读器正常渲染。

方案二：让浏览器直接下载PDF而非内置打开 #

如果不需要在浏览器内预览PDF，可以设置让浏览器直接下载文件，这样就不会触发内置阅读器的内联样式了：

<FilesMatch "\.pdf$">
  Header set Content-Disposition "attachment"
</FilesMatch>

缺点是用户需要手动打开下载的PDF文件，会改变原有预览的体验。

方案三：使用哈希（不推荐，维护成本高） #

如果你完全不想用'unsafe-inline'，可以尝试捕获Chrome插入的内联样式的哈希值，添加到style-src里。比如报错里提到的sha256-[deleted]，把这个哈希加到规则里：

Header set Content-Security-Policy "style-src 'self' 'sha256-[你的哈希值]';"

但这个方法的问题在于，Chrome更新后内置阅读器的内联样式可能会变化，哈希值也会跟着变，需要你定期更新，维护起来比较麻烦。

总结一下，方案一是最平衡的选择，既能保证安全，又不影响用户体验。

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