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

【问题标题】：Content Security Policy preventing download of generated CSV file from VSTS Extension内容安全策略阻止从 VSTS 扩展下载生成的 CSV 文件
【发布时间】：2017-12-13 15:40:51
【问题描述】：

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

我有一个正在保存到 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 中，由于内容安全策略，该操作被阻止：

内容安全政策：页面设置阻止加载数据中的资源：附件/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==';

这是我从标题中看到的完整 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 标签并提供有用的信息，谢谢！

【问题讨论】：

标签： azure-devops content-security-policy azure-devops-extensions

【解决方案1】：

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

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

这样做的一个主要缺点是我无法设置文件名。

【讨论】：