83

Update: A similar request was posted on MetaSE two years ago, but still has no official response.


Researching a potential answer for a <canvas> question, I ran into a problem that breaks the snippet but has little to do with the OP's issue.

The code fails because Cross-origin resource sharing (CORS) is not enabled on Stack Exchange's image server.

Code like this:

var srcImg          = document.getElementById ("payldImg");
if (srcImg.complete)  runCanvasCode ();
else srcImg.onload  = runCanvasCode;

function runCanvasCode () {
    var imgCanvas       = $('<canvas />')[0];
    imgCanvas.width     = srcImg.width;
    imgCanvas.height    = srcImg.height;
    imgCanvas.getContext ('2d').drawImage (srcImg, 0, 0, srcImg.width, srcImg.height);

    var pixelData       = imgCanvas.getContext ('2d').getImageData (3, 3, 1, 1).data;
    console.log ("pixelData: ", pixelData);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img id="payldImg" src="https://i.sstatic.net/Gnd80.jpg">

... fails with:

"message": "SecurityError: The operation is insecure.",

or,

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

etc., depending on your browser.

The same code works fine when everything is hosted on my private server.


The prescribed workaround would add confusing complexity, if it worked at all for i.stack.imgur.com. (It doesn't, but it does just fine for i.chzbgr.com):

$("button").click ( function () {
    var srcDesired          = $("input[name=iSrc]:checked").val ();
    var abnormalImg         = new Image();
    $("#imgCntnr").append (abnormalImg);

    abnormalImg.crossOrigin = "Anonymous";  // Works for chzbgr, but not imgur.
    abnormalImg.onload      = function (zEvent) {
        var imgCanvas       = $('<canvas />')[0];
        imgCanvas.width     = abnormalImg.width;
        imgCanvas.height    = abnormalImg.height;
        imgCanvas.getContext ('2d').drawImage (abnormalImg, 0, 0, abnormalImg.width, abnormalImg.height);

        //-- CORS needed for this.
        var pixelData       = imgCanvas.getContext('2d').getImageData(3, 3, 1, 1).data;

        console.log ("pixelData: ", pixelData);
    };

    if (srcDesired === "chzbgr")
        abnormalImg.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/";  //  Works
    else if (srcDesired === "plnImgur")
        abnormalImg.src = "https://i.imgur.com/PvrNtnLm.jpg";  //  Normal fails but workaround works.
    else
        abnormalImg.src = "https://i.sstatic.net/Gnd80.jpg";  //  Fails!
} );
label, input {
    cursor: pointer;
    margin: 0.85ex 0 3ex 2ex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
    Select image source:<br>
    <label><input type="radio" value="iStack" name="iSrc"> i.stack.imgur.com</label>
    <label><input type="radio" value="chzbgr" name="iSrc" checked> i.chzbgr.com</label>
    <label><input type="radio" value="plnImgur" name="iSrc"> i.imgur.com</label><br>
    <button>Attempt canvas code</button>
</p>
<p id="imgCntnr"></p>

The above code fails with:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://i.sstatic.net/Gnd80.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

... for i.stack.imgur.com but not i.chzbgr.com, nor i.imgur.com.
But i.imgur.com restricts Methods to GET, OPTIONS, so it crashes the simple, optimal code snippet at the top of this post.



Please set CORS on i.stack.imgur.com, to allow for robust image use in concise working snippets.
(Can we be at least as good as chzbgr.com?)

5
  • sounds like imgur.com needs to do this, not the stackoverflow folks. Commented Nov 5, 2017 at 20:36
  • 14
    @DanielA.White, Stack Exchange controls this as they pay for the subdomain. Note, also, that i.stack.imgur.com is currently less permissive than i.imgur.com. Commented Nov 5, 2017 at 20:42
  • 15
    @BrockAdams: Paying for it doesn't necessarily mean controlling it. See also: police, government, local transport links, tap water supply, electricity production, military policy... Commented Nov 6, 2017 at 11:26
  • 1
    @LightnessRacesinOrbit I suppose that depends on whether you're a citizen or a dictator..... Commented Nov 6, 2017 at 16:36
  • 8
    Whether it is an Imgur thing or an SE thing doesn't really matter, this is the better course of action to be brought through SE's chain rather than scaling the walls of Imgur's office, banging on the window, and asking for it to be changed. SE has a business relationship with Imgur, we don't.
    – Compass
    Commented Nov 6, 2017 at 19:13

2 Answers 2

11

i.imgur.com works, i.stack.imgur.com does not. Stack Overflow should contact Imgur (since they are paying them) and ask them to please add the same CORS permissions for i.stack.imgur.com

It's seems kind of ridiculous that stack overflow has an image hosting plan that can't actually be used for stack overflow questions about using images in the web browser. Of course maybe there is some reason other than imgur needs to configure their servers. If there is some other reason it would be nice to know.

As it is it really seems like stack overflow needs to contact imgur and make the request or please tell us why not.

3

I reached out to imgur to fix this 2 and half years ago

Apparently Stack Overflow pays you guys to host images on Stack Overflow. Often we (the users) need to write code that uses images but the browser will block those uses if imgur's servers don't send the correct HTTP headers. The normal i.imgur.com servers send the correct headers but the i.stack.imgur.com servers do not.

Can you please ask the techies at imgur to configure the i.stack.imgur.com servers to send the correct CORS headers (same as the i.imgur.com servers) so that we can use the images in our code snippets on stack overflow?

Thank you

enter image description here

Their response

Thanks so much for writing in to share your thoughts here.

I have let the team know about this, however I would suggest you also pass this suggestion directly to Stack.

We are always here to help if you have any other questions, comments or concerns.

This is still an issue. I answer questions on canvas and webgl related topics. Users upload images via stack overflow and those images can not be used in working answers. It seems like a simple 3 minute email from Stack Oveflow management to Imgur would fix this issue.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .