Making my website secure

When visiting my website it says not secure. I would like to switch this. I believe I have to change to https. any advice on how to approach this?

You have to change that on the server (and not in MODx).

If you have access to a control panel (like Plesk or cPanel) from your webhosting provider, then you should be able to add an SSL certificate there.

Your host can sell you an SSL certificate, but there is also Let’sEncrypt, which offers free certificates. Some hosts will install a Let’s Encrypt certificate for you, though it can be difficult to find that option since they’d like to charge you a yearly fee for a commercial cert.

You’ll also need a redirect in your .htaccess file to redirect all requests to the https URLs.

If you have https URLS hard-coded for things like images, JS, or CSS files, you’ll have to change them manually. It might be worth getting the CustomSearch extra, which will help you find them all, even in chunk, snippet, template, and plugin code, TVs, or resource content fields.

CustomSearch also has search and replace, but unless you understand regular expressions, I wouldn’t recommend using it, since using it blindly could change https in to httpss, which would break the site. It will provide links to edit all cases of http in the Manager, which would be safer.

This is available for free in MODX Cloud. You just need to follow the instructions here: https://support.modx.com/hc/en-us/articles/230872628-Free-SSL-HTTPS-with-Let-s-Encrypt

1 Like

Thank you for your help. I am still having an issue though. I added the https in my “view site” form. when I view the site from the dashboard then all of my CSS is gone. when I view the site through the manager, I see my site but then it is still unsecure.

Make sure you have this exact tag (with the exclamation point) in the head section of all your templates:

<base href="[[!++site_url]]" />

[Update]
Doh. I can’t believe I left out the exclamation point in this example. Fixed now.

This is especially true in MODX Cloud as site_url is dynamically created and cached to memory based on the request URL. If you want to visit a site on abc123.modx.dev or your domain.com and the site work, having this uncached is key. Also, if you put it above all your other assets, they can be relative to base and will work no matter where the site is.

See an example head:

<!DOCTYPE html>
<head>
    <base href="[[!++site_url]]" />
    <meta charset="[[++modx_charset:lcase]]" />
    <meta name="description" content="[[*description]]" />
    <meta name="author" content="[[*createdby:userinfo=`fullname`]]" />
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />
    [[*searchable:is=``:then=`    <meta name="robots" content="noindex,nofollow">`:else=``]]
    <title>[[*pagetitle]] - [[++site_name]]</title>
    <!-- Included CSS Files -->
    <link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <script type="text/javascript">
       var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-ABC123FAKE-1']);
      _gaq.push(['_trackPageview']);
    </script>
    [[*extraHead]]
</head>