Content Security Policy(CSP)配置导致CSV文件下载异常问题求助

你遇到的下载结果为HTML的问题，是CSP的导航类校验规则拦截了下载请求导致的：父应用配置的CSP头没有放行子应用的下载请求地址，请求被拦截后父应用返回了错误页/首页的HTML内容，最终被当作下载文件返回。

解决方案 #

方案1：调整父应用CSP配置（推荐优先排查）

打开浏览器控制台的「控制台」标签，刷新页面后触发下载，能看到明确的CSP违规报错，会标注具体违反的指令，按报错调整即可，常见需要调整的配置如下：

• 增加navigate-to指令白名单，放行子应用域名/CSV文件所属域名：
  示例CSP配置补充：navigate-to 'self' 你的子应用部署域名;
• 如果你当前的CSP没有配置navigate-to，会默认用default-src的规则兜底，确保子应用域名也在default-src的白名单内即可。

方案2：修改下载实现绕开导航类CSP限制

如果没有权限修改父应用的CSP配置，可以调整下载代码避开触发CSP导航校验：

1. 优先移除a标签的target="_blank"属性，新窗口打开的下载请求会被CSP单独校验，直接当前页触发下载即可，修改后代码：

<a download="template.csv" href="./template.csv">Download Template</a>

2. 若上述修改仍无效，可以改用Blob本地生成文件的方式实现下载，完全不触发跨站导航请求：

function downloadCsvTemplate() {
  // 可先通过fetch请求拿到CSV文件实际内容再处理
  const csvTemplate = `字段1,字段2,字段3
示例值1,示例值2,示例值3`
  const blob = new Blob([csvTemplate], { type: 'text/csv;charset=utf-8;' })
  const downloadUrl = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = downloadUrl
  link.download = 'template.csv'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(downloadUrl)
}

绑定触发即可：

<a href="javascript:void(0)" onclick="downloadCsvTemplate()">Download Template</a>

如果该方案触发Blob相关的CSP拦截，在父应用CSP中补充child-src blob:; object-src blob:;即可。

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