Skip to content
Permalink
Browse files

[giow] (1) Make sure canvas.toBlob() honours the origin-clean flag. A…

…lso, make it more likely this will be implemented correctly by explicitly putting the security checks in the relevant algorithms.

Affected topics: Canvas, DOM APIs, HTML, Security

git-svn-id: http://svn.whatwg.org/webapps@6879 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Jan 6, 2012
1 parent c4bfbdc commit c1b1aa27e6711e6395778aab9cf83549f53c7f42
Showing with 131 additions and 95 deletions.
  1. +42 −30 complete.html
  2. +42 −30 index
  3. +47 −35 source

<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 16 December 2011</h2>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 6 January 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
<p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> method
must run the following steps:</p>

<ol><li><p>If the canvas has no pixels (i.e. either its horizontal
<ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i>
flag is set to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception
and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->

<li><p>If the canvas has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then return the string
"<code title="">data:,</code>" and abort these steps. (This is the
shortest <a href=#data-protocol title="data protocol"><code title="">data:</code>
</ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn> method
must run the following steps:</p>

<ol><li><p>Let <var title="">callback</var> be the first
<ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i>
flag is set to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception
and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->

<li><p>Let <var title="">callback</var> be the first
argument.</li>

<li><p>Let <var title="">arguments</var> be the second and
of the inline element set to 'pre' and the 'font' property of the
inline element set to the current font of the context as given by
the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
must then return a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
<code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
the width of that inline box, in CSS pixels. <a href=#refsCSS>[CSS]</a></p>
the width of that inline box, in CSS pixels.
<!--ADD-TOPIC:Security-->
If doing these measurements requires using a font that has an
<a href=#origin>origin</a> that is not the <a href=#same-origin title="same
origin">same</a> as that of the <code><a href=#document>Document</a></code> object that
owns the <code><a href=#the-canvas-element>canvas</a></code> element (even if "using a font" means
just checking if that font has a particular glyph in it before
falling back to another font), then the method must throw a
<code><a href=#securityerror>SecurityError</a></code> exception.
<!--REMOVE-TOPIC:Security-->
Otherwise, it must return the new <code><a href=#textmetrics>TextMetrics</a></code> object.
<a href=#refsCSS>[CSS]</a></p>

<p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
with transparent black.</p>

<p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
<var title="">sh</var>)</code></dfn> method must return an
<code><a href=#imagedata>ImageData</a></code> object representing the underlying pixel data
for the area of the canvas denoted by the rectangle whose corners are
the four points (<var title="">sx</var>, <var title="">sy</var>),
(<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in canvas
coordinate space units. Pixels outside the canvas must be returned
as transparent black. Pixels must be returned as non-premultiplied
alpha values.</p>
<var title="">sh</var>)</code></dfn> method must,
<!--ADD-TOPIC:Security-->
if the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i> flag is set
to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception; otherwise, it
<!--REMOVE-TOPIC:Security-->
must return an <code><a href=#imagedata>ImageData</a></code> object representing the
underlying pixel data for the area of the canvas denoted by the
rectangle whose corners are the four points (<var title="">sx</var>,
<var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>),
(<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in canvas coordinate space units. Pixels
outside the canvas must be returned as transparent black. Pixels
must be returned as non-premultiplied alpha values.</p>

<p>If any of the arguments to <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> or
<code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>
whether or not a particular glyph is in the font in the first
place. -->

</ul><p>Whenever the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method of a
<code><a href=#the-canvas-element>canvas</a></code> element whose <i>origin-clean</i> flag is set to
false is called, the method must throw a <code><a href=#securityerror>SecurityError</a></code>
exception.</p>

<p>Whenever the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method of
the 2D context of a <code><a href=#the-canvas-element>canvas</a></code> element whose
<i>origin-clean</i> flag is set to false is called with otherwise
correct arguments, the method must throw a <code><a href=#securityerror>SecurityError</a></code>
exception.</p>

<p>Whenever the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> method of
the 2D context of a <code><a href=#the-canvas-element>canvas</a></code> element ends up using a font
that has an <a href=#origin>origin</a> that is not the <a href=#same-origin title="same
origin">same</a> as that of the <code><a href=#document>Document</a></code> object that
owns the <code><a href=#the-canvas-element>canvas</a></code> element, the method must throw a
<code><a href=#securityerror>SecurityError</a></code> exception.</p>
</ul><p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, and <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> methods
check the flag and will throw a <code><a href=#securityerror>SecurityError</a></code> exception
rather than leak cross-origin data.</p>

<p class=note>Even resetting the canvas state by changing its
<code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> or <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attributes doesn't reset
Nicolas Gallagher,
Noah Mendelsohn,
Noah Slater,
Noel Gordon,
NoozNooz42,
Ojan Vafai,
Olaf Hoffmann,
72 index

<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 16 December 2011</h2>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 6 January 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
<p>The <dfn id=dom-canvas-todataurl title=dom-canvas-toDataURL><code>toDataURL()</code></dfn> method
must run the following steps:</p>

<ol><li><p>If the canvas has no pixels (i.e. either its horizontal
<ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i>
flag is set to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception
and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->

<li><p>If the canvas has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then return the string
"<code title="">data:,</code>" and abort these steps. (This is the
shortest <a href=#data-protocol title="data protocol"><code title="">data:</code>
</ol><p>The <dfn id=dom-canvas-toblob title=dom-canvas-toBlob><code>toBlob()</code></dfn> method
must run the following steps:</p>

<ol><li><p>Let <var title="">callback</var> be the first
<ol><!--ADD-TOPIC:Security--><li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i>
flag is set to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception
and abort these steps.</p>
<!--REMOVE-TOPIC:Security-->

<li><p>Let <var title="">callback</var> be the first
argument.</li>

<li><p>Let <var title="">arguments</var> be the second and
of the inline element set to 'pre' and the 'font' property of the
inline element set to the current font of the context as given by
the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
must then return a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
<code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
the width of that inline box, in CSS pixels. <a href=#refsCSS>[CSS]</a></p>
the width of that inline box, in CSS pixels.
<!--ADD-TOPIC:Security-->
If doing these measurements requires using a font that has an
<a href=#origin>origin</a> that is not the <a href=#same-origin title="same
origin">same</a> as that of the <code><a href=#document>Document</a></code> object that
owns the <code><a href=#the-canvas-element>canvas</a></code> element (even if "using a font" means
just checking if that font has a particular glyph in it before
falling back to another font), then the method must throw a
<code><a href=#securityerror>SecurityError</a></code> exception.
<!--REMOVE-TOPIC:Security-->
Otherwise, it must return the new <code><a href=#textmetrics>TextMetrics</a></code> object.
<a href=#refsCSS>[CSS]</a></p>

<p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
with transparent black.</p>

<p>The <dfn id=dom-context-2d-getimagedata title=dom-context-2d-getImageData><code>getImageData(<var title="">sx</var>, <var title="">sy</var>, <var title="">sw</var>,
<var title="">sh</var>)</code></dfn> method must return an
<code><a href=#imagedata>ImageData</a></code> object representing the underlying pixel data
for the area of the canvas denoted by the rectangle whose corners are
the four points (<var title="">sx</var>, <var title="">sy</var>),
(<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), (<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in canvas
coordinate space units. Pixels outside the canvas must be returned
as transparent black. Pixels must be returned as non-premultiplied
alpha values.</p>
<var title="">sh</var>)</code></dfn> method must,
<!--ADD-TOPIC:Security-->
if the <code><a href=#the-canvas-element>canvas</a></code> element's <i>origin-clean</i> flag is set
to false, throw a <code><a href=#securityerror>SecurityError</a></code> exception; otherwise, it
<!--REMOVE-TOPIC:Security-->
must return an <code><a href=#imagedata>ImageData</a></code> object representing the
underlying pixel data for the area of the canvas denoted by the
rectangle whose corners are the four points (<var title="">sx</var>,
<var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <var title="">sy</var>), (<span title=""><var title="">sx</var>+<var title="">sw</var></span>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>),
(<var title="">sx</var>, <span title=""><var title="">sy</var>+<var title="">sh</var></span>), in canvas coordinate space units. Pixels
outside the canvas must be returned as transparent black. Pixels
must be returned as non-premultiplied alpha values.</p>

<p>If any of the arguments to <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData()</a></code> or
<code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code>
whether or not a particular glyph is in the font in the first
place. -->

</ul><p>Whenever the <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code> method of a
<code><a href=#the-canvas-element>canvas</a></code> element whose <i>origin-clean</i> flag is set to
false is called, the method must throw a <code><a href=#securityerror>SecurityError</a></code>
exception.</p>

<p>Whenever the <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> method of
the 2D context of a <code><a href=#the-canvas-element>canvas</a></code> element whose
<i>origin-clean</i> flag is set to false is called with otherwise
correct arguments, the method must throw a <code><a href=#securityerror>SecurityError</a></code>
exception.</p>

<p>Whenever the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> method of
the 2D context of a <code><a href=#the-canvas-element>canvas</a></code> element ends up using a font
that has an <a href=#origin>origin</a> that is not the <a href=#same-origin title="same
origin">same</a> as that of the <code><a href=#document>Document</a></code> object that
owns the <code><a href=#the-canvas-element>canvas</a></code> element, the method must throw a
<code><a href=#securityerror>SecurityError</a></code> exception.</p>
</ul><p>The <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL()</a></code>, <code title=dom-canvas-toBlob><a href=#dom-canvas-toblob>toBlob()</a></code>, and <code title=dom-context-2d-getImageData><a href=#dom-context-2d-getimagedata>getImageData()</a></code> methods
check the flag and will throw a <code><a href=#securityerror>SecurityError</a></code> exception
rather than leak cross-origin data.</p>

<p class=note>Even resetting the canvas state by changing its
<code title=attr-canvas-width><a href=#attr-canvas-width>width</a></code> or <code title=attr-canvas-height><a href=#attr-canvas-height>height</a></code> attributes doesn't reset
Nicolas Gallagher,
Noah Mendelsohn,
Noah Slater,
Noel Gordon,
NoozNooz42,
Ojan Vafai,
Olaf Hoffmann,
Oops, something went wrong.

0 comments on commit c1b1aa2

Please sign in to comment.
You can’t perform that action at this time.