Mixed content

What you'll see

• A picture, video or embed is missing, or a button, menu or slideshow does nothing. The browser blocked the http part.
• The page looks plain and unstyled: its stylesheet (the file that sets fonts, colors and layout) was on http and got blocked.
• "Your connection to this site is not fully secure" when you click the icon to the left of the address in Chrome.
• "The information you're about to submit is not secure", a full-page warning when someone sends a form whose answers go to an http address.

The address still starts with https. If the whole site says "Not secure", start with Why your site says "Not secure" instead.

The "Mixed Content" error and warning, word for word

Your web person sees these in the browser console, the hidden panel where the browser notes what went wrong:

Warning

Mixed Content: The page at '…' was loaded over HTTPS, but requested an insecure element '…'. This request was automatically upgraded to HTTPS… The browser fetched a picture, video or sound file over https instead. It works for now, but if that file isn't there on https, it goes missing.

Error

Mixed Content: The page at '…' was loaded over HTTPS, but requested an insecure script '…'. This request has been blocked; the content must be served over HTTPS. A script, stylesheet, font or embedded frame was refused. Whatever it did on the page has stopped.

The second address in quotes is the part to fix.

How to find mixed content

1. Run Link Check on the page. It lists the pictures, scripts, stylesheets, embedded frames, videos and sound files the page loads over http, marked Not secure, with its address.
2. On a WordPress or Drupal site, our free add-on (PageKiwi for WordPress or PageKiwi for Drupal) lists the pages whose pictures load over http, and links to your own site that still use http.
3. Some kinds don't show up in the page's own code, so our checks can't see them: pictures and fonts named inside a stylesheet, anything a script adds after the page loads, and where a form sends its answers. For those, your web person opens the page in Chrome, presses Ctrl + Shift + J (Mac: ⌘ + Option + J) and reads the lines that start Mixed Content. The console only shows the page you're on, so check the main pages one by one.

How to fix it

Fix it within the week. A blocked script or form is the same day: it can stop people buying, booking or getting in touch.

1. Your own pictures and files: change http:// to https:// in the address. On a builder, the easiest way is to delete the picture and add it again from your media library.
2. Something from another site (a map, video, font or widget): get its embed code again from that site. Most embed codes now use https.
3. That site has no https version: upload a copy to your own site and use that, or remove it.
4. Forms: the address the form sends to must start with https. If a form service gave you the code, get it again.
5. Lots of pages: ask your web person to search the whole site (and its database, on WordPress) for http:// and replace your own address with the https one.

On WordPress, the two addresses in Settings, General must start with https too: WordPress says "Not secure" even with SSL has the steps. On Squarespace, Wix, Shopify or GoDaddy, the usual cause is code pasted into an embed or code block: see "Not secure" on a website builder.