hitContext.getImageData causing crash

[iszard]

Setting input.pixelPerfectOver=true on a Phaser.Sprite object causes the following error :
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

First yes my Access-Control-Allow-Origin "*" is set properly.

Secondly if I turn pixelPerfectOver=false I have no problems with the displaying and interacting through input/events on the Phaser.Sprite.

Example Source:

var i, iTot,
    bPosX = [35, 265, 35, 265],
    bPosY = [75, 75, 305, 305],
    cBtn;

iTot = bPosX.length;
for (i=0;i<iTot;i++) {
    cBtn = game.add.sprite(bPosX, bPosY, 'BuyCards', 'BuyCard'+(i+1)+'.png');
    cBtn.inputEnabled = true;
    cBtn.input.pixelPerfectOver = true;  // <-- commenting out this line will remove the error
    cBtn.input.useHandCursor = true;
    cBtn.events.onInputUp.add(this.btnUp, this);
    this.cardSelAr.push(cBtn);
}

[iszard]

Problem was resolve by adding:
this.load.crossOrigin = 'Anonymous';

in the create: function() {} of my first state, in this case "Boot.js" as per the Phaser Game template.

[photonstorm]

This is a local configuration issue, rather than a Phaser one. If you've tainted the canvas somehow (or in this case the image it's trying to read from) then this error will occur. There's nothing Phaser itself can do about it, you just have to correctly handle CORs loading of the assets in the first place.

[iszard]

I already stated the local configuration isn't the issue at all here. Even the comments in the phaser.js also point out that crossOrigin param on the Loader object needs to be changed.

I've got'n this same response everywhere its a CORs issue... and it isn't. It only happens on hitcontext but whatever it was resolved but updating and any following devs can see this answer instead of having to argue on every form to fight through this issue.

This was brought up in :
#1684

By you photonstorm.

[photonstorm]

#1684 is unrelated to this. That is about the base object not actually having a texture that can be pixel checked (i.e. a BitmapText object) that maps to what is displayed on-screen, hence why it was flagged as a feature request and not an issue.

Your issue however is 100% CORs related I'm afraid. From MDN:

What is a "tainted" canvas?

"Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.

This protects users from having private data exposed by using images to pull information from remote web sites without permission."

Which is exactly what happens here. The canvas is tainted because the image wasn't CORs loaded, and doing a pixel perfect hit test uses getImageData (as it needs to read pixel values from the image), which is what throws the browser warning. The canvas was always tainted, you just didn't notice it because browsers don't complain about it until you try to do something they may consider a security risk.

There are ways around it, sites like https://crossorigin.me/ exist for example, or if you have control over the origin server then setting the correct response headers works too. Either way it's local to your server set-up and is nothing Phaser can check for.