Building a website consists of a varied number of steps, depending on the owner, creator, manager, type of site, and audience.
Everyone cares about security and wants a positive user experience. No one likes to see “site down” error messages or web browser warnings.
Below, you can learn about serving secure web pages and secure assets (like images, scripts, and forms) and how to find and resolve browser security errors.
The Basics of HTTPS
Forms that receive sensitive user information – like credit cards, login information, or confidential user feedback – need to be submitted securely, via HTTPS. An SSL certificate is purchased and installed on your web server to enable HTTPS browsing.
SSL certificates range from $10 to $1,000+ per year, providing different levels of verification and browser integration (e.g. it costs more to turn the browser bar green). All price ranges enable HTTPS browsing, which permits secure browsing, assuming the SSL certificate is valid and that the website is trusted by the visitor.
Pages can be served via HTTP while still including HTTPS forms. This practice allows for form submissions to be submitted securely while still enabling caching (for site speed), or for other reasons. However, the downside to this method is that the visitor has been trained to look for a padlock icon or a green bar displayed within the browser, which only happens when pages are served via HTTPS (i.e. when HTTPS is in the browser’s address bar).
But the browser gives warnings for webpages served via HTTPS that include HTTP assets, like scripts, forms, and images. To avoid these browser warning messages, you need to make sure that you don’t serve any HTTP assets on an HTTPS page. Browser warning messages may put some of your site visitors on high alert, causing them to not complete that shopping cart order or that contact form.
WordPress HTTPS
After installing a valid SSL certificate onto your server (your host can help with that), there are 3 ways to implement HTTPS into your WordPress site.
Option 1: Forcing All Pages to HTTPS
Although this is the easiest option, it’s not always the right option because caching isn’t enabled for HTTPS pages. If you’re sure you want to serve every page of your WordPress site via HTTPS, just go to your WordPress General Settings and change the WordPress Address (URL) and the Site Address (URL) from HTTP to HTTPS.
Option 2: Forcing Certain Pages to HTTPS (most common)
More often than not, there are only a few pages you want to force load via HTTPS, and the rest should be loaded via HTTP by default. While there are server-side ways to enable this, there are also a few plugins that provide the ease of a check box. You check the box if you want the page loaded via HTTPS, or you leave it unchecked. Here are a couple of plugins to choose from:
Option 3: Force HTTPS logins or Force HTTPS logins and HTTPS administration
If you’re looking for a simple way to secure WordPress logins (the wp-login.php script) or the entire wp-admin area, you could set one of these two wp-config.php constants, respectively:
-
define('FORCE_SSL_LOGIN', true); -
define('FORCE_SSL_ADMIN', true);
You do not need to set both of these options, just one or the other because FORCE_SSL_ADMIN includes FORCE_SSL_LOGIN.
How to Identify HTTP Assets Loaded on an HTTPS Page
Here’s the nitty gritty section you’ve been waiting for.
- You already have your SSL certificate installed correctly, and you can browse your site via HTTPS by manually typing it into the address bar.
- You have your HTTPS plugin(s) and/or wp-config.php constant(s) setup and working.
- But the browser throws intimidating warning messages about “mixed content” or “insecure content” loaded on an HTTPS page.
Following are several ways to identify the insecure (HTTP) assets loaded on secure (HTTPS) pages. You may need to use several of these methods to resolve all your browser security warnings about mixed content.
Note: Option 4 is my favorite!
Option 1: View Source
This method is pretty simple. Load the page via HTTPS; right-click anywhere on the page; and click “View Page Source”, “View Source”, or “Source”, depending on your browser.
Then use the “Find” command (Edit -> Find or Ctrl+F or Cmd+F) and search for:
-
src="http:
(with double-quote)
-
src='http:
(with single-quote)
Long story short, you’re manually looking for images, scripts, iframes, and all other assets served via HTTP instead of HTTPS. If you don’t find any with either double- or single-quote HTTP:, then you’re all done with that page. Keep browsing to other HTTPS pages and keep searching through View Source.
Option 2: Use a Plugin
A couple plugins exist that essentially do the View Source for you:
- WordPress HTTPS (SSL) (mentioned above too)
- WordPress HTTPS Test
- SSL Insecure Content Fixer
Basically, you browse your site via HTTPS with one of these plugins active, and the plugin displays notifications of the HTTP assets. Some plugins show the warnings for all visitors and some only display to Administrators so beware of leaving these sort of plugins active while you’re not testing.
Option 3: Paste the URL into a Website that Tests for Insecure Assets
If you don’t want to View Source and don’t want to enable a plugin (maybe because it displays to all visitors, not just administrators), then you could paste your page’s URL into a website that tests it for you.
WhyNoPadlock is a free testing site that provides you with a report of all the insecurely-loaded items. It provides an easy-to-understand list of green check marks or red x’s. Pay attention to the red x’s; fix them in your plugins or theme; and click the “Test URL Again” button to try and rid yourself of red x’s. Once done with that page, paste in a different URL to see if it’s also free from red x’s. Wash, Rinse, Repeat.
Option 4: Use Google Chrome Inspector Console (My Favorite Way)
Google Chrome’s Inspector has a Console tab. If the HTTPS page you’re displays yellow or red in the address bar (see 3rd and 4th icons below), open the Console to see the one or multiple insecure assets.
This is my favorite method because it’s quick, easy, and can be used on any page I can access, not just on the front-end like WhyNoPadlock. It’s basically like Option 1: View Source but with Chrome finding the issues for me.
How to Fix Insecurely-Loaded Assets
Make note of each item sourced via HTTP and you’ll get an idea where to find the problem. Here are some examples:
- A plugin loading a JavaScript file via HTTP: http://example.com/wp-content/plugins/example-plugin/awesome.js
- The active theme loading an insecure image file: http://example.com/wp-content/themes/example-theme/assets/images/circle.png
- The active theme (most likely in functions.php, but it could be loaded via a plugin instead of the theme) loading Google fonts insecurely: http://fonts.googleapis.com/css?family=Lato:100,400,700
- Notice even insecure assets from outside your WordPress installation throw browser errors.
What You Now Know
You now know that the plugin or theme you’re using isn’t coded properly. It may be a quick fix or need significant modification. Before working on fixing it, you have to ask yourself, “Do I really need this?” because if this is wrong, I bet other things are wrong. Sometimes an uninstall can be healthy.
If you decide the plugin or theme is worth keeping, start working to fix these errors.
You have a few options per asset:
- Report the error to the plugin developer and leave deactivated for now.
- Edit the plugin files yourself, sharing the fix with the plugin developer.
- Change to a different theme
- Edit the current theme’s files (hint: start looking in functions.php)
Personally, if a plugin throws WP_DEBUG errors, sets off security errors, or loads assets on pages where it doesn’t belong, I usually get rid of it altogether. If I have the time and the plugin is valuable enough, sometimes I report the error or even provide the fix, especially if the plugin author has enough credibility that I know this is an infrequent occurrence.
How to Change Assets from HTTP to HTTPS
After discovering the offending assets, you need to change them to either respect the protocol (i.e. serve HTTP when the page is HTTP and serve HTTPS when the page is HTTPS) or change them to always be served via HTTPS, even for pages loaded with the HTTP protocol. These 2 steps should cover all scenarios. You might only need Step 1 or Step 2 to resolve the insecure warning issues.
Step 1: Use Relative URLs
This is the simplest fix. If an asset (image, script, etc.) is hard-coded into a plugin or theme, change it from ‘http://site.com/assets/logo.png’ to ‘//site.com/assets/logo.png’.
Typically, this is most useful when including assets from other servers, like Google scripts, API scripts, or iframes.
Before doing this, however, you need to make sure the HTTPS version is available. If loading an asset from a site that doesn’t have HTTPS enabled, it’s probably best to remove the reference entirely (i.e. comment out or delete) or to save the asset to your own server and change the source to load via your site instead.
Step 2: Use Proper WordPress Coding Standards
This issue is a bit more complicated. I’ve seen all kinds of things, like:
- Code that forces HTTP (why?!)
- Using deprecated WordPress functions that don’t respect SSL settings
- Code that tries (and fails) to implement its own “if is HTTPS” logic instead of using the WordPress functions
Each of these types of errors could take some time to resolve. Here are some helpful WordPress functions that may need to be used instead of the current code:
- home_url() and related functions
- is_ssl()
- WordPress Function Reference (stay away from the ones in red; they are deprecated)
- WP_DEBUG might help too
Conclusion
Here are the bullet points:
- If you’re going to have an SSL certificate and serve one or more pages via HTTPS, work hard to resolve all “mixed content” warnings to provide your visitors with a pleasant browsing experience (especially Internet Explorer users because IE’s warnings are the most in-your-face).
- If a WordPress extension (plugin / theme) isn’t coded properly for SSL, do you really want to use it?
- If it was free, report the problem and try to help provide the solution.
- If it was not free, report the problem and consider if it was really worth your money. Maybe you should ask for a refund and find another alternative.
- Once you resolve a single page’s mixed content warnings, keep browsing the site and testing each page individually, whether by using View Source, a plugin, or a testing website.
If this is too much work for you and you’re comfortable with visitors receiving mixed content warnings and you do nothing else other than install an SSL certificate, make sure to at least force secure logins. I think everyone should do this. ManageWP does.
Please share your questions and comments below.
Creative Commons images courtesy of Brenda Clarke and Jakob Montrasio
Whiteplainsconsulting
Thanks for sharing this blog. This is really useful as I am having issues with my website despite having a SSL certificate. Mix content issue is quite common. It is essential to optimize the site and get rid of mixed content to perform better in search results.
Vicky
thank you, i am working on a project which is on this topic, is it okay if use some key points from your post?
Marko Tanaskovic
As long as you quote the article as the source in your project, I don’t see why not.
axel
thank you it has been useful
Mubasshir Rahman
Hi,
Thanks for the great article, you are very clear and to the point, I think issue that you have discussed are the most important ones and it can be great help to users like me. Also want to know if you have written any article on tackling brute force or ddos attack on WordPress website as this is the most important issue that WordPress users face. Cause I am facing on my blog. Also Im sure if you can write an article it will be clear cut to the point.
Thank you!
Kirsty
OMG! I have been bashing my head against my desk all afternoon trying to fix my https:// site bringing up unauthenticated script warnings! The plugin did the trick! Thanks so much 🙂
massimo
Ok, but if I have many pages not safe because the images are http:// and not https://, how can I change the path for every images automatically?
Thanks
Jayanath
Great post indeed $$$
The way you have explained each and every point was awesome. I have learned a lot of things from this post.
Mitchell B
Amazing article, really helped me solved things!
Angie
Hi! I have just done the option “Forcing All Pages to HTTPS”, and now I cannot even access my Admin or dashboard. it keeps saying:
This page isn’t working
radianstar.com redirected you too many times.
Try clearing your cookies.
ERR_TOO_MANY_REDIRECTS
PLEASE HELP!!!!!
Anyone please could tell me how to fix it, and maybe put it back as before I changed it?
Thans in advance!
Mat
hi there!
i have a strange issue!
i have SSL certificate installed and configured well, the whynopadlock.com approves my claim, here is the link: https://www.whynopadlock.com/results/ba4a0604-0a5a-47dc-8a67-00d85d0274d0
but when i open my website using FireFox 57, i see a mixed content error
what is the problem? is there something wrong with my browser or with the whynopadlock.com?
Nemanja Aleksic
Just tried your site with Chrome, everything is working perfectly.
Catherine Kelleher
Hi, our hosting company has installed SSL cert on our webiste, but still getting “This connection is not Private” on safari and Firefox browsers, we have some advertisers who have “http” on there website rather than “https” there is not alot we can do about this, I don’t see why we should have an SSL cert if we still get an “connection is not private” is there anything I can do about this please.
Clifford Paulick
You’ll need to explain the benefits of HTTPS to your website partners/advertisers and sharing https://support.google.com/webmasters/answer/6073543 with them may help. Note that linking to http:// won’t affect anything, only loading assets (images, PDFs, JS, CSS, iframe, etc.) — Good luck!
Pat Migliaccio
Appreciate this post. Was having an issue with an install sitting on an AWS EC2 instance behind an Elastic Load Balancer and the SSL Insecure Content Fixer plugin’s ‘HTTP_X_FORWARDED_PROTO’ detection solved the trick without any significant configuration changes. Thanks!
Isaac Inegbenehi
This was really helpful… I was able to fix mixed content issues in my blog. Thanks for sharing
William Teach
Thanks for the info. Here’s a good question: why do javascripts not seem to work with https? I use Go Stats counter and Live Traffic, both javascripts, and neither will show in any normal WP theme (I’ve tried many, including the WP default), in either the sidebar or in a post. I’ve tried several ways in the sidebar, using several different widgets, including 2 designed for thinks like javascripts. Yet, it will show in a mobile theme. I have this issue on my site and my test site.
Arek
I had a similar problem when moving my page to HTTPS. It turned out that redirecting of the “Adaptive Images for WordPress” plugin causes an error. After reinstalling the plugin everything started working properly.
Kajal Joshi
I was facing the issue while uploading pics in WordPress but after adding some codes in htaccess file it works fine. Thankyou
sasi kumar
I have added ssl in my site. How Many Days it takes to re index in google?
Sadhin
How can I edit the file which you mentioned in the article:
”
Step 1: Use Relative URLs
This is the simplest fix. If an asset (image, script, etc.) is hard-coded into a plugin or theme, change it from ‘http://site.com/assets/logo.png’ to ‘//site.com/assets/logo.png’.
”
I mean which file or settings I need to be edited to change.
Michaele
Thank you very much dude. We had mixed content on our site. So we got https-warnings if we tried to open our website. Your article about mixed content helped us a lot. We could remove http-links and solved our problem.
ignacio perez
I have a problem in which one of my images marks me mix problem, the image is pull of wordpress directly, any ideas.
Gaurav
Thanks Clifford, Option 1 worked for me:) I had an image in footer with “http:” which was causing chrome to not show “secure” badge next to my website link. I just changed the http to https and voila!
Hanif
Thank you, really mean it 🙂
Mark K
Hi Clifford, any idea why the mixed content issues would be intermittent on my site? Sometimes the homepage loads secure and sometimes it doesn’t and then it doesn’t display the page with CSS. This is without making any changes on the back end. Also, sometimes it will load secure on a desktop, but at the same time will not load secure on my iPhone. Thanks
Joe D
I have the same issue you are having. Sometimes it works and sometimes it doesn’t.
japh
Hi,
Thank you. This post helps me fix my problem. Even this post is published in 2012.
I’d just want to ask, in Option 1: Forcing All Pages to HTTPS, is still true until now that caching isn’t enabled for HTTPS pages?
Thanks.
Yuzu
Thank you! Option 4 Solved it for me!
Tony
Hi Clifford, I have a feeling the sites not loading because of a reference from a .js file.
Am I correct? Do you know how to fix this?
Regards
tom rarich
On the ManageWP “Websites” screen, what is the meaning of a large red dot on the top left corner of a website home page image?
Is there documentation somewhere that explains it that I could reference in the future?
Nemanja Aleksic
Hi Tom,
That’s the tag you assigned to the website – its color matches the color of the tag. If you assign more tags, you’ll get more colored dots there. The idea is to recognize the tags at a glance, without leaving the Websites tab.
Here’s some more info about tags and how to use them:
https://managewp.com/guide/getting-started/managewp-dashboard
Julio
Thanks alot! youre life saver! finally it works after i check “view source”
JDH
Super, super basic but another tip is to remember to flush your cache on both server and browser side. I forgot to do this and was pulling my hair out for awhile. Bit of a face palm moment, but hope this might help others avoid!
Armandos Sarris
Hi, If anyone can help me!!!!
I have changed my site from http to https.
I have done all the things the tutorial say.
When I want to see the site (as customer) it works
But when I am trying to login to wordpress I CANT :-(.
it say in chrome:
The brattiart.gr page isn’t working
brattiart.gr redirected you too many times.
Try clearing your cookies.
in console of chrome say: ERR_TOO_MANY_REDIRECTS
The site is new I dont have any plugins only one theme.
Do you have any idea ?
Thank you in advance
Armandos
James
Thanks for this – very helpful! 🙂
jasa sablon
i’ve tried fixing path .. all seems done but why img logo url still in http ?
Claudia
This article is interesting. I also have a problem of Images: For some time I am fighting against windmills for 2 pictures that did not change http to https: one of these is the site Background. I did not understand where I can change the image. I tried to rename it, but it did not go away. Where can I correct this debug? Thanks if you can help me.
Phils Carlque
Thanks for the tutorial but if I may ask, how possible can I use the //? I mean can I use PHP to do that probably via the wp_config.php file or the theme’s function.php file? I think that idea is cool and will like to test that part out.
Stefan Joubert
Great post Clifford – will implement your suggestions! I have just changed over to https! Looking forward to the journey!
Voicu Ioan Virgil
Hello.
This articole was helpful.
Thank you!
Pedro Aguiar
Hi there! I still have a problem many plugins in my WordPress did not work, many misconfigured the page. I trying to configure the wp-config but I got “Config file is not writable: /opt/bitnami/apps/wordpress/htdocs/wp-config.php”
How do I slove it pls!!
Clifford Paulick
Hi Pedro. Sorry you’re having such issues. Unfortunately, I cannot help people with their individual needs via these blog post comments. You should contact your web host to ask how to resolve the “not writable” issue.
Kacy Fletcher
Hi Clifford!
First – thank you for the best review of the whole https thing online – you had all the info and actually provided me with the answer I needed!
Great wrok – just go to Settings > General and chanege the domains to https and voila – done!
Thanks again!
Kacy
Clifford Paulick
I’m glad to hear that!
karjaw tour
Thank Clifford Paulick, nice article, i deactivated SSl then all my image cannot load properly (missing) after i install “SSL Insecure Content Fixer”.
how to restore this plugin i lose my traffic because i install sll (visitor generate by jetpack dasboard WP)
.million thanks for all 🙂
Clifford Paulick
Sorry I can’t help with each user’s specific issues via this comment form, but you can use Jetpack’s Photon image CDN with HTTPS by following these docs: https://developer.wordpress.com/docs/photon/
Durga Prasad Kundu
Nice article Clifford Paulick. It helped me a lot. Thanks.
Clifford Paulick
You bet!
Andrew Stilliard
Great post on your experience migrating HTTPS. If it helps with the identify stage, there’s now a tool that will scan your site to quickly find any mixed content: ecommerceDOT co DOT uk/httpschecker
Harpreet
Hi, I am facing an issue regarding my site, actually i did this step (in WordPress General Settings and change the WordPress Address (URL) and the Site Address (URL) from HTTP to HTTPS)and after that i am not able to open the login page of wordpress. Can you please help me in UNDO it.
Clifford Paulick
Really sorry to hear that, Harpreet. I’d suggest contacting your web host. I cannot help users here via comments.
However, this may be of assistance in your specific situation: https://wordpress.org/support/topic/defining-wordpress-url-in-wp-configphp?replies=3#post-1090205
I hope it gets solved quickly!
Durga Prasad Kundu
Harpreet, I know it’s too late. But, to solve this kind of problem immediately, you have to go to your phpmyadmin area. From there you have to go inside your WordPress database and search for wp-options table. There you have to Edit your site address url from https to http. After this you can login to your wp admin area.
Thanks.
George
Hmm, Facing a mixed content problem with newspaper wordpress theme. The files getting loaded are apple favicons. The theme is overall very good but the SSL issue must be addressed ASAP.
Clifford Paulick
Sounds like you’re due for contacting the author of that theme. Hope you get it resolved and that it helps other theme users because of it. Good luck!
RAHUL
CLIFFORD PAULICK,
Thanks sir for sharing this knowledge with us. I was also suffering from this problem. My website’s SSL was not green and the browser tell about insecure content. I then searched google and found your article. As mentioned above “SSL Insecure Content Fixer” plugin fixed my problem. Sorry for bad english. Thanks again.
Clifford Paulick
I’m glad it helped! 🙂
Lucien
Thank you for your article, i found it very useful to resolve a problem on my site.
thnak you again.
Clifford Paulick
You’re very welcome.
Paul Rostron
Just wanted to say thank you for writing the article – couldn;t find where in Chrome developer tools to see what resources were referencing http until i read it, cheers 🙂
Clifford Paulick
Awesome!
kamalkirant
Hi sir,
Its kamal, WP beginner. I recently installed SSL certificate to my website, and I changed “WordPress Address (URL)” to ‘https’ from ‘http’ using settings>general. Padlock is appearing and everything ok. I tested my website in “https://www.whynopadlock.com/”. Its not reporting any problems (all are green checks without any error report). But, the problem is no images are loading after ssl install. All image urls changed from ‘http’ to ‘https’. I cont see the media library images those already uploaded. I can upload a new image to media library, But i cont see it. Its just showing a white blank square box. I also cont see images those related to theme I am using. All images are loading if I changed ‘https’ to ‘http’ in “WordPress Address (URL)” but padlock is not appearing in the address bar. I searched so many solutions, but nothing worked for me. I tried to use wp-plugins those can force https ( like ‘WordPress HTTPS (SSL)’, ‘WordPress HTTPS Test’, SSL Insecure Content Fixer, etc. ), but no result. I dont know what to do. But I need padlock for all my website. Please kindly help me. Thanking you sir.
My website Url : www . uandi-crorepati.com
WP theme: Alexandria from (themealley.com)
Regards,
Kamal
kamalkirant
Finally I solved it,
I disabled hotlink protection for ‘HTTP’ and I added that protection for ‘HTTPS’
Thank u sir.
Regards
Kamal
Clifford Paulick
I’m glad you got it figured out. I don’t think we would have been able to help you with that level of debugging anyway.
JARED
I have one image that is referenced by http:// and is giving me an SSL warning. The other image are referenced by https:// how do I go about setting the one image to be https:// I can’t find it anywhere in the media settings in wordpress. I’m using latest wordpress and 3clicks theme.
Thanks in advance.
jared
Clifford Paulick
Hi Jared. I can’t help without having a link to the page. I tried the link you added to your comment, but HTTPS redirects to HTTP so I can’t test.
Mahi
Hi
I’ve got a problem with my ssl loading. My main page is working well, also others pages or articles when i surf inside my site. But when i surf from google my article show mixed content (because my template and plugin launch xith http !!!). While same article is green when i click from my main page !!!
How to launch plugin, theme on https when i came from google or bing ?
K.R
Luyen Dao
Hi Clifford – I enjoyed your blog post, SSL is always a nice (and usually rewarding challenge) with WordPress seeing that URLs are stored all over the place; in code, database.
I think many of the tools you have mentioned such as WordPress-https work well, i just wanted to add that WP CLI (http://wp-cli.org/) is a great command line tool for handling database search and replace commands, and also handles serialized data.
For new and experienced users alike, if you can get shell access from your host setup or run your own VPS, then it’s a must have tool.
Clifford Paulick
WP-CLI is a great tool that’s available now. Thanks for adding it.
Nat
I got my SSL for my WordPress blog but still unable to get it 100% SSL.
I’ll try your advice.
Thank you for sharing it.
Sammy
Yes facing the same issue but i think will solve issues soon.
kaskus
I thought i have to edit files of my whole wordpress site from http to https. But after i read this article i only have to edit around 3 errors from whynopadlock.com and Console. Now my https in address bar is fully green. Thank you managewp.com!
Clifford Paulick
I’m very glad this helped you!
Linda
I have considered the options as suggested in your post “you have a few options per asset:
Report the error to the plugin developer and leave deactivated for now.
Edit the plugin files yourself, sharing the fix with the plugin developer.
Change to a different theme
Edit the current theme’s files (hint: start looking in functions.php)”
I have bought the plugin Instabuilder 2 and I like the plugin.
However, I have mixed content, I have contacted the developer but they can’t find the problem, for me to edit the plugin is highly unlikely.
That leaves me with the only option but to drop the SSL certificate. The question is how? How do I revert back to not having a SSL certificate? Could it be as easy as ticking a box or should I point the site back to my hosting company?
Thanks
Clifford Paulick
Sorry you’re having issues with mixed content. Are you googled for Instabuilder 2 and only saw salesy and scammy looking results so based on that alone, I’d be concerned about the quality of the plugin.
Regardless, is mixed content shows up with the plugin as the only active plugin, then it’s likely an issue with what the plugin is loading (e.g. image, stylesheet, script, etc). They either need to load things properly (e.g. http://codex.wordpress.org/Function_Reference/wp_enqueue_script) or change them to load as protocol relative.
Personally, if you’ve already gone through the trouble of setting up SSL, I would not abandon it because of the plug-in misbehaving. If you really want to though, you will want to speak with your web host to change it back to HTTP.
I hope this information helps. Since I do not exactly know your situation, it’s difficult to provide you information specific to your setup. I hope it turns out well for you.
Dr. Robert Pöhler
When you use Pound with Varnish or Apache backend you need to forward the SSL info by editing the site (sites-enabled default-000 – not default-ssl). Insert the following line before the Virtualhost-config: SetEnvIf X-Forwarded-Proto “^https$” HTTPS=on
Bramus!
Presented with the problem of Mixed Content myself I wrote PHP CLI App that scans my website for Mixed Content for me. The source is up at GitHub: https://github.com/bramus/mixed-content-scan
Clifford Paulick
Bramus! Quite nice! Thanks for sharing.
If I understand it correctly, it *identifies* URLs with mixed content and does not *replace* it. Very helpful.
Bramus!
That’s correct.
Paul
Hi there you mention not having site wide ssl, can you elaborate on that please as this is something I prefer.
Thanks
Paul.
Clifford Paulick
Hi Paul. I’m not sure which part of the article you’re referring to. However, I wonder if you’re asking about some pages being HTTPS and others being HTTP. If that’s what you want, you’d want an SSL plugin that has a checkbox on the wp-admin post editor screen where you check the box to force that page to be HTTPS.
If that’s not what you were asking about, feel free to reply with more specifics.
Andrew
Clifford,
Thank you for the great article/guide.
Do you have any suggestions for a site/script that will scan a whole site and find insecure links?
Our site has thousands of pages, and we just don’t where to look to find those hidden “insecure links.”
Once we find them, we can fix them, but we have to find them first.
Thanks for any suggestions.
Andrew
Clifford Paulick
Hi Andrew.
Yup, it can be a pain.
However, you might just want to use a plugin like https://wordpress.org/plugins/wordpress-https/ or https://wordpress.org/plugins/ssl-insecure-content-fixer/ (haven’t tried either recently) to just do it for you.
Imagine doing it once and then having to undo it someday if you ever remove the SSL Cert…
Jon Forrest
Hello Clifford,
I came across your post looking for answers to an HTTPS problem. After multiple calls to GoDaddy for support, we finally got the certificate for our site up and the https:// showing in the browser. However, now on Google Console it shows that that images being sourced from the media library are not secure and it’s putting a warning up over the https. Do I have to reload all the media since I loaded it originally prior to getting the SSL certificate? I tried the WordPress HTTPS plugin, but that made it worse.
Any help would be most appreciated, we’re trying to launch but I don’t want to have anything cause people to not purchase from the site.
Thank you. Great article, by the way.
Clifford Paulick
Hi Jon. Yeah, SSL can be a pain, as you’ve experienced.
The short answer is “yes”. You’ll need to go through all the pages/posts you have written — that may be loaded via HTTPS — and change their img src from http:// (always load via HTTP) to https:// (always load via HTTPS) or to // (protocol-relative)
Either that or use a plugin that rewrites it for you if the page is loaded via HTTPS. There’s no perfect one out there that I know of, but I think the most popular and comprehensive is https://wordpress.org/plugins/wordpress-https/
Once you do either one of these fixes, make sure to check them again for mixed content warnings and keep fixing until you get it all done.
I hope that helps.
Jon Forrest
Yeah, I’ve been resistant, just cause it seems like such a ridiculous rework, but I know why it is the way it is. I’ll delete and reload all the content. Hopefully that will fix this issue. I’ll repost to let you know. I suspect many others run into this issue.
Much appreciated.
Clifford Paulick
If you need to search and replace, https://interconnectit.com/products/search-and-replace-for-wordpress-databases/ is a good tool. However, before you start manual or automatic changes, make sure to take a backup you know you can restore from, like via ManageWP: http://managewp.com/user-guide/how-to-use-managewp/backup
Joshua
Im curious how a site like this one (managewp.com) clearly has an ssl and there is links on the page to outside references without ssl going to wordpress.org and also several in the comments.
My code is fine and I can use ssl, but its my content thats my issue. I have hundreds of posts with links to peoples personal sites that most are not https. Ideas on this?
Clifford Paulick
Hi Joshua.
Linking to HTTP ://google.com isn’t a problem. However, loading an asset via HTTP (e.g. HTTP ://google.com/example/script.js) would be a problem if the site itself is loaded as HTTPS. It would give you the “mixed content” issue.
I hope that clarifies things. All your content (e.g. blog posts linking to wherever on the internet) will be just fine and won’t cause mixed content warnings for your visitors.
keiheadquarters
I have a main domain and within this directory have different WordPress Installations.
Now I have the need to install an SSL certificate on my main domain. This is because within this directory there is a e-commerce installations that I need to work with HTTPS.
Now, I do not care that my WP sites running on HTTPS.
Will my WP sites continue to function normally on HTTP After installing the certificate?
Instead of, Do my users have problems entering my sites?
Thank you very much and hope you can help me.
Clifford Paulick
I am not sure I perfectly understood your comment, but here are a few points:
1) Installing an SSL certificate won’t affect your site still being loaded as HTTP (unless you force WP to do so) — so you could install the SSL cert and it’d all still work normally, as it always had
2) If you’re trying to load HTTPS for multiple installs on the same domain (e.g. site1.example.com and site2.example.com), you’d want to buy a “wildcard” SSL certificate for example.com.
I hope that helps.
Sorin Roiban
You got mixed content on this page.
Fahad Rafiq
After the Google announced that SSL is now a ranking factor. Everyone is rushing towards moving their website to HTTPS.
But most people do not realize there are many things people forget to do, like for example blocking HTTP pages from indexing and submitting HTTPS website to Google Webmaster tools again.
you cand find here: http://www.cloudways.com/blog/how-to-install-ssl-certificates-wordpress/
Clifford Paulick
Fahad, I agree that HTTPS is becoming more popular. However, I would not recommend sites switching to HTTPS purely for SEO purposes, especially if not taking advantage of SPDY (because then site load time will likely be longer, which may negatively affect your SERP). If all sites were HTTPS + SPDY, the web would be a better place, which I think is what Google’s trying to achieve in time.
Fahad Rafiq
Yes, 100% true.
vivian
I change setting from wordpress admin setting from HTTP to HTTPS then click save. It is now working and my website all look empty and i not able to log in my wordpress admin again. How to i change back to HTTP? Please help! URGENT!
Clifford Paulick
Hi Vivian. Sorry to hear about your issue. I visited your website and Chrome displayed “SSL connection error”.
Did you change BOTH WordPress Address (URL) and the Site Address (URL) from HTTP to HTTPS?
I would follow these steps to change it back to what it was before: http://codex.wordpress.org/Changing_The_Site_URL#Changing_the_URL_directly_in_the_database
Then, instead of making the change from
http://example.com/tohttps://example.com/in wp-admin settings, instead follow these steps to change to HTTPS: http://codex.wordpress.org/Changing_The_Site_URL#Edit_wp-config.phpI hope this helps.
vivian
Yes. i had change both wordress address and site address from HTTP to HTTPS and click save. After a while log in time out and i cannot access to my wordpress admin again. You guide to too complicated, i dunno how to access php admin. Can i make changes on my hosting hostgator? I dun’t want the HTTPS anymore, it only give me problem. I just want back my original website.
Waiting for your advice.
Clifford Paulick
I see your website is up again.
SSL/HTTPS is NOT simple. I am sorry you found the guide “too complicated”.
If you need additional assistance for your specific situation, I suggest you speak with your hosting company’s support department.
I wish you the best.
Razib Hasan
Have you tried clearing your browser cache and cookies? Also, flush your DNS. I have had similar problem which was resolved after clearing cache and cookies. You may try that as well if that helps.
Fawad
Thanks for replaying Clifford.
i did actully fixed most part of the problems.
What i did on my website is:
downloaded and installed on wp-admin;
-WordPress HTTPS (SSL)
-SSL Insecure Content Fixer
and used
define(‘FORCE_SSL_ADMIN’, true); on config.php
how it works now on my website:
all my pages appearing now with green bar https except the wp-admin login page and the home when i visit manually mydomain.com.
-the wp-admin login page appearing with https but without green bar
– visiting manually the home page which not forcing with https
-it takes very long time to visit the site with green-bar-https only on browsers Firfox and Google chrome, but on internet Explorer and safari works good, and the speed is fine.
What do you think that the reason of these 3 problems is?
Thank you very much.
Regards Fawad
Clifford Paulick
Fawad, I cannot offer help specific to your situation because there are too many moving pieces. I wish you the best.
Fawad
Hi Clifford.
iam really getting confused of reading all these options.
but i still don’t get this information very well, i wished there was step by step, so that i could fixed my problem.
the problem on my word-press website is, that i cant get the green bar,
the installing and validation of SSL certificate onto my server is done. i bought the SSL that gives green bar.
however i tried your first option that you mentioned above, that changing the URL addressees from wp-admin/settings. i changed, but it didnt worked, when i try to access my site with https, it takes like 100 year on firefox before i come into the site.
please can you help and tell me step by step, that what must be done in code files or wp-admin, so that my site work get into the green bar. please step by step.
Thank you very much for helping us with this word-press https-problem.
Regards
Fawad
Clifford Paulick
Hi Fawad. SSL is not necessarily an easy implementation. There are many factors, including your hosting, certificate issuer, WordPress options, plugins used, etc. As such, I cannot provide step-by-step options. I’d recommend getting assistance from your host and/or certificate provider. If they all say it’s good to go, then you’d need help tweaking your WordPress settings. Good luck.
james
Hi, Great article thanks!
One question, I use Amazon as the CDN for my images + CSS. On my SSL site its not pulling through any of the details. If I disable the CDN it works fine.
Is there a simple work round for this that does not need every page to be edited?
Thanks
james
Clifford Paulick
Thanks for your comment, James.
I’m not exactly sure how your Amazon CDN is setup, but if it always uses protocol-relative URLs or HTTPS URLs, then it should work fine whether someone loads the site as HTTP or HTTPS.
Sorry I can’t be of more help. I’d suggest reporting the HTTP over HTTPS issue to the developer of your CDN plugin.
Mazhar
Right click on command prompt (found in accessories folder),
Click on ‘run as administrator’, then click on ‘yes’ if UAC/User Account Control pops up.
then type:
ipconfig /flushdns
then hit enter.
Roger Lim
Hi there,
I am a WP beginner.
On this issue – How to Change Assets from HTTP to HTTPS > Step 1: Use Relative URLs > This is the simplest fix. If an asset (image, script, etc.) is hard-coded into a plugin or theme, change it from ‘http://site.com/assets/logo.png’ to ‘//site.com/assets/logo.png’.
My question is where can I access ‘http://site.com/assets/logo.png’ so that I can change it to ‘//site.com/assets/logo.png’.
Thanks
Clifford Paulick
Hi. Welcome to WordPress! 😉
You’d want to report the issue to the plugin developer if you determine that it’s something their plugin is doing.
Jerry
Thanks for the info, java console worked perfect for discovering my issue (plugin was hard coded for HTTP)
Aaron
I have been trying to find an answer to an important query I have about WordPress and SSL.
I had added this command/constant to wp-config.php.
define( ‘FORCE_ADMIN_SSL’, true);
The entire backend was being served via HTTPS flawlessly. Later, I modified this command/constant to:
define( ‘FORCE_ADMIN_SSL’, false);
However, the backend is STILL being served over HTTPS. That wasn’t the intended outcome. How can I ensure that even with the command being set to false the backend is served over plain HTTP?
Tommy
Great tips Thanks!
ur name
something to force ssl post action on comments would be nice. apparently, this requires some php hackery…
Ari Susanto
Very complete. I really like the part explaining that we can serve secure content in non secure (http) page. I can breath better now.
Thank you!
B
This was incredibly helpful, appreciate the step by step descriptions!
pako69
Hi
Thanks for your great post.
i have a valid and installed certificate, i only use this:
—-
define(‘FORCE_SSL_LOGIN’, true);
if ($_SERVER[‘HTTP_X_FORWARDED_PROTO’] == ‘https’)
$_SERVER[‘HTTPS’]=’on’;
—-
Results: the frontoffice (i mean http://www.mysite.com) of my site is ok but the backoffice do not load any CSS files ! (i mean https://www.mysite.com/wp-admin/)
Also, i don’t understand why, right after the wordpress login page i am redirected to https://www.mysite.com/wp-admin/) ?
Because, and if i well understand define(‘FORCE_SSL_LOGIN’, true); juste log you in a https way but the the wordpress backoffice should be http ?!
i’m lost…
Thanks
PS: excuse for my bad english, i’m french…
Clifford Paulick
Yes, that should force SSL login but not wp-admin. Make sure it works before adding conditional wp-config.php rules. You may also want to make sure the SSL cert is installed properly. Try your site in http://www.sslshopper.com/ssl-checker.html.
Marta Laurent Veciana
Hi!
I’m using the WordPress HTTPS (SSL) plugin to force https in certain pages. But now the theme icons (such as arrows, stars…) only show in the secure pages but appear broken in the non secure pages. Do you know what could be causing it, and how to fix it?
I did install another plugin called Fix SSL/Non-SSL Links but it doesn’t seem to be doing anything… 🙁
Thanks for your hep!
Clifford Paulick
You’ll need to check with the plugin author.
WP Fan
I have an SSL certificate on one of my sites and put “define(‘FORCE_SSL_ADMIN’, true);” in the config file, which should force SSL in the admin and login pages.
However, the green URL bar often switches to a yellow bar (warning of mixed content) when I test the pages in Chrome.
But often when I reload the page or refresh it, the yellow bar turns green. Is it secure then?
Also, I don’t understand how session cookies work but I worry about switching from secure to insecure pages.
I read that a third party might be able to read session cookies from secure pages on insecure pages. Is it possible for someone to obtain login information from a session cookie?
Thanks.
Clifford Paulick
Thanks for your detailed comment. I’ll try to provide some help:
If your browser bar displays https://…. then the SSL is in effect. There is no browser bar color change on HTTP pages.
If your browser bar is green, there are no insecure assets loaded. If you have a yellow bar and then you refresh and it changes to green, then there were insecure assets and for whatever reason that’s no longer the case upon reload. In Chrome, you can click View -> Developer -> JavaScript Console (same thing as opening the Inspector and clicking the Console tab) and it’ll list the insecurely-loaded content, if any.
FYI: I updated the post above with screenshots; see Option 4.
Other reasons for the same page showing different colors for the same page could be: need to clear cache, need to restart browser, or maybe the 2nd time you’re not waiting long enough for the content to load and the bar eventually will change from green to yellow.
Regarding security, if the page is loaded via HTTPS, everything on the page is loaded securely except the insecurely loaded assets. If the insecure asset is an image, it’s not going to affect the level of security of the transaction (filling a form, completing an order, etc.), but it could cause visitors concern and reduce conversion rates. However, if the form submission itself is HTTP, that’s not good, since that’s the stuff you want to protect.
For your cookie questions, check out these links for information/discussion of the topic:
http://en.wikipedia.org/wiki/HTTP_cookie
http://en.wikipedia.org/wiki/Cross-site_scripting#Cookie_security
http://blog.teamtreehouse.com/how-to-create-totally-secure-cookies
http://www.nczonline.net/blog/2009/05/12/cookies-and-security/
http://www.allaboutcookies.org/privacy-concerns/
Reading/skimming those links should give you enough information to know that web security is a complex challenge. Web security really deals with your server, your WordPress installation, your themes/plugins/extensions, your SSL issuer, the visitor’s security disciplines, the visitor’s browser, the visitor’s computer settings/viruses, etc.
Let me know if you have any other questions or just reply to let me know this answered them. 🙂
WP Fan
Thank you! This helps a lot. I will read through the articles as well.
jody
“This is the simplest fix. If an asset (image, script, etc.) is hard-coded into a plugin or theme, change it from ‘http://site.com/assets/logo.png’ to ‘//site.com/assets/logo.png’.”
Hi – could you describe how to do this? I’ve identified that my logo image is being sent via http, and I know that I need to change that to https, but I don’t understand how to do that on pages that are dynamically generated the way WP does it. If this were a simple, static, HTML page, no problem. But I have no idea how to make this simple change in a page that is created via a bunch of php files.
Thanks for any advice…
Clifford Paulick
Hi Jody. WordPress’ default “insert image” method does always insert the HTTP version (i.e. it’s clueless about whether or not the page will be served via HTTPS or not). My suggestion would be to switch from Visual to Text editor, find the
I hope that helps. If not, feel free to post a link to the HTTPS page serving the HTTP content or post a screenshot.
Michelle Grant
Hiya, I need to do this too, but my logo images are uploaded into a custom options panel. Where do I change the source? They are not in a page where I can access the source code?