Refused to run the JavaScript URL because it violates the following Content Security Policy directive

Question

I am trying to run js script in the chrome-console of Linkedin page. The script needs to take an array and download .csv file of the array. When I run it on google.com or any other website, it works fine. But when I run it on Linkedin I got this error:

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'report-sample' 'sha256-6gLjSWp3GRKZCUFvRX5aGHtECD1wVRgJOJp7r0ZQjV0=' 'unsafe-inline' static.licdn.com s.c.lnkd.licdn.com static-fstl.licdn.com static-src.linkedin.com https://www.linkedin.com/voyager/service-worker-push.js https://platform.linkedin.com/js/analytics.js static-exp1.licdn.com static-exp2.licdn.com s.c.exp1.licdn.com s.c.exp2.licdn.com static-lcdn.licdn.com s.c.lcdn.licdn.com https://www.linkedin.com/sc/ https://www.linkedin.com/scds/ https://qprod.www.linkedin.com/sc/ https://www.linkedin.com/sw.js https://www.linkedin.com/voyager/abp-detection.js https://platform.linkedin.com/litms/utag/ https://platform.linkedin.com/litms/vendor/".
Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

That's the code I am trying to run:

rowsso = [["#: ", "Name: ", "Title: "], ["5","hi", "five"]];
let csvContentss = "data:text/csv;charset=utf-8,";
rowsso.forEach(function(rowArray){
   let row = rowArray.join(",");
   csvContentss += row + "\r\n";
}); 

var encodedUri = encodeURI(csvContentss);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF

link.click(); 

I tried to look for similar case, but couldn't find a way that fix it.

Answer 1

SOLVED the problem by using different method that doesn't violate CSP by using the following code:

This function receive a 2D Array and return String in appropriate format to later create the csv file:

function arrayToCSV (twoDiArray) {
var csvRows = [];
for (var i = 0; i < twoDiArray.length; ++i) {
    for (var j = 0; j < twoDiArray[i].length; ++j) {
        twoDiArray[i][j] = '\"' + twoDiArray[i][j] + '\"';  // Handle elements that contain commas
    }
    csvRows.push(twoDiArray[i].join(','));
}

var csvString = csvRows.join('\r\n');
return csvString;
}

With the return String, we send it to this function:

function downloadString(text, fileType, fileName) {
  var blob = new Blob([text], { type: fileType });

  var a = document.createElement('a');
  a.download = fileName;
  a.href = URL.createObjectURL(blob);
  a.dataset.downloadurl = [fileType, a.download, a.href].join(',');
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
}

So in the main in would look like this:

rowsso = [["#: ", "Name: ", "Title: "], ["5","hi", "five"]];

twoDArrStr = arrayToCSV(rowsso);
downloadString(twoDArrStr, "csv" , "csvFile.csv");

It works good, nevertheless, if someone can explain me better what is the reason this actually work and the other one doesn't I would be happy.

Answer 2

When you executing some script in console for specific website you execute it in the context of that website.

On linkedin website there may be some overrides for some standard methods, like override for appendChild and they have reimplemented such methods to do additional checking to make sure that someone will not execute unneded script from outside.

Also linkedin may have script that listen for DOM changes and if you want to place something strange into DOM they may prevent that.

UPDATE: i see that there is problem with execution of

link.click()

on linkedin page, so they somehow prevent using click programmatically on link elements with csv format...

UPDATE:

I see that linkedin use: Content Security Policy Please read more about it here: https://content-security-policy.com/

So they may not allow to generate csv on the fly in browser.