Mixed content or untrusted certificate error

Hello.

My plugin needs to upload the image which user has selected to a server and fetch the processed image back. The problem is that now, while I develop, I do not have a proper SSL certificate and domain on my server, which is why Chrome (Figma Desktop) gives me “Mixed content error” or, when I create and use self-signed certificate, an “Untrusted certificate error”.

Normally this would be solved via adding the site/domain to the browser’s exception, but I cannot do that in this case, as Figma does not provide a way to change these settings. What can I do? Thanks.

Did you solve this issue? I am facing a similar problem.

No, I think it cannot be solved without developers who are not even responding :frowning:

Thanks Nickolay. If I find anything, I will let you know.

You need sever your API with https protocol, which means you need a certificate for your API domain (It doesn’t matter if you’re in dev mode using localhost). Maybe you can get one in https://letsencrypt.org/.

Related docs: Mixed content - Web security | MDN

Hello, _Hal. I understand perfectly how I can get a real HTTPS certificate, but this procedure requires one to have a domain name, for which you actually get the certificate. I think I will not make a mistake saying that most of the people who start to develop a plugin do not have a domain name and thus a possibility to install a real certificate.

While I can understand why access to most of the features of the underlying Chrome is restricted in the application, I’m frustrated by the fact that such a useful and necessary for development feature as adding web-source to HTTPS restrictions is also not available.

Sorry Nickolay I misunderstand what you mean. But you don’t need a https api when using http://localhost:3000 in dev. If you added hosts for localhost you can remove it.

I see your point and you are right. But still, behaviours can be a bit different when serving a request in localhost and in a remote server, so I would like to have an ability to test both scenarios, and lack of “add to exceptions” feature prevents me from doing so.

Hello,
I had the same problem with a plugin recently when trying to connect to a localhost server. The solution that worked for me was to create a self-signed SSL Certificate with OpenSSL and then use the created certificate when starting the Express server. Note that this was done on MacOS.
SSL Certificate creation: https://msol.io/blog/tech/create-a-self-signed-ssl-certificate-with-openssl/
The commands should be run inside your local server folder and for the second command you need to provide the requested info or else it will give an error.
Express setup: https://stackoverflow.com/questions/11804202/how-do-i-setup-a-ssl-certificate-for-an-express-js-server

I hope this helps!