We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How can I allow local images to be read on canvas since FF60?

more options

I am a developer and I want to test canvas and JavaScript locally. Previously I have been able to interact with the canvas when the canvas accesses local graphics. Now I get this error: uncaught exception: An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images. Not sure which version this changed - I think 60.

This has always been the case in Chrome and for Chrome we use a --allow-file-access-from-files flag when starting the Chrome app. Is there a about:config setting to allow use to continue to develop and teach workshops, etc. locally without having to go through hoops?

If there is currently no way - can you please add a way. Firefox is my default browser - would love to keep it that way!

Thanks!

I am a developer and I want to test canvas and JavaScript locally. Previously I have been able to interact with the canvas when the canvas accesses local graphics. Now I get this error: uncaught exception: An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images. Not sure which version this changed - I think 60. This has always been the case in Chrome and for Chrome we use a --allow-file-access-from-files flag when starting the Chrome app. Is there a about:config setting to allow use to continue to develop and teach workshops, etc. locally without having to go through hoops? If there is currently no way - can you please add a way. Firefox is my default browser - would love to keep it that way! Thanks!

Chosen solution

Hey - just found out that what I thought was a change perhaps is not a change. The file I was using had a URL to ../somedirectory/image.png and that is causing the canvas security error. When I move the image.png into the same directory or an assets/ directory inside the same directory, there is no error. So it is possible, that I have not tried to access local files going backwards in directory structure on Firefox. So... I am not so worried about it anymore and I guess can call the issue solved. Thanks for your advice.

Read this answer in context 👍 0

All Replies (6)

more options

Sorry no idea, someone else will though.

May want to think about using the Developer Edition. https://www.mozilla.org/en-US/firefox/developer/ You can run it as well is Standard Firefox as there is compatibility mode at the end of the install. If you do it shares your bookmarks and more so do this.

more options

Did you check "Tools -> Page Info -> Permissions" to see if there is a checkbox for accessing Canvas (Extract Canvas Data)?

more options

Thanks Pkshadow and cor-el for the responses. I suspect that the change is new and perhaps Firefox does not have a way to turn off the canvas security on local images. This has not been a problem in earlier Firefox versions. Personally, I would expect it to show up in the about:config as a boolean we could turn off. As far as I know there is no "Tools -> Page Info -> Permissions" anymore and there is no longer an about:permissions. In the permissions in Options > Privacy, etc. there are no canvas settings I can see. So... still looking for an answer. Thanks!

Modified by inventordanzen

more options

There should still be "Tools -> Page Info -> Permissions" and yes about:permissions is gone for a long time.

It looks that "Resist Fingerprinting" needs to be enabled to see this canvas setting in Page Info.

more options

Hi cor-el, can you please advise on how I find the "Tools -> Page Info -> Permissions" - I have searched and web searched and cannot find it on my Win 10 FF60. That aside, I don't think resist fingerprints is helping or perhaps even related. I am creating a web page where I load an image (png/jpg) into a Canvas Bitmap and the page has interactivity. I want to test locally before it goes on a server. This used to be allowed when viewing the html page locally in Firefox. Now it is giving the same security error that Chrome has given for years. In Chrome we overcome this security check by setting --allow-file-access-from-files on the exe when starting Chrome. I would assume or hope that now that Firefox is giving this error that there would be some way to change my browser so I can continue to test locally - or teach students and run locally - without getting this error. An about:config setting would make sense for instance.

more options

Chosen Solution

Hey - just found out that what I thought was a change perhaps is not a change. The file I was using had a URL to ../somedirectory/image.png and that is causing the canvas security error. When I move the image.png into the same directory or an assets/ directory inside the same directory, there is no error. So it is possible, that I have not tried to access local files going backwards in directory structure on Firefox. So... I am not so worried about it anymore and I guess can call the issue solved. Thanks for your advice.