search

phaserjs / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
https://phaser.io
MIT License
37.16k stars 7.1k forks source link

Possibility to resolve CanvasFeatures based on img rather than data: #6835

Closed fliespl closed 4 months ago

fliespl commented 5 months ago

Currently https://github.com/phaserjs/phaser/blob/master/src/device/CanvasFeatures.js revolves possible features based on data:image loading capability. Is there a way to implement it differently so that phaser would work with strict content security policy?

This method causes issues with following CSP: default-src 'self'; img-src 'self'

Same applies to default,white.missing images, which allow only loading base64 values.

photonstorm commented 5 months ago

How else could it be implemented? The Image data has to be created from something and those files can't be external. Unless there is another way to encode them that doesn't trip CSP?

What environment are you working in that requires this btw?

fliespl commented 5 months ago

It's an gamification app for banking sector and their requirements are getting stricter every year :)

What actually does this check do? Maybe it's possible to override it locally (our fork) and set booleans based on other conditions like browser (even if it's not error prone)?

Alternatively, maybe it would be possible to allow custom function here from config? This way we can force it to true since we only allow modern browsers (while keeping possibility to use released version).

photonstorm commented 5 months ago

The Canvas Detect isn't really required anymore. That's for legacy Samsung devices where they had a glaring bug in their canvas implementation that was unable to detect or use blend modes properly.

The default images are a different matter, though - they are used by the Texture Manager in lots of internal cases (for Shape rendering in WebGL, when images are missing, etc). The values in the game config could be set to nothing, so it would remove the data elements (which is what trips CSP) - but you would also need to override this part of the Texture Manager (inside the boot method):

        this.addBase64('__DEFAULT', config.defaultImage);
        this.addBase64('__MISSING', config.missingImage);
        this.addBase64('__WHITE', config.whiteImage);

Then it won't try to create images from empty config data. However, you do need to provide images that use those keys - but you could provide them externally, as long as they are added to the Texture Manager as part of its boot process it will be happy with that.

photonstorm commented 4 months ago

@zekeatchan let's allow them to set null as the config values for the default images. If null, don't call addBase64. Add to the docs that they must provide these 3 default images as part of the boot process.

fliespl commented 4 months ago

Actually we have been able to pass relative paths and it worked since addBase64 also works with relative paths

zekeatchan commented 4 months ago

Thank you for submitting this feature request. We have implemented this and the feature has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.