How to serve static images that get embedded by chat applications?

This might be a trivial question for web developers, but I just can not seem to find a hint on Google or Stack Overflow.

I have an image file (png or jpg) that is statically served by my webserver (https with nginx). I would like this image to be embedded into chat applications, for example Discord, when I send a link to this image.

If I take an image that is served by google, then it will show the image instead of the link. Example: https://firebase.google.com/static/images/homepage/home-icon-build.png

I tried to take the image from google and serve it on my nginx server. Chat applications only show the link and not the image, but if I click the link:

https://my.server.net/profilePictures/home-icon-build.png

then it will open the image in the browser as expected.

I would be really grateful for any hints/tips that could enable my statically served images to be embedded into chat applications.

Solution

I finally fixed the issue!

It was a certificate issues. How can this be, if everything worked in the browser? Browsers trust the Certificate that was used by the authority that signed my certificate. However, web crawlers do not trust this intermediate certificate!

If you want to see if you have to same mistake I did , then go to:

https://www.digicert.com/help/

Now you can check the certificates of you site.

If it shows something like:

TLS Certificate is not trusted The certificate is not signed by a trusted authority (checking against Mozilla's root store). If you bought the certificate from a trusted authority, you probably just need to install one or more Intermediate certificates. Contact your certificate provider for assistance doing this for your server platform.

Then you have the same issues that I had and it is easy to fix!

It turns out that the issue was how I served my certificate. My certificate is issued by Let’s Encrypt and I need to also serve the R3 and X1 certificate that are used by Let’s Encrypt in the keychain of my certificate.

The solution is to concatenate your certificate with the two certificates from Let’s Encrypt.

Just paste the Let's Encrypt certificates below yours:

-----BEGIN CERTIFICATE-----
MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
.........
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
gIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADAACVSDFRFEHELELHELH/
NpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMTMSQwIgYDVQQKExtEaWdpdGFsIF
MB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1owDkRTVCBSb290IENBIFgz
BAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2VhTzELMAkGA1UEBhMCVVMxKTAnBgNV
.....
-----END CERTIFICATE-----

Good news! If you use certbot, then you do not have to do this at all! Simply use the fullchain.pem that is generated by certbot automatically.

Just change the certificate in your nginx.conf:

ssl_certificate       /etc/letsencrypt/live/your.domain.com/fullchain.pem;

I really hope this helps someone!