Protecting your work for webdesigners

Screenshot of HTML Secure

Quite a while ago I published a tool named “HTML Secure“. Using this tool you can protect any static HTML Website you have build using an advanced login screen. The best thing though is, that every time someone logs in, it is logged. Let me explain to you how it works and how you can use it.

How it works

This is tool basically consists out of two files: .htaccess, users.sql and index.php. The .htaccess file redirects all HTML-page calls to index.php. In index.php there is a script, which checks, if the user is logged in otherwise it displays a login screen.

How you can use it

All you need to do to use this is upload the .htaccess and index.php file into your static website (a website only consisting out of HTML, JS, CSS, etc. …). Then you will need to do some small changes in order for the script to work (set the correct pathes):

  • In the .htaccess file change line 5: RewriteRule ^(.+?)\.html$ /index.php [L,NC] to RewriteRule ^(.+?)\.html$ /absolute/path/to/subfolder/index.php [L,NC]
  • In the index.php you only need to change the ROOT_DIR constant in line 4: example define('ROOT_DIR', '/absolute/path/to/subfolder')
  • And in the login.js you will need to change the post request url in line 5: from /index.php to (you guest it /absolute/path/to/subfolder/index.php

When you now call index.php for the first time a file users.sql is created. If you open this sqllite file using an according editor (e.g. SQLite Manager for Firefox) you can add users by adding the username in small-letters and the password in cleartext index users table.

Everytime someone logs in, it is logged in the log table.

Advanced possibilities

Since you have a PHP-file where all the HTML goes through you can now even let it generate dynamic menus or insert the header into everypage automatically, so you don’t have to type it on every page. You can build your own little CMS!

View it on GitHub

Comments are closed.