toDataURL() breaking SSL connection

my problem is that I am using the canvas .toDataURL() method to display a preview of an image on Chrome and Firefox but that is causing a warning to appear because the site is over a SSL connection.

I get the following warning message when I display the image using toDataURL():

The page at ... displayed insecure content from ....

This only happens in Chrome since chrome has that Lock next to secure web pages: Which causes the Green Lock on the address bar to change state to a warning state saying that there are resources on this page that are not secure.

Is this an expected behavior for toDataURL()?

I don't see why it would be unsecure since I am not fetching any data over an HTTP connection or even fetching any data at all since it is all done via JavaScript. But I am probably wrong, please correct me.

Is there a differen开发者_运维知识库t way for me to make sure I am securing this content? Or to not cause the warning to occur? (And I do need to use the .toDataURL() method?)

Open the Developer Tools console in each browser and look for the exact URL that they're claiming is insecure. It would be very surprising to learn that either browser has such a bug. IE7 and below have this bug, but they don't support DATA URLs at all.

If you're displaying the image from an unsecure location (file://) you can't move it to a secure context (https://) without running into errors. This might be causing the browser to treat it as insecure.

Recommended reading:

SECURITY_ERR: DOM Exception 18 on using getImageData in a Chrome Extension

HTML5 Canvas - How does the origin-clean flag get set to false?