SSL Issue With Buddypress

Hi all,

This is not in relation to any WPMUDEV plugins or themes but more a general issue that, after hours of searching through Wordpress forums, I still cannot find an answer for.

I'm running a Wordpress/Buddypress site with roughly 6,000 members. I'm using a "Let's Encrypt SSL Certificate" on the site combined with Really Simple SSL plugin and the SSL Insecure Content Fixer plugin.

This has properly secured the site itself and it passes all the browser checks to show the site is secure. That part is good.

Unfortunately, any page, status update, group or forum that contains user or staff posting link with only http vs https it many browsers through up a server verification warning because the site is SSL but the page being loaded contains external links that are not secure.

Additionally, when users try to post links via the Buddypress Activity Plus plugin the image from external links shows in preview but will not show when actually published to the activity stream if the URL being shared is not https.

Anyone have experience with this? Facebook can preview and link to http all day long while having https secured site. How are they able to do this?

Thanks in advance for any help you might be able to provide.

-Eric

  • Sajid
    • DEV MAN’s Sidekick

    Hello Eric Odom,
    Hope you are doing good today :slight_smile:

    I don't think Facebook use external image links for images or any other media on their site directly. Instead, they host it on their server and use it on their server and use it from there.

    So the image link will be something like this:
    https://external-cdg2-1.xx.fbcdn.net/safe_image.php?d=AQAEIqcA4ZoVbAK8&w=300&h=300&url=http%3A%2F%2Fjwebsol.com%2Fwpmudev%2Fwp-content%2Fthemes%2Ftwentyseventeen%2Fassets%2Fimages%2Fheader.jpg&cfs=1&_nc_eui2=v1%3AAeHMVNSxLCY0AHLCIjbsu4B3K4Sda7rFKfanYQNsCjGvPN66qNYCOYlPbvmA3sESXwlUBg10LuLUrkKehPBjcNXPO3G7yIrplt2bt0-dQWTRnnftYLZaKtTEKdwqaYKVEcY&_nc_hash=AQBcd7y8MpaESGOj

    That definitely requires a good deal of development work to copy the image from a URL, host on your server temporarily and link it from there instead of insecure resource.

    SSL Insecure Content Fixer plugin should replace the nonsecure URL with secure URL. But in case, it don't then you can replace URLs with following jQuery code.

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

    However, it still depends on the site you hosted on. If that is not SSL supported, it will throw an error too.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid - WPMU DEV Support

  • Eric Odom
    • Design Lord, Child of Thor

    Ok will try that code. On the images, to be more specific, Buddypress Activity Plus is trying to show the external image URL on link share preview. And in most cases that image is not SSL. So for the majority of links shared there is an image error and the non-ssl image URL throws a warning on some browsers.

  • Sajid
    • DEV MAN’s Sidekick

    Hello Eric Odom ,
    Hope you are doing good today :slight_smile:

    That is jQuery code, if you are using a child theme then you can add it in the js file of your theme.

    But if you are not sure where exactly you need to add that then just add following code at the end of functions.php file of your child theme or use it as mu-plugin.

    function wpmudev_change_images_ssl(){ ?>
    
    	<script type="text/javascript">
    			jQuery(document).ready(function($){
    				if (document.location.protocol === 'https:') {
    				    $('img').each(function() {
    				        var href = $(this).attr('src');
    				        if (href.indexOf('http:') > -1) {
    				            href = href.replace('http:', 'https:');
    				            $(this).attr('src', href);
    				        }
    				    });
    				}
    
    			});
    	</script>
    <?php }
    add_action( 'wp_footer', 'wpmudev_change_images_ssl', 999 );

    If you go with mu-plugin route then, go to your /wp-content/ folder via FTP, and find the folder called "mu-plugins". If there is no folder with that name, then you'll want to create one. Then, create a file inside that folder, and give the file any name you like and paste the code in there.

    You don't need to activate that plugin, as it will be always be automatically activated. Please be sure to add a PHP start tag at the beginning of the code if you insert this code as a mu-plugin, like this:

    <?php

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid - WPMU DEV Support

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.