
Pico: Client-side JavaScript library for high-precision viewport screenshots - mmoez
https://github.com/nikersify/pico
======
bilalq
This is really interesting. I don't know anything about `foreignObject`, but
are there possibly security implications of a tool like this? Normally, the
computedStyles properties in CSS mask their true values from your JS code so
you can't evaluate based on rules like the `:visited` pseudo-selector to
identify which URLs are in a user's history.

Are things like that also masked from this SVG rendering? I'm assuming yes,
since the library itself is JS. Unless the SVG just gets passed stylesheet
references and is able to work on those directly?

~~~
lioeters
There's a browser feature called "tainted canvas", which throws a
SecurityError if any of the content came from external sources.

From [https://developer.mozilla.org/en-
US/docs/Web/HTML/CORS_enabl...](https://developer.mozilla.org/en-
US/docs/Web/HTML/CORS_enabled_image)

> Because the pixels in a canvas's bitmap can come from a variety of sources,
> including images or videos retrieved from other hosts, it's inevitable that
> security problems may arise.

> As soon as you draw into a canvas any data that was loaded from another
> origin without CORS approval, the canvas becomes tainted. A tainted canvas
> is one which is no longer considered secure, and any attempts to retrieve
> image data back from the canvas will cause an exception to be thrown.

To get around this, the Pico library includes a (big) list of workarounds, to
download and inline images, stylesheets, etc. Then:

> The returned DOM is inserted into an <iframe>, serialized into XML,
> converted into a data URL, put into an Image, which is then rendered onto a
> <canvas>.

I do wonder though, couldn't the same techniques be used by a malicious script
to also get around the "tainted canvas" issue..?

