JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<button id="test">Test CORS when image appears</button>
<br>
<canvas id="canvas" width=360 height=281></canvas>

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = new Image();
// add a tainted property to the image (initialize it to true)
img.tainted = true;
img.onload = function () {
    ctx.drawImage(img, 0, 0);
    // try to violate CORS
    var i = ctx.getImageData(1, 1, 1, 1);
    // if we get here, CORS is OK so set tainted=false
    img.tainted = false;
};
img.src = "http://pp-group.co.uk/wp/wp-content/uploads/2013/10/house-illustration-web.gif";


$("#test").click(function () {
    if (!img.complete) {
        alert("Wait...still loading");
        return;
    }
    if (!img.tainted) {
        alert("This image passes CORS security");
    } else {
        alert("OOPS! This image failed CORS security");
    }
});