...
| Info |
|---|
Suitable for web developers or those familiar with HTML and CSS |
This document provides instructions on creating a ‘secure’ HTML template. HTML templates can be added to the software from Pages > Components > Templates.
In order for a web page to run securely, two things must be in place:
- A valid SSL certificate must be purchased and installed for the required domain.
- All resources such as stylesheets, images and scripts must be called from a secure location.
| Note |
|---|
Secure certificates already exist for the domains ca.engagingnetworks.app and us.engagingnetworks.app. This means that once your html template is secure, you will be able to use our secure certificate at no additional cost. But if you would like to run a subdomain such as ‘action.agoodturn.com’ under https (securely), then an additional SSL certificate will be required. |
Creating the template
When creating a SSL template, you will need to use the source code of the page that you would like to use as a wrapper for your engagingnetworks.app actions or donation pages (‘view source’ in your browser window). Copy and paste the code into Dreamweaver or Notepad in order to start working with the code.
You will need to remove the code responsible for the main content of the page to create a space for dynamic content and adapt the rest of the code.
When deleting the main content of the page from the code, please make sure you delete both opening and closing html tags for selected sections of the code. Missing div tags will cause the code to break. For example:
| Code Block |
|---|
<div id="intro"> (intro section begins here)
...
</div> (intro section finished here) |
Securing the template
Creating a SSL template imposes that all of the files (images, stylesheets, java script files) referenced in the code need to be called from a secure location.
Note: If your main website has an existing SSL certificate, then you are in a good position because it means the resources are already held in the secure location.
You should be able to just update http: to https: for the references and forgo the process of uploading the files into the Engaging Networks system.
If your main site does not have an SSL certificate, then all images, stylesheets, and script files can first be uploaded onto our system, and securely called in the html template.
Please follow the steps below:
Images
...
Basic Steps
Below are some very basic steps for ensuring your Engaging Networks pages and page templates are secure.
SSL certificate - All Engaging Networks pages must use an SSL (Secure Socket Layer) certificate which encrypts data sent between a website and a browser. URLs for pages using an SSL will include HTTPS. Up to three SSL certificates are included as part of the subscription to Engaging Networks (procured through Cloudflare).
Secure page assets - Assets or resources linked on a page or in a page template should be also secure (HTTPS). Resources include stylesheets, JavaScript libraries, images and scripts. Any assets uploaded to Engaging Networks images and files library are stored securely.
Update libraries regularly - If your page template includes JavaScript libraries such as jQuery, be sure to regularly update them with the latest version. Old and outdated libraries may contain vulnerabilities that could be exploited by malicious actors. You can see if your pages or templates are using assets with known vulnerabilities using the scan results report.
Use validators when possible - Restrict the data that can input in fields on your Engaging Networks fields. This can be done with the standard field validators or with custom validators using RegEx.
Reviewing and updating a page template
Templates can be created and managed in Engaging Networks under Pages > Components > Templates. Then select the pencil icon to edit the template. Depending on the type of template, this may immediately display the HTML of the template, but if it is a blueprint template you will need to select the Edit HTML (I know what I’m doing) option on the bottom left of the template.
Reviewing scripts and libraries
Scripts can be placed anywhere in the template, so check both the header and footer. Libraries are typically in the <head> but can be placed anywhere in the template, so check both the header and footer.
Find all javascript (.js) files by searching (Ctrl+F) for .js or the name of the library (ex. jQuery). If you know the library, you can also search for the exact link.
For any URLs not using HTTPS, open the file URL and save the file locally.
Upload all of the files to the Engaging Networks images and files library.
Change all of the URLs to the ones given by the File & Images manager
Updating out of date libraries
In addition to confirming that the scripts and libraries are loaded with HTTPS, ensure the most recent version of the library is being used and that library is being called from a reputable source.
Example of a jQuery library from Google
| Code Block | ||
|---|---|---|
| ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
To update a library, simply change the URLs from the old library to the new library in your template.
Examples where you might source libraries, check for the most recent version, and see known vulnerabilities.
https://releases.jquery.com/
https://getbootstrap.com/
https://developers.google.com/speed/libraries
https://cdnjs.com/libraries/jquery
| Note |
|---|
You should take into consideration the location of library hosting before using a service if you need to comply with GDPR. Please discuss with your own compliance teams to determine which to use. |
Reviewing Images
Images can be placed anywhere in the template, so check both the header and footer.
Find any images in the template by searching (Ctrl+F) for .gif, .jpg, and .png
...
and other image file extensions.
For any URLs not using HTTPS, open the image URL and save the image locally.
Upload all of the images to the Engaging Networks images and files library.
Change all of the image URLs in the page template to the ones given by the File & Images manager
...
Reviewing stylesheets
Stylesheets are typically in the <head> of the HTML but it is good to check both the header and footer.
Find all
...
stylesheet (.css) files by searching (Ctrl+F) for .js and .css.
...
For any URLs not using HTTPS, open the file URL and save the file locally.
Upload all of the filesto the
...
Engaging Networks images and files library.
Change all of the URLs to the ones given by the File & Images manager