Question

我正在尝试在Linkedin页面的Chrome浏览器控制台中运行js脚本。该脚本需要获取一个数组并下载该数组的.csv文件。当我在google.com或任何其他网站上运行它时，它运行正常。但是，当我在Linkedin上运行它时，出现此错误：

拒绝运行JavaScript URL，因为它违反了以下“内容安全策略”指令：    "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/"。
  请注意，如果源列表中存在哈希值或随机数，则'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;
}

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

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。

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

2 个答案: