内容安全策略阻止从 VSTS 扩展下载生成的 CSV 文件

Question

我正在尝试编写一个生成报告并提供 link 以将数据下载为 CSV 的 VSTS 扩展。

我有一个正在保存到 CSV 的字符串：

$("#downloadReportButton".click(function () {
  var csvString = getCSV()
  var a = window.document.createElement('a')
  a.href = 'data:attachment/csv,' + encodeURI(csvString)
  a.download = 'test.csv'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
)}

这在 Chrome 中按预期工作，但在 Firefox 中该操作因内容安全策略而被阻止：

Content Security Policy: The page’s settings blocked the loading of a resource at data:attachment/csv,%22Repository%22,%22... (“frame-src * tfs:”).

我是 CSP 的新手，但实际上我不确定问题出在哪里。根据 frame-src 政策（这似乎适用于我在 VSTS 的 iframe 中呈现的内容），我不确定为什么会被阻止：

frame-src * tfs:;

在我看来frame-src允许*，换句话说允许任何内容，或者tfs:

我也没有发现 script-src 有问题：

script-src 'unsafe-inline' *.visualstudio.com https://cdn.vsassets.io *.ensighten.com *.microsoft.com *.google-analytics.com 'nonce-bbKMGh5rKZ1WElrqfMYBVQ==';

这是我从 headers 看到的完整 CSP：

default-src 'none'; font-src *.visualstudio.com *.vsassets.io *.microsoft.com *.sharepointonline.com; style-src 'unsafe-inline' *.visualstudio.com cdn.vsassets.io; connect-src *.visualstudio.com wss://*.visualstudio.com *.vsassets.io *.blob.core.windows.net; img-src http: https: blob: data:; script-src 'unsafe-inline' *.visualstudio.com https://cdn.vsassets.io *.ensighten.com *.microsoft.com *.google-analytics.com 'nonce-bbKMGh5rKZ1WElrqfMYBVQ=='; child-src * tfs:; frame-src * tfs:; media-src *.visualstudio.com *.vsassets.io *.microsoft.com *.sharepointonline.com;

看来我应该使用不同的方法来正确完成此任务，而不是我已经采用的方法，但我不确定从这里该去哪里。先发制人地向 Microsoft 的一些人大声疾呼，他们非常擅长监视 SO 中的 VSTS 标记并提供有用的信息，谢谢！

Answer 1

而不是 hacky 锚点解决方案，我应该只是用编码内容调用 window.open：

$("#downloadReportButton".click(function () {
  var csvString = getCSV()
  var attachment = 'data:attachment/csv,' + encodeURI(csvString)
  window.open(attachment)
)}

据我所知，一个主要缺点是无法设置文件名。

内容安全策略阻止从 VSTS 扩展下载生成的 CSV 文件

Content Security Policy preventing download of generated CSV file from VSTS Extension

content-security-policy

azure-devops

azure-devops-extensions