从浏览器扩展程序访问图像和视频数据（vs CORS） [英] Access to image and video data from browser extension (vs CORS)

问题描述

我试图编写一个浏览器扩展，它执行一些图像处理，但我需要访问的图像数据。我的方法是创建一个隐藏的画布元素，通过 drawImage 绘制图像和视频，然后读取像素数据与 getImageData 。这工作很好，但在很多页面上一半的内容被CORS错误拒绝。

我仍然困惑为什么CORS存在数据，但是如果数据是在客户端的计算机上是不是被盗已经？：S）。所有它似乎导致是延迟的hacks像JS脚本注入。所以1.它不工作，因为它太复杂，每个浏览器正确警察和2.开发人员被惩罚，必须编写浏览器特定的解决方法。所以我认为我一定有错误的想法，因为这看起来很蠢。

回想一下，我认为扩展的想法可以做一些图像处理非常正常，不是恶意，因此请不要回复不，为了安全起见，您不应该这样做。

怀疑浏览器将该扩展程序视为异常，以致可能会尝试进行恶意的操作。 如何确保浏览器客户端需要这些功能，并授予我访问图片和视频内容的权限？我已经拥有DOM的完全访问权限，还有一些额外的功能任何差异??

是否有另一种方法从扩展程序获取图像/视频数据？

解决方案

在向清单文件添加了正确的权限之后，您可以处理跨原始数据，而不受同一来源策略的阻碍。在背景页或扩展程序中的任何其他网页上，您都可以获得有关您的描述如下逻辑：

  // background.js 
 var canvas = document.createElement（'canvas'）; 
 var context = canvas.getContext（'2d'）; 
 var image = document.createElement（'img'）; 
 image.onload = function（）{
 context.drawImage（image，0，0）; 
 // Demo：显示图片
 window.open（canvas.toDataURL（'image / png'））; 
}; 
 image.src ='http://stackoverflow.com/favicon.ico'; 
  

这是此特定演示的最小清单文件：

  {
name：获取图像数据，
version：1，
manifest_version：2 ，
background：{
scripts：[background.js] 
}，
permissions：[
http：// stackoverflow .com / favicon.ico，
http://cdn.sstatic.net/stackoverflow/img/favicon.ico
] 
} 
  

第二个权限是必要的，因为 http：// stackoverflow。 com / favicon.ico 重定向到 http://cdn.sstatic.net/请注意，代码不可在内容脚本，因为DOM是共享的，并且Chrome无法为内容脚本提供无限制的来源访问权限。

根据你真正想要的，你也可以尝试使用 XMLHttpRequest 以原始形式获取图像数据，并以任何你想要的方式处理它。此方法也适用于内容脚本，它们的优点是更高效，并且还保留了图像的字节（使用canvas方法，图像在被转换为数据URL之前由浏览器解析和处理） 。

  var x = new XMLHttpRequest（）; 
 x.responseType ='blob'; 
 x.open（'get'，'http://stackoverflow.com'）; 
 x.onload = function（）{
 var fileReader = new FileReader（）; 
 fileReader.onloadend = function（）{
 // fileReader.result是一个数据URL（字符串）
 window.open（fileReader.result）; 
}; 
 // x.response是一个Blob对象
 fileReader.readAsDataURL（x.response）; 
}; 
 x.send（）; 
  

I'm trying to write a browser extension that does some image processing but I need access to the image data. My approach was to create a hidden canvas element, draw images and video to it via drawImage, and then read the pixel data with getImageData. This works just fine but on many pages half the content is denied by CORS errors.

I'm still confused as to why CORS exists (something along the lined of not stealing data, but then if the data is on the client's computer isn't it "stolen" already? :S). All it seems to lead to is retarded hacks like JS script injection. So 1. it doesn't work because it's too complicated for every browser to police correctly and 2. devs are punished and have to write browser-specific workarounds. So I'm thinking I must have the wrong idea because this seems pretty stupid.

Taking a step back, I think the idea of an extension that can do some image processing is perfectly normal and not malicious so please do not reply with "no, you shouldn't be doing this for security reasons".

I suspect that the browser is treating the extension as something foreign that could be trying to do malicious things. How can I reassure the browser that the client wants these features and have it grant me access to the image and video content? I already have full access to the DOM, how is a little bit extra going to make any difference??

Is there another way to get image/video data from an extension?

解决方案

After adding the right permissions to the manifest file, you can deal with cross-origin data as without being hindered by the same origin policy. In a background page or any other page within the extension's process, you can get a working demo of your described logic as follows:

// background.js
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var image = document.createElement('img');
image.onload = function() {
    context.drawImage(image, 0, 0);
    // Demo: Show image
    window.open(canvas.toDataURL('image/png'));
};
image.src = 'http://stackoverflow.com/favicon.ico';

Here is a minimal manifest file for this specific demo:

{
    "name": "Get image data",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "http://stackoverflow.com/favicon.ico",
        "http://cdn.sstatic.net/stackoverflow/img/favicon.ico"
    ]
}

The second permission is necessary because http://stackoverflow.com/favicon.ico redirects to http://cdn.sstatic.net/stackoverflow/img/favicon.ico.

Note that the code does not work in content scripts, because the DOM is shared and Chrome cannot offer unrestricted origin access to content scripts only.

Depending on what you really want, you could also just try to get the image data in raw form using XMLHttpRequest, and process it in any way you desire. This method also works in content scripts, and their advantage is that it is more efficient, and also preserves the bytes of the image (with the canvas method, the image is parsed and processed by the browser before it is converted to a data URL).

var x = new XMLHttpRequest();
x.responseType = 'blob';
x.open('get', 'http://stackoverflow.com');
x.onload = function() {
    var fileReader = new FileReader();
    fileReader.onloadend = function() {
        // fileReader.result is a data-URL (string)
        window.open(fileReader.result);
    };
    // x.response is a Blob object
    fileReader.readAsDataURL(x.response);
};
x.send();

这篇关于从浏览器扩展程序访问图像和视频数据（vs CORS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！