Making Webpages HTTPS SSL Secure

Adding SSL secure webpages to your website

Find your secure server
To use secure https:// links a security SSL certificate is required (Secure Sockets Layer). You'll need to contact your web hosting company to see if you have SSL and what the secure link path is. Your secure URL may look something like the following for a single page:

https://plus34.safe-order.net/your-web-domain/

Or it may appear like the following:

https://your-web-domain.com:2083/

Or if your entire website will be secure you'll use https in the link instead of http:

https://your-web-domain.com

In any case you'll need to contact your hosting company for help with this setup.


Secure setup notes

• Allwebco Design does not offer support for creating a secure site or webpage. Contact your hosting company for help and support for SSL.
• In most cases you will not need to place secure pages in a subdirectory.
• You may, or may not, need to edit each HTML page to make them secure.
• You may, or may not, need to edit each .css file and .js file with the secure path.
• If you have Flash animation in your webpages, you may need to hard code your text into the Flash header. See advanced Flash variables. Optionally, you can use the template graphic logo option on your secure pages.
• You may optionally (if securing single pages) want to make copies of your .css files and .js files and rename them to be "secure-filename.xxx" files so you have separate secure page support files.

Full secure website option
If you're making your entire website secure with https:// linking, adding secure paths to all your files as outlined below may not be required. With a full secure site, optionally check your webpages to see if you added any absolute links that use the full domain path and change them from http:// to https://. Additionally you may then want to "force HTTPS" using your .htaccess file. This is an advanced user setting. Contact your hosting company support for help.

See: Google Support - Secure your site with HTTPS


Creating secure single pages
Important: The following modifications may be required only if you are making a single page or just a few pages on your website secure.

Choose an HTML page you want to make secure. This type of editing is what is known as adding Absolute Paths. You will be adding your secure server path in front of all .js file paths, image paths and .css file paths in your HTML secure page.

In the examples below we are using https://your-web-domain.com:2083/ as the secure path link. Your secure path may be different.

Note: You will need the support files (css, js and images) uploaded to your hosting area for this to work when editing on your local hard drive.

Edit your HTML page on your local hard drive. You will put https://your-web-domain.com:2083/ (or your SSL path) in front of all the .js paths, the .css paths, and in front of every image path.


Edit all .css file lines. Example:

<link rel="StyleSheet" href="https://your-web-domain.com:2083/coolstyle.css" type="text/css">


Edit all .js file lines. Example:

<script type="text/javascript" src="https://your-web-domain.com:2083/javascripts.js"></script>


Edit all image file lines. Example:

<img src="https://your-web-domain.com:2083/picts/contact.jpg" height="125" width="200" border="0" alt="Image" class="borders"><br>


Note: In "Catalog Order Form Templates" you will need to add your secure path to the Javascript in the "ordering.html". Search for "catalog/" in this page and add your path similar to the following:

document.write('<img src="https://your-web-domain.com:2083/catalog/'

You must do this with every picture and every file that the secure page will be using.


The .js files
You must also edit your "menu.js" and put http://your-web-domain/ or https://your-web-domain/ in front of all the links and put https://your-web-domain.com:2083/ in front of all image paths. You will need to do a lot of editing to your files to make this work properly.

You will need all image paths in your "menu.js" to be secure paths, however, the links to other pages in the "menu.js" need to be absolute, but not secure to non-secure pages.

Check every .js file that is being used in your secure page for image paths.

In the "header.js" edit the path to the logo image (or .swf file in 2 places if you have a Flash header) to make them a secure path, or use the graphic header for your secure page. Also see "Secure setup notes" above on this page.


The CSS file
Search your .css files for "url". These will be image paths. You will need to edit all .css file image paths with your secure path. EXAMPLE:

background-image: url("https://your-web-domain.com:2083/picts/menu.gif");


Link to the secure page
Once you have edited your template files as indicated above, you can now add a link to your secure page in your "menu.js". In this example we have made the contact.htm secure. Your link should appear similar to the following:

https://your-web-domain.com/contact.htm


SSL Certificate
An "SSL Certificate" may be offered by your hosting company. You will need to contact your hosting company to see what they offer and for more information on "SSL Certificates".