拒绝运行JavaScript URL，因为它违反了以下内容安全策略指令

Question

我想在Linkedin页面的chrome-console中运行js脚本。 该脚本需要获取一个数组并下载该数组的.csv文件。 当我在google.com或任何其他网站上运行时，它运行正常。 但是当我在Linkedin上运行时，我收到了这个错误：

拒绝运行JavaScript URL，因为它违反了以下内容安全策略指令： "script-src 'report-sample' 'sha256-6gLjSWp3GRKZCUFvRX5aGHtECD1wVRgJOJp7r0ZQjV0=' 'unsafe-inline' static.licdn.com sclnkd.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 scexp1.licdn.com scexp2.licdn.com static-lcdn.licdn.com sclcdn.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/" 。
请注意，如果源列表中存在hash或nonce值，则忽略'unsafe-inline' 。

这是我试图运行的代码：

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(); 

我试图寻找类似的情况，但找不到解决方法。

Answer 1

通过使用以下代码使用不违反CSP的不同方法解决问题：

此函数接收2D数组并以适当的格式返回String以便稍后创建csv文件：

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;
}

使用返回String，我们将其发送到此函数：

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);
}

所以在主要的看起来像这样：

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

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

尽管如此，如果有人能够更好地向我解释这个实际工作的原因是什么，而另一个人不会让我感到满意，那么它的效果很好。

Answer 2

当您在控制台中为特定网站执行某些脚本时，您可以在该网站的上下文中执行它。

在linkedin网站上，可能会有一些标准方法的覆盖，例如覆盖appendChild，并且他们重​​新实现了这些方法以进行额外的检查，以确保某人不会从外部执行不需要的脚本。

此外，linkedin可能有监听DOM更改的脚本，如果您想在DOM中放置一些奇怪的东西，可能会阻止它。

更新：我看到执行有问题

link.click()

在linkedin页面上，所以他们以某种方式阻止在csv格式的链接元素上以编程方式使用点击...

更新：

我看到linkedin使用：内容安全策略请在此处阅读更多相关信息： https ： //content-security-policy.com/

所以他们可能不允许在浏览器中动态生成csv。