SECURING YOUR WEB PAGES:

Cover Image

See bottom of article for accreditations for image credits and permissions

Knowing when enough is enough!

Have any of you found yourselves going around in circles by trying to hunt down the perfect way to make your HTML pages secure before uploading them into the public domain? I’ll bet almost every HTML/CSS devotee has, at some point in time, found this to be a very tall order indeed. I personally did a lot of experimentation before finding some satisfactory answers to this vexed question. The best approach that I can come up with lies in a raft of different measures that will form your total web security ‘blanket’, rather than in any one simplistic approach.

Article by: Adrian McGlinchey

Introduction

After reading many an article and watching heaps of video tutorials on the subject, certain things are becoming much clearer to me now. Some ‘expert’ technology-writers have put forward the argument that there is no effective way to secure HTML pages, and then they refuse to comment any further. I think they could still try to offer a solution even if it is an imperfect one.

When people ask, “How do I secure my HTML (or web) pages?” they are often open to suggestions by this stage. Once we accept the notion that there is probably no infallible way of securing HTML pages, surely we can move on to the next round of possibilities, such as, “What is the next best thing we can do?” Having expanded the terms of the question, let’s try to examine the possibilities.

METHODS:

Protecting our HTML pages can often open a real can of worms. The downsides can far outweigh any benefits gained. Disabling the right click or the copy/paste functions, for example, can annoy our best customers so much that they, the customers, abandon our pages, never to return. If you want to disable the right mouse-click, do this in a very selective way. Disabling right-click for the page header, for instance, will offer some protection of your branding, such as logo and stylised business name, which often appear in the header.

Leave the main contents of the body and footer tags unprotected. The reason for this is that you shouldn’t be putting any content (except branding) on your web pages that you are not happy to share with the public. Don’t get your best customers and prospects upset because they can’t copy/paste material for their own reference; it’s just not worth it. There are other ways to deal with securing your web pages, and we will go through them in steps:

  1. Disable the context menu in the header; this will in turn suppress the right-click menu, where the copy/paste options are. Do not put this in the html or body tags. This will lock the entire page down, and usually only serves to aggravate our better customers. Here is the code, to be used sparingly:
    <header onContextMenu="return false;"> </header>
  2. Use the same attribute as in step 1 to disable the context menu for individual images. Don’t do this to all images PLEASE; only things such as logo and also badges for SSL certification and SiteLock security. Place the onContextMenu code (shown in Step 1) within an image tag of your choice, for example:
    <img src="images/filename.png" width="100" height="35" alt="logo _image" border="0" title="Click to return to home page" onContextMenu="return false;" /&gt

    This will disable right mouse-click and drop-menu on the image specified within the tag.

  3. This step is optional, but we can display a message when right-clicking occurs, as follows:
    ‘Type your message’ can be something like ‘No right clicking allowed!’, or it can be a polite copyright reminder notice, such as:

    <header onContextMenu="alert('Type your message'); return false;" >

    ‘Type your message’ can be something like ‘No right clicking allowed!’, or it can be a polite copyright reminder notice, such as:

    @copy; YYYY. Owner's Name. All rights reserved.

    Once again, a dedicated web head can usually find a way to crash through this, but they can’t say they weren’t warned. The same can be inserted into an image tag, like we did in Step 2, as follows:

    <img src="images/filename.png" width="100" height="35" alt="logo image" border="0" title="Click to return to home page" onContextMenu="alert(Your message...); return false;" />
  4. If keyboard shortcuts are also a concern, we can use a similar technique as in the previous three examples. Once again, only put this code into the header and/or branding images:
    <header onContextMenu="alert('No right clicking on header contents');return false; onCopy="alert('Copy function not available on header'); return false" onCut="alert('Cut function not available on header'); return false" onPaste="alert('Paste function not available on header'); return false"">

Deactivation of the context menu would have served the purpose by itself, except by treating onCopy, onCut and onPaste separately, we can give them their own unique alert messages.

Just don’t forget, though, to leave plenty in the body section for the viewer to read, copy/paste, save and print. No honest viewer is going to begrudge us protecting our brand, unless it is some IT genius hacking into our pages, but then that would make them the Cyber-criminal. At least in any dispute, we can clearly demonstrate that we have taken reasonable measures to protect our intellectual property, and still remain fair to the viewers.

OTHER WAYS TO SECURE YOUR WEB PAGES:

  1. ENCRYPTION

    Encryption is often touted as a great way to add security to our web pages, but it may not always be what it is cracked up to be. Some people have the software they need to crash right through your encryption code.

    The biggest downside here is that encryption usually requires a JavaScript solution, and many users will go to their browser settings to disable JavaScript to put a stop to nuisance web-bots that try to invade their devices. Since JavaScript is not essential for web browsing, you may be severely limiting your audience, because fully encrypted pages won’t work on browsers that have had JavaScript functionality disabled.

    For the aforementioned reasons, I am giving encryption a miss; to look at other methods.
     

  2. OBFUSCATION

    Obfuscation is an attempt to hide or conceal HTML code by rendering it unreadable, without necessarily using encryption or disablement techniques. As with encryption, though, many experts are telling us that it is still useless, because anyone who is proficient in these matters can break into or reverse engineer almost anything. The chances, however, of a cyber-hacker being in any way remotely interested in our puny HTML coded pages are very slim. The top reasons why cyber criminals try to steal someone else’s code are to:

    1. Harvest email addresses for spamming,
    2. Steal bank account security details, and…
    3. Steal valuable state secret

    Unless you are developing something so revolutionary and so remarkable that you have something that no one else has, then the efforts you would have to invest into encryption and obfuscation are just not worth it!

    As with disabling the context menu, it may be better to only encrypt or obfuscate, say, your affiliate number or email addresses, but not the entire page, and for this there are plenty of cheap utilities you can download to handle this much, such as Cloaked Affiliate Link Builder. If you want to try ‘Cloaked Affiliate Link Builder’, then download a copy by going to:

    http://www.curryk.com/linkbuilder.html
     

  3. FILE COMPRESSION

    File compression can be a better alternative to encryption or obfuscation. The trick here is not to compress the file so tight that the server can’t read your code. Compress the HTML file by removing all unnecessary white-space, which includes blank character spaces, line breaks, and blank lines. This does make your code hard on the human eye, to the extent that even the pros will find it difficult to read, and who would want to waste their time and energy unscrambling a mountain of spaghetti code unless there is something truly awesome to be gained?

    There are many online sites that offer us the service of compressing code, but the problem with this is having to hand your code over to some third party. There are some good freeware utilities that will do the job from the relative privacy of your own local hard drive. I find Absolute HTML by Alentum to be the best of the free ones with fewer bugs than the rest, such as; HTML Optimizer, and HTML Tidy.

    Another little trick, after you’ve cleaned up your code with Absolute, is to position the curser before the first character on your HTML code page, hold down the ‘Enter’ button until you’ve created about 80-100 blank lines. Do this ‘after’ you have cleaned up your code with Advanced HTML. Now if anyone were to open the inspect page source window on their browser, they will initially see a blank page. If they are savvy enough to notice the scrollbar, and they scroll down the page, they will see code but it will be difficult to read. You can download Alentum’s Advanced HTML software by going to:

    http://download.cnet.com/Absolute-HTML-Compressor/3000-10247_4-10052665.html

 

SUMMARY:

Here are the key points to remember in regard to securing our web pages.

  1. Disable the context menu in the page header, to protect your branding.
  2. Disable the context menu for any images related to your branding, including logo and security badges.
  3. Do NOT disable the context menu on main viewer content; just post up text and images that you are happy to share with the public.
  4. Stop wasting time and money on encryption and obfuscation software and techniques; there are better ways to handle the possibility of theft of your intellectual property, as you will see from this discussion.
  5. Once your web presence has been established, it is well worth paying your web hosting company for an SSL certificate and also for SiteLock, before you start attracting much traffic. When applied to a website, these products help keep hackers away and also protect sensitive information, such as financial transactions and customer’s personal details. This way we leave encryption and obfuscation to the specialist experts in the field for the things that really matter, instead of trying to code it ourselves into the HTML script. We also create goodwill by allowing the viewing public to enjoy some free, unobstructed content. People are usually only too happy to revisit websites that offer some free content and advice.
  6. Keep your premium product behind a payment gateway at all times; only offer limited free samples on your main pages. Protect your copyright by applying watermarks to your best images, and consider registering all eBooks, DVD’s and infoPacks with International Serial Numbers (ISN)s, and also with embedded Digital Rights Management (DRM) security.

I doubt that I have covered every possibility here, but I hope the topics discussed in this article will help my readers to start thinking ‘outside of the square’. This blog is open for public responses, so I hope some of you will offer constructive feedback and even add to my list of suggestions with some of your own. Sharing is growing because, by sharing, we hone our communications skills, and we also extend our reach ever deeper into the community.

ACCREDITATIONS:
Original image sources with permissions to use

“Hi-tech technological” by Binu Omanakkuttan. ID: 71660480 | Dreamstime.
URL: https://www.dreamstime.com/stock-photo-hi-tech-technological-background-digital-illusrtation-image71660480

“Cyberspace with digital rising, digital city” by Valerii Brozhinskii. ID: 75206294 | Dreamstime.
URL: https://www.dreamstime.com/stock-photo-cyberspace-digital-rising-digital-city-abstract-background-blue-lines-binary-chain-image75206294

Design composition by Adrian M. McGlinchey Oct-2017
Sections of the two above referenced images were copy/pasted onto a design background; word captions were then superimposed onto the background.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s