三个JS污染了画布和CORS [英] THREE JS tainted canvas and CORS

问题描述

我正在尝试渲染具有从其他域获得的背景图像的 THREE.js 场景。

I'm trying to render a THREE.js scene having a background image obtained from a different domain.

我收到了 受污染的画布错误 ，因为该图像未获得CORS批准，因此操纵了画布会导致安全错误。

I was getting a tainted canvas error because the image did not have CORS approval and as a result manipulation of the canvas results in a security error.

阅读此答案后，我将 THREE.TextureLoader（）设置为允许跨原点加载：

After reading this answer, I set the THREE.TextureLoader() to allow cross origin loading:

var loader = new THREE.TextureLoader();
//allow cross origin loading
loader.crossOrigin = '';
var texture = loader.load(
   url_to_image,
   // Function when resource is loaded
   function ( texture ) {
     var backgroundMesh = new THREE.Mesh(
       new THREE.PlaneGeometry(2, 2, 0),
       new THREE.MeshBasicMaterial({
            map: texture
        })
      );
     backgroundMesh.material.depthTest = false;
     backgroundMesh.material.depthWrite = false;

     // create your background scene
     backgroundScene = new THREE.Scene();
     backgroundCamera = new THREE.Camera();
     backgroundScene.add( backgroundCamera );
     backgroundScene.add( backgroundMesh );

   },
   // Function called when download progresses
   function ( xhr ) {},
   // Function called when download errors
   function ( xhr ) {}
);

但是，我现在收到CORS错误：在'url_to_image中访问图像来源'my_domain'中的'已被CORS策略阻止：所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问源 my_domain。

However, I now get the CORS error: Access to Image at 'url_to_image' from origin 'my_domain' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'my_domain' is therefore not allowed access.

来自此答案似乎暗示某些域未授予在WebGL浏览器中使用该图像的权限，我如何才能找到这种情况？

Comments from this answer seem to suggest that some domains do not give permission to use the image in the browser in WebGL, how can I find out if that is the case?

如果我要从中提取映像的域不是问题，我该如何使其正常工作？

If it's not a problem with the domain I'm pulling the image from, how can I get this to work?

推荐答案

使用服务器将图像请求转发到资源域。

Use your server to forward your image request to the resource domain.

就像这样：

您的浏览器===>您的服务器===>图片

Your browser ===> Your server ===> Image

您当前正在做的是直接在浏览器中获取图片，这意味着您正在跨越两个域（一个是您的服务器，另一个是图像资源域）。但是通过使用服务器转发请求，浏览器仅将请求发送到您的服务器，从而避免违反CORS。

What you're currently doing is directly fetching the image in the browser, which means you're crossing two domains (one is your server and the other is the image resource domain). But by using a server to forward your request, your browser sends requests to only your server, which avoids violating CORS.

跨域不安全，大多数跨域禁止浏览器。但是，您可以通过配置浏览器来手动禁用CORS限制。例如，在Safari中，您可以在开发 菜单中选择禁用跨域限制。

Crossing domains is not secure and forbidden by most of the browsers. However, you can manually disable the CORS restriction by configuring your browser. For example, in Safari, you can select Disable Cross-Origin Restrictions in Develop menu.

这篇关于三个JS污染了画布和CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！