Last Chance: Cyber Monday 40% OFF

Days
Hours
Minutes

USE CODE: CM2022

How to fix CSS and JS files with mixed content

Tackle WordPress weaknesses and fortify your website Learn more

If you have Really Simple SSL Pro installed, you might get the warning that your site contains JS or CSS files which in turn contain non-secure links.

For example, your site probably has style.css included. If this stylesheet uses a background image, this might look like this:

body {
 background-image: url("https://www.domain.com/paper.gif");
 }
 

This may cause mixed content issues because Really Simple SSL can’t fix this dynamically, as it is located in a CSS file.

You can get four kinds of files here, files in:

  • Uploads directory
    Files in the uploads directory are often generated by a plugin or theme. Try to regenerate these files by clearing the plugin or theme cache (if available), or by regenerating the files. How this has to be done depends on your plugin or theme. It’s also possible you have to re-save the theme settings to regenerate the file with the correct URLs.
  • Themes or Plugins directory
    These are files included in a plugin or theme. If this is not a child theme, the best way to fix this is to reach out to the author and ask to change the problematic URL to a protocol independent URL. (// instead of http://).
    You can also override the theme or plugin. With a theme, this can be accomplished with a child theme.
  • Other
    If the file is on your server but is not located in one of the aforementioned folders, you can look this file up and change the URL as described below.

To fix:

  • Open your FTP client
  • Look up the file that is mentioned in the fix list, and open it (e.g. wp-content/uploads/etc).
  • Search for the “URL with http link”
  • Change http:// into // so that the result would look like this:
    body {
    background-image: url(“//www.domain.com/paper.gif”);
    }

This way, the URL is protocol independent and it won’t matter anymore if you’re on http:// or on https://

Advanced Security

Tackle WordPress weaknesses and fortify your website. New hardening features!

Definitions

Want to know the in and outs of security jargon? Get to know our features.

Premium support will offer assistance in 24 hours. If you need help, or have any questions just contact our awesome support team/

Related articles

How to use the Permission Policy header

The Permissions-Policy HTTP header replaces the existing Feature-Policy header for controlling delegation of permissions and powerful features. The header uses a structured syntax, and allows

Read More