Jekyll站点嵌入itch.io游戏iframe出现ERR_BLOCKED_BY_CSP错误如何解决

ERR_BLOCKED_BY_CSP 错误本质是你站点的内容安全策略（CSP）规则未允许第三方域名作为iframe源，才会在加载itch.io的游戏嵌入资源时触发拦截，针对Jekyll环境可以按以下步骤处理：

• 先定位CSP规则的配置位置
  Jekyll站点的CSP通常有两个配置入口：

  1. 站点全局模板（一般是_layouts/default.html）的<head>标签内，用<meta http-equiv="Content-Security-Policy">标签定义的规则
  2. 站点部署平台（如Nginx、Netlify、Vercel等）的响应头配置中定义的CSP规则

• 修改CSP规则新增iframe允许域名
  找到配置后，在CSP的frame-src指令中新增itch.io的域名允许项，示例如下：
  如果你用的是meta标签配置，将原配置的content字段补充规则：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://itch.io https://*.itch.io;">
  

  如果你是在服务端响应头配置，同样在对应CSP字段的frame-src段新增上述两个域名即可。

• 特殊场景适配
  如果你用的Jekyll主题自带CSP配置，或者用了CSP相关的Jekyll插件，直接在站点_config.yml中找到对应csp配置项，把https://itch.io、https://*.itch.io加到frame-src的允许列表即可。

• 验证修复效果
  配置修改完成后重新执行jekyll build构建站点，清空浏览器缓存后刷新页面，即可正常加载iframe资源。

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