| <!doctype html> |
| <title>CSS url() reference filter may taint the canvas: tainting</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <svg style="display: block; width: 0; height: 0"> |
| <defs> |
| <filter id="drop-shadow"> |
| <feOffset dx="0" dy="10" result="offset" in="SourceAlpha"></feOffset> |
| <feFlood flood-color="currentcolor"></feFlood> |
| <feComposite in2="offset" operator="in"></feComposite> |
| <feMerge> |
| <feMergeNode></feMergeNode> |
| <feMergeNode in="SourceGraphic"></feMergeNode> |
| </feMerge> |
| </filter> |
| <filter id="image"> |
| <feImage xlink:href="#circle" /> |
| <feColorMatrix type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1" /> |
| </filter> |
| <filter id="merge-clean"> |
| <feColorMatrix type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1" /> |
| <feMerge> |
| <feMergeNode></feMergeNode> |
| <feMergeNode in="SourceGraphic"></feMergeNode> |
| <feMergeNode in="SourceAlpha"></feMergeNode> |
| <feMergeNode in="FillPaint"></feMergeNode> |
| <feMergeNode in="StrokePaint"></feMergeNode> |
| </feMerge> |
| </filter> |
| <circle id="circle" r="100" fill="blue" /> |
| </defs> |
| </svg> |
| <script> |
| function assert_tainted(performCommands, description) { |
| let ctx = document.createElement('canvas').getContext('2d'); |
| performCommands(ctx); |
| assert_throws_dom("SecurityError", () => ctx.getImageData(0, 0, 1, 1), description); |
| } |
| |
| // SVG reference filters taint the canvas according to |
| // https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives |
| |
| test(function() { |
| assert_tainted(ctx => { |
| ctx.filter = 'url(#drop-shadow)'; |
| ctx.fillRect(5, 5, 10, 10); |
| }, 'url(#drop-shadow)'); |
| |
| assert_tainted(ctx => { |
| ctx.fillStyle = '#0f0'; |
| ctx.filter = 'url(#drop-shadow) brightness(0.5) url(#merge-clean)'; |
| ctx.fillRect(5, 5, 10, 10); |
| }, 'url(#drop-shadow) brightness(0.5) url(#merge-clean)'); |
| |
| assert_tainted(ctx => { |
| ctx.fillStyle = '#0f0'; |
| ctx.filter = 'brightness(0.5) url(#drop-shadow)'; |
| ctx.fillRect(5, 5, 10, 10); |
| }, 'brightness(0.5) url(#drop-shadow)'); |
| |
| assert_tainted(ctx => { |
| ctx.fillStyle = '#0f0'; |
| ctx.filter = 'brightness(0.5) url(#drop-shadow) brightness(0.5)'; |
| ctx.fillRect(5, 5, 10, 10); |
| }, 'brightness(0.5) url(#drop-shadow) brightness(0.5)'); |
| |
| assert_tainted(ctx => { |
| ctx.fillStyle = '#0f0'; |
| ctx.filter = 'brightness(0.5) url(#drop-shadow) brightness(0.5)'; |
| ctx.fillRect(5, 5, 10, 10); |
| }, 'brightness(0.5) url(#drop-shadow) brightness(0.5)'); |
| |
| assert_tainted(ctx => { |
| ctx.filter = 'url(#image)'; |
| ctx.fillRect(5, 5, 10, 10); |
| }, 'url(#image)'); |
| }); |
| </script> |
