在GitHub Pages的al-folio网站嵌入Twitter时间线遇CSP拦截问题求助

问题根源 #

al-folio模板自带Content-Security-Policy（CSP）配置，你手动添加的meta标签会被模板原生配置覆盖，且直接放宽unsafe-inline这类规则既不安全，也不是合规的解决方式。

正确解决方案 #

1. 修改模板的CSP规则 #

al-folio的CSP通常定义在_config.yml、/_includes/head.html或/_layouts/default.html中，找到已有CSP设置，添加以下信任源：

• 在script-src中加入https://platform.twitter.com
• 在frame-src中加入https://platform.twitter.com
• 在style-src中加入https://platform.twitter.com（若样式加载受阻）
• 在img-src中加入https://pbs.twimg.com（用于加载推文图片）

示例修改后的CSP配置（以meta标签形式为例，若模板用HTTP头则对应调整）：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://platform.twitter.com;
  frame-src https://platform.twitter.com;
  style-src 'self' 'unsafe-inline' https://platform.twitter.com;
  img-src 'self' data: https://pbs.twimg.com;
">

2. 保留原生嵌入代码 #

直接使用从publish.twitter.com获取的嵌入代码，粘贴到目标页面（如about.md或自定义页面）：

<a class="twitter-timeline" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets by StackOverflow</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

3. 部署验证 #

提交修改并推送到GitHub，等待Pages部署完成后，打开页面检查开发者控制台，确认无CSP报错，Twitter时间线正常加载。

手动添加meta标签无效的原因 #

al-folio模板已通过内置配置设置了CSP，后添加的meta标签优先级低于原生配置，因此会被覆盖，必须修改模板自带的CSP规则才能生效。

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