Change all occurrences of "http" to "https" on a wordpress page

Question

I am in the process of implementing SSL on some of my wordpress-powered site's pages. Currently I'm getting mixed content warnings on the secured pages - my custom theme includes a lot of links and src attributes that occur on all pages. Links appear in the header, footer, the navigation (auto generated by wordpress function) and the sidebar (partially from a plugin). While I could theoretically write a custom header and footer for the secured pages, it'd be impossible to use the plugin and the navigation on the secured page.

What I've been trying to accomplish all day is to write a javascript or jQuery function that changes all occurences of "http" to "https" on pages that are served via SSL.

This problem blatantly showed me the limits of my coding capacity. Problematic is that the finally served document consists of several php files, some of which I have little control over (would have to modify plugin(s) which are (A) rather complex and (B) I'd like to update in the future). Also regular expressions are still a mystery to me.

I don't know if this is at all possible and whether triggering the change with $(document).ready or window.onload wouldn't be too late anyway, since the browser will issue the mixed content warning earlier than that.

Thanks in advance, Johannes

Solution 1

I think you should use a plugin like "WordPress HTTPS". There are too many edge cases that you should be aware of (like third party plugins you don't have control) and using a well stablished add-on like this one would be an interesting approach.

WordPress HTTPS is intended to be an all-in-one solution to using SSL on WordPress sites. Free support provided!

Solution 2

Have you looked at the protocol-agnostic relative url prefix?

E.g. if you have the following

<img src="//myimage.png" />

It will use whatever protocol the page is currently on. More info: http://paulirish.com/2010/the-protocol-relative-url/

Solution 3

I agree with the other posters who suggest that there are better ways to do what you are after. With that said, it sounds like you're in a bind, so let me offer a crack at it. (BTW, hat tip and a +1 vote to the protocol relative URL; I didn't know about that!)

Anyway, I assume what you are after is in <a> tags, but it should be easy to extrapolate this to others:

if (document.location.protocol === 'https:') {
    $('a').each(function() {
        var href = $(this).attr('href');
        if (href.indexOf('http:') > -1) {
            href = href.replace('http:', 'https:');
            $(this).attr('href', href);
        }
    });
}

With this help offered, I would encourage you to see if there's a safer / more practical way to do what you are trying to do. I will also mention that this approach will likely only work for links; modifying CSS and script references after the page loads will certainly backfire and not get you the result you want.

Notice the ":" in "document.location.protocol === 'https:'".

Solution 4

if you only want to make sure there is no mixed content when an HTTPS request is made, try adding simple code snippet to the "function.php" file of the current theme.

function _bd_force_https()
{
    if ( empty( $_SERVER['HTTPS'] ) ) return;
    ob_start();
}
add_action( 'template_redirect', '_bd_force_https', 1 );

function _bd_output_https_page()
{
    if ( empty( $_SERVER['HTTPS'] ) ) return;
    echo str_ireplace( 'http://', 'https://', ob_get_clean() );
}
add_action( 'wp_footer', '_bd_output_https_page', 99 );

PROS:

• very lean, simple to add
• does not use javascript/jquery

CONS:

• not a plugin so it will break when theme is changed
• cannot intercept HTTP requests made by javascripts from the client side

Solution 5

I think that you should be doing this on the server side, via setting a cookie or something like that instead of using JavaScript to handle such a potentially dangerous security hole.

View more solutions

Comments

[Johannes Pille]

While this is a truly interesting approach that I did not know about, it only solves my problem for code included in the page that I have written myself. It would still involve altering plugin code and manually generating the navigation (the contents of which are subject to regular change). Thank you for the insight though - I learned something new that I am sure will be useful in the future!

[Johannes Pille]

I had come about this plugin myself, earlier. Unfortunately, when I made it rewrite all internal and external links that were not https server load shot through the roof. It seemed like the perfect solution, but rendered my server unusable. Thanks anyway!

[Johannes Pille]

Had caught a buggy version of this plugin back in the day. Works like a charm nowadays...

[unc0nnected]

this plugin was broken when I just tried it now. As soon as I saved the setting it set a garbage cookie in my browser that caused the entire domain to hang for me. Just for that browser mind you, as soon as I cleared the cookie it would load again but if I went back into the admin area and tried to save teh settings for the plugin again everything would just hang all over again.

[deflime]

Tried 2 plugins and another bit of config.php code before this one WORKED LIKE A CHARM!!!

[b1nary]

this, i am shocked JS is considered a proper answer for this.

[Thor84no]

This is pretty useful, but you should do a null check before using href: if (href != null && href.indexOf...) since anchor tags are not required to have hrefs.

[Micro]

says this plugin is 2 years old but is it still safe to use?

[Johannes Pille]

+1 Even though this is an age old question of mine and I ain't a fan of output buffering. Gotta give you that that's clever.