Change all occurrences of “http” to “https” on a w

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

Answer 1

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

Answer 2

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:'".

Answer 3

After all the other migration steps if you still get mixed-content:

sudo apt-get install php5-cli
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
pushd /var/www/path/
php /path/to/wp-cli.phar search-replace 'http://example.com' 'https://example.com' --skip-columns=guid --dry-run

if ok,

php /path/to/wp-cli.phar search-replace 'http://example.com' 'https://example.com' --skip-columns=guid

from: https://helgeklein.com/blog/2015/01/switching-wordpress-site-http-https/

Answer 4

Had this exact problem today, wordpress-https didn't work at all for me, caused my whole site to hang in my browser once I tried saving the settings. I found a much much simpler plugin that did the trick beautifully: http://wordpress.org/extend/plugins/ssl-insecure-content-fixer/

As a side note, if you are running a reverse proxy like nginx like I am you'll need to follow the advice here: http://blog.netflowdevelopments.com/2013/04/10/fixing-this-page-includes-script-from-unauthenticated-sources-problem-with-ssl-wordpress-install-on-apachenginx-server/

essentially putting this:

if (stripos(get_option('siteurl'), 'https://') === 0) { $_SERVER['HTTPS'] = 'on'; }

at the end of your wp-config.php file

Answer 5

It is better to change the legacy URLs in database level, IMHO. To replace all http:// occurrences with protocol-agnostic //, run these SQLs:

UPDATE wp_posts 
SET    post_content = ( Replace (post_content, 'src="http://', 'src="//') )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

For single-quoted occurrences:

UPDATE wp_posts 
SET   post_content = ( Replace (post_content, "src='http://", "src='//") )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

For more, check here

Answer 6

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.