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

Answer 1

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

Eg 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/

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

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!

Answer 4

我认为你应该在服务器端这样做，通过设置cookie或类似的东西，而不是使用JavaScript来处理这样一个潜在危险的安全漏洞。

Answer 5

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 6

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 7

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 8

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