HTTP mixed content error with publication logo - Ghost 4.0

Using Ghost
1

Hi all, I haven’t seen any other posts on this topic. And I’m wondering if the issue is on my end somewhere? Whenever I upload a Publication Logo, I get a mixed-content HTTP error through Firefox (86.0.1) but I do not get that error when viewing through chrome (89.0.4).

Any ideas what might be going on?

2

We usually see this when the site url is incorrectly configured - If you’re using SSL, your site url must be configured with it (run ghost config set url https://... and then ghost restart )

2 Likes
3

Thank you! That was it!! :sweat_smile:

4

I’m experiencing the same issue on my site: https://r3crypto.com/

I ran:

ghost config set url https://r3crypto.com

Under Google Chrome inspect elements, I see the http call.

<img class="logo-image" src="http://res-2.cloudinary.com/ngufyi/image/upload/q_auto/v1/r3crypto/uploads/R3-Logo-Final.png" alt="R3 Crypto">

I’m obviously using Cloudinary to host images. Under header.hbs I see:

<header id="site-header" class="site-header">
    <div class="header-inner">
        <div class="header-brand">
            <a class="logo" href="{{@site.url}}">
                {{#if @site.logo}}
                    <img class="logo-image" src="{{@site.logo}}" alt="{{@site.title}}">
                {{else}}
                    <span class="logo-text">{{@site.title}}</span>
                {{/if}}
            </a>

Any thoughts on how to fix this mixed-content error? I’m running 4.2.0

5

It looks like your cloudinary storage adapter is using http. To fix it you need to update the adapter or its configuration

.

6

The logo is the ONLY image on the page that has this issue. All other images are served over https. See code from another image on the same page. Where can I look to change this from http to https for the logo?

<img class="u-object-fit" srcset="https://res.cloudinary.com/ngufyi/image/fetch/w_400,c_fit,q_auto,f_auto,dpr_auto/http://res-1.cloudinary.com/ngufyi/image/upload/q_auto/v1/r3crypto/uploads/thorchain-header.png 400w,
https://res.cloudinary.com/ngufyi/image/fetch/w_750,c_fit,q_auto,f_auto,dpr_auto/http://res-1.cloudinary.com/ngufyi/image/upload/q_auto/v1/r3crypto/uploads/thorchain-header.png 750w,
https://res.cloudinary.com/ngufyi/image/fetch/w_960,c_fit,q_auto,f_auto,dpr_auto/http://res-1.cloudinary.com/ngufyi/image/upload/q_auto/v1/r3crypto/uploads/thorchain-header.png 960w,
https://res.cloudinary.com/ngufyi/image/fetch/w_1140,c_fit,q_auto,f_auto,dpr_auto/http://res-1.cloudinary.com/ngufyi/image/upload/q_auto/v1/r3crypto/uploads/thorchain-header.png 1140w
" sizes="(min-width: 1256px) calc((1130px - 60px) / 3), (min-width: 992px) calc((90vw - 60px) / 3), (min-width: 768px) calc((90vw - 30px) / 2), 90vw" src="http://res-1.cloudinary.com/ngufyi/image/upload/q_auto/v1/r3crypto/uploads/thorchain-header.png" alt="THORChain Summary, Research Notes, Links and Videos" loading="lazy">

Under srcset.hbs I have the following.

https://res.cloudinary.com/REMOVE/image/fetch/w_400,c_fit,q_auto,f_auto,dpr_auto/{{img_url feature_image size="s" absolute="true"}} 400w,
https://res.cloudinary.com/REMOVE/image/fetch/w_750,c_fit,q_auto,f_auto,dpr_auto/{{img_url feature_image size="s" absolute="true"}} 750w,
https://res.cloudinary.com/REMOVE/image/fetch/w_960,c_fit,q_auto,f_auto,dpr_auto/{{img_url feature_image size="s" absolute="true"}} 960w,
https://res.cloudinary.com/REMOVE/image/fetch/w_1140,c_fit,q_auto,f_auto,dpr_auto/{{img_url feature_image size="s" absolute="true"}} 1140w
7

If that’s the only one, you should be able to re-upload the logo and that should fix the issue :slight_smile: