After building and deploying a Sage theme to a site, I’m getting “mixed content” warnings on my console. Effectively, both editor.css and editor.js have http:// URLs, while the frontend css are loading with https:// correctly. I’ve looked at every setting, what am I missing?
This is the error I’m getting:
Mixed Content: The page at ‘https://site.com/wp-admin/post.php?post=2&action=edit’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://fa.montag.uy/wp-content/themes/mytheme/public/css/editor.50ccf2.css’. This request has been blocked; the content must be served over HTTPS.
I’d appreciate any tips
I’ve experienced this issue quite a bit moving sites from HTTP to HTTPS – I think it’s unlikely to a be a Sage related error.
From experience, this usually solves it:
- Make sure the domain is HTTPS in the dashboard settings
- Use a plugin like Better Search Replace to replace instances of http:// with https://
- Make sure there’s a https force redirect setup on the server
Hopefully that’s helpful!
Hey Alex, thanks for your feedback. About your points:
- Staging domain is https, I also configured https for local dev (using Local) in case that made a difference, I also forced https via SITE_URL in wp-config.php
- I ran wp-cli’s
search-replace and even though I did have some http urls (that I replaced), that was not the issue.
- I have a .htaccess rule, but not sure if that’s what you mean? I know there are some plugins that rewrite all calls to https, but I’d like to address the the underlying problem.
To add more info, on page/post edit page on WP’s admin on staging, I’m seeing this on view-source:
<link rel='stylesheet' id='editor/0-css' href='http://example.com/wp-content/themes/fa/public/css/editor.50ccf2.css' media='all' />
<link rel='stylesheet' id='acf-global-css' href='https://example.com/wp-content/plugins/advanced-custom-fields-pro/assets/build/css/acf-global.css?ver=6.2.0' media='all' />
There you can see how ACF’s global CSS is loading ok over https but the editor’s CSS is not (.js either, that’s why I think this might have something to do with Sage’s build process)
Glad to report this issue resolved itself
To give some info for future devs with a similar problem… this got fixed after I had some issues and fixed them (might be related or not, who knows):
- Enabled https with my local env (Local by flywheel)
- Uninstalled Laravel Herd (was causing PHP conflict issues w/Local on the command line) following their docs & restarted
npm run dev was failing with bud errors,
npm install was not installing. For some reason NODE_ENV was set to production.