javascript - 无法理解如何避免 JavaScript 中的跨源污染

Question

我在以下代码中收到跨源污染错误，但我不明白为什么。我认为当您尝试从外部服务器提取图像，但该图像来自本地目录时，会发生跨域污染。

var image = new Image();
$(image).on("load", function() {
    ctx.drawImage(image, 0, 0, 1080/scale, 1920/scale);

    /*Error occurs here */
    var imageData = ctx.getImageData(0, 0,
        this.width / scale,
        this.height / scale);
    var pixels = imageData.data;

    ...
});
image.src = "test2.jpg"; 

Answer 1

本地文件系统被声明为跨源的，并且会污染 Canvas 。鉴于您最敏感的信息可能位于本地文件系统上，这是一个很好的声明。

以下是遵守 CORS 安全性的一些方法:

• 在本地计算机上安装 Web 服务器，并在该服务器上提供图像和 .html/.css/.js 文件。 PHP 和 IIS 都有优秀的本地版本。

• 将您的图像放在符合 CORS 的托管服务上(imagur.com 就是其中之一)

• 对于小型项目，有时可以将图像和网页文件全部放在桌面上。