HTML tainted canvas limitation
The website requires a canvas with images from a different origin which does not allow Cross Origin Resource Sharing (CORS).
A canvas is considered 'tainted' by a browser if it has loaded images from a different origin that does not set the Access-Control-Allow-Origin header correctly. For security reasons, browsers block access to such tainted canvases and thus Unblu cannot correctly process the contents of such a canvas.
What do users see?
The consultant sees a blank area where the contents of a tainted canvas would be.
Is it severe?
Severity depends on how important the content of the canvas is for using the website or offering support. If it is an ad or something similar, then the co-browsing experience is not significantly affected. If the canvas contains important features of the website, those features will not be available for co-browsing.
Is there a workaround?
Yes, in fact there are several:
-
Enable Access-Control-Allow-Origin headers to correctly allow cross resource sharing on the Origin where the image is loaded from and programmatically set the image’s crossOrigin property to “Anonymous” (i.e., in Javascript: var img = new Image(); img.src = "http://other-server.com/image.jpg"; img.crossOrigin = "Anonymous";)
-
Use your regular website server to also serve the corresponding images used in canvases.
-
Use a proxy on your website server to proxy image requests to the 3rd party server.
How do I detect this on a website?
Canvasses usually are used programmatically (i.e., with JavaScript) therefore there is no straightforward way to detect this issue. Consult with your Front-End Developers about this issue.
Further information
Further information about tainted canvasses is available at MDN