I guess this question is mainly targeted for webdev crowd out there, but you never know
Let’s say you have a need to block <canvas> element (ad-block style), and i don’t mean block whole canvas - i mean specific element inside<canvas> tag.
Assuming that you don’t have access to back-end, but see such canvas only from user perspective…Is there a way to somehow inspect guts of <canvas> to search & destroy such element by class / id / data attribute or whatever else?
I’m pretty sure the answer is no (except in perhaps very specific circumstances). In general, canvas is just an array of pixels. The information about the elements is not there, except before they are drawn in JavaScript code. The actual shapes drawn on the canvas do not have the class, id, etc…
That’s why you can’t, for example, select text drawn on the canvas, because it is no longer a string of characters, but an array of pixels.
I believe technically it’s doable with greasemonkey js rules if given element has class / id / data attribute, you can hijack calls to draw such element before it…you know.
Problem is targeting such elements from user perspective…
Again, that depends on very specific circumstances, there is no general way to do this.
You can generate the contents of the canvas on the backend, and just transmit the pixels to the browser. In that case, there is no way to know what these pixels represent.
Or you can have a WebAssembly program generate the contents of the canvas.
It does not have to be a simple frontend JavaScript program, where the graphics on the canvas is drawn using primitives for which there exists a corresponding JavaScript function.
Once the canvas is filled, there is, in general, no way to tell what is drawn on it (apart from a human being or an A.I. actually looking at the image and identifying what is on it). So your only hope is intercepting the process of generating the pixel data, and there is no general way to do this, it depends on the specific case.
Yes. And it if the code is obfuscated enough, it doesn’t even have to have the word “canvas” or “context” near the relevant code, as canvas context is just a JavaScript object that can be aliased by any variable name.
Yeah, there is no easy way to do this. And if you do not have access to the code generating the canvas data, it’s really difficult. It’s like me sending you a PNG image and telling you to block only certain elements in that image. A canvas is like a bitmap image, an array of pixels. Apart from doing it manually, or by some sophisticated AI magic, there is no general way to do that.
I’ve used my own intellect to beautify some js code and scope out that offender!
Now it’s time for some nice GreaseMonkey hijacking code, but that’s another story!