This document summarizes a web-based password management application called Passwords Safe. It includes sections on the web design with a single column layout, backend implementation using LAMP stack on a Debian system, database structure with two tables, and security measures to prevent SQL injection and XSS attacks. The application allows users to manage multiple account passwords from a web interface after logging in.

1. Course: Information Technology, Module BTI7054 Web Programming
Author: Roland Bruggmann, brugr9@bfh.ch
Lecturer: Prof. Dr. Emmanuel Benoist, bie1@bfh.ch
Date: June 2014
Berner Fachhochschule | Haute ´ecole sp´ecialis´ee bernoise | Bern University of Applied Sciences
Passwords Safe
Web-Based Password Management Application
Term paper

2. 1 Introduction
For the development with HTML(5), CSS(3), JavaScript and PHP the IDE Eclipse with PDT1
and the software ’git’
for versioning were used. The web-application got tested with Mozilla Firefox v29.0 and partially with Chromium v34
webbrowser. It is actually running and accessible over https://pwsafe.geogeek.ch/, the code can be downloaded from
https://github.com/brugr9/pwsafe/.
Once logged in a user can access three pages:
ˆ Dashboard
ˆ Accounts Management (List of Accounts / Add an Account / Edit Account Nr. XY)
ˆ User Profile
Figure 1.1: Screenshot of ’Passwords Safe’:
Accounts Management for a user named ’geek’.
1Eclipse PDT: PHP Development Tools for Eclipse
Passwords Safe, Roland Bruggmann, June 2014 1

3. 2 Webdesign
2.1 Layout
The site has a single column layout with four sections (from top):
ˆ <header>
ˆ <nav> (horizontal navigation)
ˆ <div id=“content”>
ˆ <footer>
The layout is optimized for a minimum resolution of 800 x 1280 pixels. Therefore, by the use of a todays tablet PC, displaying
all elements without horizontal scroll should be guaranteed.
2.2 Style
As the webapplication serves with security releveant features, the idea was to transport the spirit of a sound firm or
organisation by layout. The visual message should say:
ˆ smart and simple (usability),
ˆ calm (no panic) and
ˆ clean (serious).
First, colors were used as given by the corporate identity of the organisation. The background showing dotted ’grip’ suggests
giving technical control to the user (usability). For letters/text with a linking anchor, the transition on mouseover is delayed
in time (no panic). And finally a typographic point of view: For the header elements, the font “Trebuchet MS” is in use.
Moreover, the proportional serif typeface“Linux Libertine“ was choosen for the content and the footer, in combination with
“Linux Biolinum”for titles and links (calmness, seriosity)1
.
Furthermore, the smooth look-and-feel derives from features supported by CSS3, e.g. border-radius, box-shadow and
transition: The login and signup forms fade in without any extra code in JavaScript.
2.2.1 Icons
The icons are png-formatted and 16-by-16 pixel in size. They are part of the famfamfam iconset called“Silk Icons”(version
1.3)2
. For having a kind of discreet colors, the icons are declared as a bit transparent by CSS.
2.2.2 Alternate
With e.g. Firefox webbrowser, a user can choose an alternate style named“Contrast”which has a dark background and the
font-color white. For printing, a separate stylesheet is in use for hiding the navigation (media=“print“).
1Linux Libertine: http://www.linuxlibertine.org/
2famfamfam: http://www.famfamfam.com/lab/icons/silk/
Passwords Safe, Roland Bruggmann, June 2014 2

4. 3 Backend
The system runs a LAMP stack: GNU/Linux Debian operating system, Apache HTTP server, MySQL database and PHP
server-side script. The application is reachable over https://pwsafe.geogeek.ch (registrar: switch; toplevel domain: ch;
2nd-level-domain: geogeek). In the Domain Name System of the Internet Service Provider, a record for the subdomain
’pwsafe’ was added (3rd-level-domain).
3.1 Apache
An apache virtualhost listening on ServerName ’pwsafe.geogeek.ch’ got configured serving with HTTPS only: Requests over
HTTP (port 80) will be rewritten for HTTPS (port 443). The DocumentRoot points to ’/var/www/pwsafe’, which is a
symbol link to the directory where the application lives. The TLS/SSL-certificate in use is actually a self-signed snakeoil
created with openSSL, all common web-browsers will make a complaint therefore.
3.2 MySQL
First, a database called ’bti7054web’ was created and later on a database-user called ’passwdstore’ for accessing the database
by webapplication. This user has access over localhost only and has database-specific privileges only: The user is not granted
any action in the database cluster exept of SELECT, INSERT, UPDATE and DELETE on the database ’bti7054web’.
The webapplication makes use of two tables: ’users’ and ’accounts’. The tables both have unique identifiers as primary
keys (autoincrement on INSERT) and different datatypes for the rest of the fields. A single foreign key is in use: The field
accounts.user id references users.id and will cascade on delete.
Figure 3.1: Values of tables ’users’ and ’accounts’ as shown in bash.
3.3 PHP
The /etc/php5/apache2/php.ini is configured as follows: No Magic Quotes, handle non-ASCII characters using UTF-8.
Passwords Safe, Roland Bruggmann, June 2014 3

5. 4 Application
4.1 Code separation
Figure 4.1: Project folders
4.2 Database Interaction and Forms
ˆ User profile: registration / login / edit
ˆ Accounts management: add / edit / delete
4.3 Security
ˆ Prevent SQL injection exploits when using user-supplied data in a SQL query by the use of query parameter tokens
ˆ Prevent SQL injection by the use of PDO library
ˆ Prevent XSS attacks when displaying user-supplied data on a web page by the use of htmlentities()
ˆ Prevent brute force and rainbow table attacks by generation of an 8 byte salt randomly and hashing the master
password with the salt 65536 times
ˆ The passwords of managed accounts are encrypted with the users master password (prevents from reading it by a
database administrator).
Passwords Safe, Roland Bruggmann, June 2014 4