Images with frame-ancestors 'self' header can be drawn into canvas
Categories
(Core :: DOM: Security, defect)
Tracking
()
People
(Reporter: duckhiem, Unassigned)
Details
(Keywords: reporter-external)
User Agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36
Steps to reproduce:
Use these code lines to put a cross-origin frame-ancestors 'self' header image into canvas:
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The drawImage() Method</h2>
<p>Image to use:</p>
<img id="scream" src="https://www.w3schools.com/jsref/img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p><button onclick="draw()">Tryit</button></p>
<p>Click Tryit to draw the image on the canvas.</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid grey"></canvas>
<script>
function draw() {
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
</script>
Actual results:
Image shown. Stealt the image.
Expected results:
Should not.
|
||
Comment 1•1 year ago
|
||
Pretty sure that frame-ancestors only applies to framing, and can't be used to prevent an image being used from an img tag. Chrome behaves exactly the same way, as far as I can tell. Christoph, anything we're missing?
|
||
Comment 2•1 year ago
|
||
Yes, <IMG> is not a frame. The reason for XFO and frame-ancestors is to combat attacks like clickjacking on documents/web apps. If a site doesn't want their content to be shown on other domains at all they can prevent that in their server by checking the referrer.
|
|
||
Updated•1 year ago
|
Description
•