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

Question

I'm trying to write a VSTS Extension that generates a report and provides a link to download the data as a CSV.

I have a string that is being saved to a 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)
)}

This works as expected in Chrome, but in Firefox the action is blocked due to the Content Security Policy:

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

I'm completely new to CSP, but I'm actually not sure where the issue is. According to the frame-src policy (which seems to be applying to my content that's rendered within an iframe in VSTS), I'm not sure why this is being blocked:

frame-src * tfs:;

It seems to me that frame-src is allowing *, in other words allowing any content, or tfs:

I don't see a problem with script-src either:

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

Here's the full CSP that I'm seeing from the headers:

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;

It appears like I should be using a different method to accomplish this task properly rather than the approach I've taken, but I'm not sure where to go from here. Preemptive shout out to some folks at Microsoft who have been great about monitoring the VSTS tag in SO and providing helpful information, thank you!

score 0 · Accepted Answer · answered Dec 13 '17 at 16:47

Instead of the hacky anchor solution, I should have just been calling window.open with the encoded content:

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

A major downside to this is that a filename can't be set to my knowledge.

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

1 Answers1