Github Pages嵌入交互式PDF被Content Security Policy阻止求助

嘿，我知道你现在卡在GitHub Pages嵌入PDF查看器的问题上了，浏览器要么报CSP错误要么空白，确实挺闹心的。我来给你拆解下问题根源，再给你靠谱的解决方案：

为啥之前的方法不行？ #

你用的https://github.com/username/username.github.io/blob/master/CV.pdf是GitHub主站的blob页面链接，不是PDF文件的直接访问地址。而且GitHub主站的**内容安全策略（CSP）**明确禁止它的资源被嵌入到其他域名（哪怕是你的GitHub Pages域名），所以浏览器直接拦截了。就算你用raw.githubusercontent.com的链接，现在GitHub也给raw资源加了CSP限制，跨域嵌入照样不行。

正确的解决步骤 #

1. 把PDF放到GitHub Pages仓库里 #

首先确保你的CV.pdf直接上传到GitHub Pages仓库的根目录，或者你想放的子目录（比如assets/pdf/文件夹）——总之要和你的Pages页面同仓库、同域名。

2. 用GitHub Pages的直接链接嵌入 #

因为GitHub Pages会托管仓库里的所有静态文件，所以你可以用Pages域名直接访问PDF，这样就不存在跨域CSP的问题了。给你两个常用的嵌入方式：

方式一：用<embed>标签（简洁直接）

把src换成Pages域名下的相对路径就行，比如PDF在根目录的话：

<embed src="/CV.pdf" type="application/pdf" width="100%" height="800px" />

如果放在assets/pdf/子目录里：

<embed src="/assets/pdf/CV.pdf" type="application/pdf" width="100%" height="800px" />

方式二：用<iframe>标签（兼容性更强）

<iframe>在各种浏览器里的表现更稳定，还能通过URL参数控制查看器的功能：

<iframe src="/CV.pdf#toolbar=1&navpanes=1&scrollbar=1" width="100%" height="800px" frameborder="0"></iframe>

这里的#toolbar=1&navpanes=1&scrollbar=1是让PDF查看器显示工具栏、导航栏和滚动条，用户交互起来更方便。

3. （可选）加个下载按钮提升体验 #

如果想让用户一键下载简历，可以在PDF查看器下面加个链接：

<a href="/CV.pdf" download="YourName_CV.pdf">📥 下载我的简历</a>

download属性可以指定下载后的文件名，避免用户拿到一个叫CV.pdf的模糊文件。

4. 验证路径是否正确 #

上传PDF后，先直接访问https://username.github.io/CV.pdf（对应根目录的情况），确认能正常打开PDF。如果显示404，检查文件名的大小写（GitHub Pages对大小写敏感）、文件路径是否和嵌入代码里的一致。

这样操作后，你的PDF就能在Pages页面里正常交互式展示，而且不会有CSP的问题啦！

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