Canvas drawing in a sandboxed iframe – Blancer.com Tutorials and projects

I’m trying to draw into a canvas that is located in a sandboxed iframe. For some reason, this only works if allow-scripts is added to the sandbox white-list. I’ve tried finding any documentation on this limitation but couldn’t. What’s the reason? Is there a way to circumvent this? I cannot leave allow-scripts enabled because there the rest of the iframe content is based on untrusted input.

Canvas draw commands do seem pretty safe on the first glance but I must be missing some potential vector of attack so that browser vendors have decided to not allow doing so…

You can reproduce by accessing index.html on a server (e.g. python3 -m http.server). Opening index.html directly in the browser (as a file) won’t work because of an invalid origin in that case.

Any pointers or even better, solutions, are greatly appreciated.

index.html

<html lang="en">

<head>
    <script>
        function updateCanvas() {
            const ctx = document.querySelector('iframe').contentDocument.querySelector('canvas').getContext('2d')
            ctx.fillRect(25, 25, 100, 100);
        }
    </script>
</head>

<body>
    <iframe sandbox="allow-same-origin allow-scripts" src="./iframe.html"></iframe>

    <button onclick="updateCanvas()">Draw</button>
</body>

</html>

iframe.html

<html lang="en">
<body><canvas></canvas></body>
</html>