SSL URLs of background images

Beaver Builder
1

Hi guys,

I’m currently testing SSL on my websites. It seems to be working fine (with help of https://wordpress.org/plugins/ssl-insecure-content-fixer/ plugin) except the URLs for background images I’ve used in Beaver Builder plugin rows and columns.

The ‘http://’ seems to be hardcoded in page layout stylesheet causing warnings when I check through Chrome webdev tools console. (You can check out the https://themedemos.webmandesign.eu/polyclinic/ page).

Could you consider adding the code below into the stylesheet generator? Or simply hook this onto the entire stylesheet CSS output processing?

str_replace( array( 'http:', 'https:' ), '', THE_URL_OUTPUT_FUNCTION_HERE );`

Thanks!

Regards,

Oliver

2

Hi Oliver,

We don’t actually create the links for the images ourselves, we are actually using WordPress to pull the images from the media library.

Therefore, it is very likely that you probably created those layouts before you went HTTPS. If this is correct, can you try clearing the cache from WordPress Admin Dashboard > Settings > Page Builder > Cache and see if this resolves your issue, please.

Thanks,
Danny

3

Hi Danny,

I totally understand that you are using WordPress native functions to create the links. That’s perfectly fine. Yes, you are right, I’ve created those layouts before I tried HTTPS. I forgot to mention that I’ve flushed the BB’s cache before 'cause I thought this would be the case.

Anyway, I think my proposed solution would be more flexible I think. Because that way you can use your website with and without HTTPS. I think I’ll create a pull request for this for you guys, I just wanted to talk this over in case I’ve missed something.

Thanks again, Danny!

Regards,

Oliver

4

Hey Oliver,

Sounds good on a pull request. I’d love to see what you have in mind there. Let me know when you put that through.

Thanks!
Justin

5

Hey Justin,

I’ve created a very simple pull request for you, but should do the trick perfectly fine.

Regards,

Oliver

6

Thanks, Oliver! I understand what you’re doing there now, very clever!

My only question is, is there any possibility of this breaking something? It looks like it should work fine for links on the main domain, but what if a link gets into a stylesheet from another domain that doesn’t have SSL enabled? Will that throw and error and not render the content?

Let me know what you think.

Justin

7

That’s interesting because I didn’t have any trouble like that when I made my website SSL using BB.

And yes, Justin is correct, if you’re using a link to a stylesheet or even a google font url, it will not give you the green lock icon. That’s why I place the google fonts inside the them itself.

8

To answer your question first: if you enable SSL on your website than every asset has to be loaded via HTTPS. Otherwise your website is not protected - at least that’s what browser says (Mark’s case). So, you need to be aware of this. In case of Google assets (like fonts for example), these are HTTPS ready, so there is no issue with them whatsoever. I personally use the protocol relative URLs for Google Fonts in my themes and it works fine. CDN hosted sources also support HTTPS - at least the major ones I’ve tested.

However, digging deeper into the “protocol relative URL”, I’ve found a different issues:

  • If you are loading a local file, the protocol would be file:// instead of http:// or https://. This is not so hot for us, however, as this should never happen with BB page layouts.
  • More importantly, for security reasons this is considered as an anti-pattern nowadays according to Paul Irish.

So, I went ahead and edited the proposed pull request.

It’s kind of weird to me that this function is needed though. You guys use WordPress native functions to retrieve image source URLs and I thought that WordPress would handle HTTPS in that case. Well, not working for me and here is how I’ve tested:

  1. I have a website built with BB and wanted to make it SSL now, so I've set up SSL certificate for my website, set the WordPress URLs to HTTPS in Settings > General, so the website defaults to HTTPS. (To test this, I've added a helper to display the state of is_ssl() function for me. It worked fine, with TRUE as an output.)
  2. I've checked the website and got those http:// background images in BB page layout stylesheet (these were "Mixed content" warnings in Chrome browser's console).
  3. So, I went ahead and flushed the BB's cache, thinking this will change the image URLs to https:// now that the whole website is SSL. However, that was not the case and I was left with http:// URLs still.
  4. I went ahead and tested if the is_ssl() function actually works when generating BB page layout stylesheet. It does.
  5. Than I've tried to edit a particular page with BB and change the background image on one row. This worked fine: the correct https:// image URL was applied on the row background, however, all the other previously set background images stayed at http:// protocol.
  6. So, finally I came to this conclusion: When you set up your SSL on an established website that uses BB, the BB's "Clear Cache" button won't help you to fix those image URLs in page layout stylesheets. That's why I needed to create the additional function in a pull request. This function now clears all those http:// even if you use "Clear Cache" button after you enabled SSL on your website. I have also renamed the function now to be more descriptive for its updated usecase.

      7. Hope this helps.

      Regards,

      Oliver

9

Hey Oliver,

Thanks for the detailed follow up!

To answer your question first: if you enable SSL on your website than every asset has to be loaded via HTTPS.

That is a really good point. Makes sense.

So, I went ahead and edited the proposed pull request.

I had a look at the PR and I like the change. I’m a lot more comfortable with that approach and actually think it will solve some SSL pain points we’ve experienced in the past.

It’s kind of weird to me that this function is needed though. You guys use WordPress native functions to retrieve image source URLs and I thought that WordPress would handle HTTPS in that case.

It just occurred to me that the issue is either that WordPress is storing absolute paths in the database or that we’re storing the image URLs in the node settings. It’s probably the later.

I’ll go ahead and merge the PR in, I think it’s going to be a big win for support requests of this nature. Thanks for your help!

Justin

10

Hi Justin,

or that we’re storing the image URLs in the node settings

Yes, you are correct. It occurred to me after I submitted my previous reply. And that’s a good approach you use as otherwise it could be impossible to export/import the content using WordPress’ native tool for it. So, with this SSL fix it works just fine, you just need to flush the BB’s cache once you enable SSL on your website.

There will be a lot of websites going SSL these days I think as hosting companies starting to implement https://letsencrypt.org/

Thanks for merging the PR!

Regards,

Oliver