SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
RELATÓRIO
21-01-2015 Trabalho SIR “gesCONTACT”
Instituição de Ensino: ESTG - IPVC
Curso: Engenharia Informática
Autor: Ricardo Jorge Gonçalves Antunes
Orientação Científica: Eng. Pedro Moreira
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 1
C O N T E Ú D O
INTRODUÇÃO.............................................................................................2
DIAGRAMA DOS CASOS DE USO ..................................................................2
MODELO DE DADOS ...................................................................................3
DESCRIÇÃO DOS FICHEIROS IMPLEMENTADOS .............................................3
ECRÂS FINAIS E FOCOS DE DESENVOLVIMENTO............................................6
Figura 1 – Ecrã login ...................................................................................6
Figura 2 – Campos inválidos .......................................................................7
Figura 3 – Botão login disponível ................................................................7
Figura 4 – Conta bloqueada ........................................................................9
Figura 5 – Já “logado”................................................................................10
Figura 6 – Página de Registro....................................................................11
Figura 7 – Verificação pelo server dos inputs ............................................12
Figura 8 – Verificação de registro já existente...........................................13
Figura 9 – Registro Efetuado .....................................................................14
Figura 10 – Acesso não autorizado ...........................................................15
Figura 11 – Agenda de Contactos .............................................................16
Figura 12 – Exportação para xml...............................................................18
MANUAL DE INSTALAÇÃO/UTILIZAÇÃO .....................................................19
CONCLUSÃO ............................................................................................19
REFERÊNCIAS............................................................................................21
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 2 21-1-2015 Ricardo Antunes
I N T R O D U Ç Ã O
Este relatório é sobre o desenvolvimento do website gesCONTACT que acaba por
ser uma mini aplicação para gestão de contactos, com foco em pequenos grupos e com
a possibilidade de partilhar contactos entre elementos do grupo de utilizadores do site.
São usadas diversas tecnologias como HTML, PHP, MySQL, CSS, Javascript e XML,
recorrendo a técnicas de AJAX e à biblioteca JQuery.
Foi dado um especial enfoque na parte de segurança relativa ao processo de login
e registro, de forma a prevenir contra “SQL injections”, “Session Hijacking”, “Network
Eavesdropping”, “Cross Site Scripting” e “Brute Force Attacks”. Foram usadas técnicas de
encriptação dos dados sensíveis usando o algoritmo SHA-512.
D I A G R A M A D O S C A S O S D E U S O
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 3
M O D E L O D E D A D O S
D E S C R I Ç Ã O D O S F I C H E I R O S I M P L E M E N T A D O S
 index.php: ficheiro de abertura do site gesCONTACT, apresenta o login.
 register.php: página que apresenta o formulário para efetuar o registro de um
novo utilizador no site gesCONTACT.
 register_success.php: página que informa o sucesso do registro.
 error.php: caso aconteça um erro inesperado é exibida esta página a informar o
sucedido.
 protected_page.php: página para onde se é redirecionado em caso de “login
successful”, exibe a agenda de contactos desse utilizador e permite criar/apa-
gar/partilhar e exportar contactos.
 config.php: permite efetuar uma conexão à BD através de um objeto PDO
 list.php: ficheiro que exibe a lista de contactos, feito à parte do ficheiro anteri-
ormente mencionado, protected_page.php, por forma a permitir a atualização
dinâmica da lista usando AJAX.
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 4 21-1-2015 Ricardo Antunes
 add_member.php: ficheiro com o código para se adicionar um contacto à agenda
do respetivo utilizador (necessário ao ficheiro protected_page.php).
 delete_member.php: ficheiro com o código para eliminar um contacto à agenda
(necessário ao ficheiro protected_page.php).
 partilhar.php: ficheiro que permite a partilha de um contacto com os outros uti-
lizadores do gesCONTACT (necessário ao ficheiro protected_page.php).
 exportar.php: ficheiro que permite exportar todos os contactos para um ficheiro
XML (necessário ao ficheiro protected_page.php).
 FOLDER includes: pasta com ficheiros php com código parcial para os ficheiros
“na raiz”.
o gesVAR.php: ficheiro onde se define as variáveis para o acesso à BD e al-
gumas definições de estado e de segurança, isto é definido à parte dos
scripts de forma a garantir mais proteção para estes dados sensíveis.
o db_connect.php: ficheiro que efetua a ligação à BD através dum objeto
mysqli.
o functions.php: ficheiro com várias funções relativas ao processo de login e
registro, como o inicio duma sessão (session_start()) mas de forma se-
gura, um função para verificar o login, outra para verificar brute force
attack no login, outra para verificar se o login foi efetuado (estado) e fi-
nalmente uma para “desinfetar” o output da variável de servidor PHP_SELF.
o process_login.php: ficheiro que processa o login e reencaminha para os
devidos locais.
o register.inc.php: ficheiro que processa o pedido de registro, “desinfe-
tando” os inputs, verificando se o hash da password tem o tamanho cor-
reto e se o endereço de email ou nome já foram previamente registrados.
Caso tudo esteja tudo bem cria o utilizador.
o logout.php: ficheiro que termina a sessão do utilizador.
 FOLDER js: pasta com ficheiros javascript.
o índex.js: ficheiro com funções adicionais para os ficheiros index.php e o
register.php. Tratam de transições gráficas e fazem uma pré-verificação
dos inputs.
o jquery-2.1.1.js: Biblioteca Jquery.
o sha512.js: Implementação em Javascript do algoritmo para criação segura
de hash sobre “strings”, SHA-512.
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 5
o forms.js: ficheiro com as funções para criar um hash da password e verifi-
car se o nome e a password são válidos.
o script.php: funções para executar via AJAX as ações relativas ao criar/eli-
minar/partilhar/exportar contactos.
 FOLDER css: pasta com os ficheiros de estilo.
o style.css: ficheiro com as definições dos estilos para as páginas iniciais
(login e registro).
o style_2.css: ficheiro com as definições de estilo para a “parte inte-
rior”/protegida do gesCONTACT.
 FOLDER images: pasta com as imagens para o site.
o ajax_loader.gif: imagem com a animação de uma “barra de loading”.
o arrow.gif: imagem dum indicador “seta”.
o delete.png: imagem duma “cross”, X.
o logo.png: imagem do logótipo gesCONTACT, criado no PHOTOSHOP CS6.
o plus.gif: imagem do sinal +, adição.
o share.jpg: imagem do símbolo “universal share”.
 gesCONTACTdbCREATE.sql: ficheiro com as instruções sql para criar a BD e in-
serir os dados.
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 6 21-1-2015 Ricardo Antunes
E C R Â S F I N A I S E F O C O S D E D E S E N V O L V I M E N T O
FIGURA 1 – ECRÃ LOGIN
 Esta é a página inicial onde é feito o login, os campos de input têm uma pré-ve-
rificação que só depois de verificada é que o botão Login é disponibilizado.
$("#name").keyup(function () {
var len = $('#name').val().length;
var arroba = $('#name').val().search('@');
if (len < 7 || len == 0 || arroba == -1) {
$('#name').css('background', 'rgb(255, 214, 190)');
blsp();
if (len != 0) {
$('#nameal').css('color', 'rgb(255, 57, 19)').text('Email: Inválido').fadeIn();
} else {
$('#nameal').css('color', 'rgb(255, 57, 19)').text('Email: Nulo').fadeIn();}
flg.name = 1;
} else {
$('#name').css('background', 'rgb(255, 255, 255)');
if (flg.logt == 0) {
$('#nameal').css('color', 'rgb(17, 170, 42)').text('Email: OK').fadeIn();}
else {
$('#nameal').css('color', 'rgb(17, 170, 42)').text('Email: OK').fadeIn();}
flg.name = 0;
tcheck();}});
function tcheck() {
if (flg.name == 0 && flg.pass == 0) {
$('#signupb').css('opacity', '1').css('cursor', 'pointer');
} else {
blsp();}}
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 7
 Pode ser visto na figura seguinte o que acontece caso as condições não se verifi-
quem.
FIGURA 2 – CAMPOS INVÁLIDOS
FIGURA 3 – BOTÃO LOGIN DISPONÍVEL
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 8 21-1-2015 Ricardo Antunes
 Estando tudo bem aparece o botão login, ao carregar neste é feita a verificação.
É obtido o valor hexadecimal da password, usando SHA-512, enviado depois o
formulário para processamento. Originalmente a password é registrada de forma
segura, esta é encriptada juntamente com um valor arbitrário “salt”, por isso
agora no login é verificado o valor do “salt” e feito o hash deste juntamente com
a hipótese e verificada a igualdade. Caso não se verifique a igualdade é mos-
trada uma “alert box” a informar o sucedido e é reencaminhado de volta para a
página de login.
function login($email, $password, $mysqli) {
// Using prepared statements means that SQL injection is not possible.
if ($stmt = $mysqli->prepare("SELECT id, nome, password, salt FROM utilizador WHERE email = ?
LIMIT 1")) {
$stmt->bind_param('s', $email); // Bind "$email" to parameter.
$stmt->execute(); // Execute the prepared query.
$stmt->store_result();
// get variables from result.
$stmt->bind_result($user_id, $username, $db_password, $salt);
$stmt->fetch();
// hash the password with the unique salt.
$password = hash('sha512', $password . $salt);
if ($stmt->num_rows == 1) {
// If the user exists we check if the account is locked
// from too many login attempts
if (checkbrute($user_id, $mysqli) == true) {
// Account is locked
// Send an email to user saying their account is locked
$brute = "brute";
return $brute;
} else {
// Check if the password in the database matches
// the password the user submitted.
if ($db_password == $password) {
// Password is correct!
// Get the user-agent string of the user.
$user_browser = $_SERVER['HTTP_USER_AGENT'];
// XSS protection as we might print this value
$user_id = preg_replace("/[^0-9]+/", "", $user_id);
$_SESSION['user_id'] = $user_id;
// XSS protection as we might print this value
$username = preg_replace("/[^a-zA-Z0-9_-]+/",
"",
$username);
$_SESSION['username'] = $username;
$_SESSION['login_string'] = hash('sha512',
$password . $user_browser);
// Login successful.
return "true";
} else {
// Password is not correct
// We record this attempt in the database
$now = time();
$mysqli->query("INSERT INTO login_attempts(user_id, time)
VALUES ('$user_id', '$now')");
return false;}
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 9
 Caso sejam falhadas mais de 5 tentativas em menos de duas horas, a conta é
bloqueada (de forma a prevenir “brute force attacks”), aparecendo sempre a se-
guinte mensagem durante duas horas:
FIGURA 4 – CONTA BLOQUEADA
function checkbrute($user_id, $mysqli) {
// Get timestamp of current time
$now = time();
// All login attempts are counted from the past 2 hours.
$valid_attempts = $now - (2 * 60 * 60);
if ($stmt = $mysqli->prepare("SELECT time
FROM login_attempts
WHERE user_id = ?
AND time > '$valid_attempts'")) {
$stmt->bind_param('i', $user_id);
// Execute the prepared query.
$stmt->execute();
$stmt->store_result();
// If there have been more than 5 failed logins
if ($stmt->num_rows > 5) {
return true;
} else {
return false;}}}
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 10 21-1-2015 Ricardo Antunes
 Também é feita a verificação na página de login do estado deste, caso já esteja
identificado aparecem as seguintes opções adicionais do lado esquerdo:
FIGURA 5 – JÁ “LOGADO”
<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
if (login_check($mysqli) == true) {
$logged = 'in';
} else {
$logged = 'out';
}
?>
<?php
if($logged == "in"){
echo '<div style="margin-top: 130px;"><p class="logado">Neste momento está identificado como
'.$_SESSION['username'].'</p>';
echo '<p class="logado">Pode <a href="includes/logout.php">terminar a sua sessão</a>.</p>';
echo '<p class="logado">Ou então <a href="protected_page.php">voltar à sua
agenda</a>.</p></div>';}?>
 A figura seguinte mostra a página de registro, nesta tal como na página de lo-
gin, só terá o botão de registro disponível quando o email e a password forem
“minimamente corretos”.
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 11
FIGURA 6 – PÁGINA DE REGISTRO
 Depois de feito o pedido de registro é feita uma verificação dos “inputs” do lado
do servidor, verificando a validade dos dados (através de regex patterns). O
nome só pode ter letras e espaços, a password tem de ter mais do que 5 carac-
teres e tem de ter maiúsculas, minúsculas, números e tem de corresponder à
“password de confirmação”. Verifica-se também que nenhum dos inputs está va-
zio!
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 12 21-1-2015 Ricardo Antunes
FIGURA 7 – VERIFICAÇÃO PELO SERVER DOS INPUTS
function regformhash(form, uid, email, password, conf) {
// Check each field has a value
if (uid.value == '' || email.value == '' || password.value == '' || conf.value == '') {
alert('Deve preencher todos os campos!');
return false;}
// Check the username
re = /^([a-zA-Z]|s)*$/;
if(!re.test(form.username.value)) {
alert("O nome só pode conter letras e espaços!");
form.username.focus();
return false;}
var re = /(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
if (!re.test(password.value)) {
alert('Passwords têm de conter pelo menos um algarismo, uma minúscula e uma maiúscula!');
return false;}
// Check password and confirmation are the same
if (password.value != conf.value) {
alert('A password e a sua confirmação não correpondem!');
form.password.focus();
return false;}
 Entretanto as variáveis de servidor são “desinfetadas”, de forma a evitar-se ata-
ques “cross site scripting attack”. Também é verificado se o pedido de registro
contém um nome ou email que já estejam registrados na BD.
function esc_url($url) {
if ('' == $url) {return $url;}
$url = preg_replace('|[^a-z0-9-~+_.?#=!&;,/:%@$|*'()x80-xff]|i', '', $url);
$strip = array('%0d', '%0a', '%0D', '%0A');
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 13
$url = (string) $url;
$count = 1;
while ($count) {
$url = str_replace($strip, '', $url, $count); }
$url = str_replace(';//', '://', $url);
$url = htmlentities($url);
$url = str_replace('&amp;', '&#038;', $url);
$url = str_replace("'", '&#039;', $url);
if ($url[0] !== '/') {
// We're only interested in relative links from $_SERVER['PHP_SELF']
return ''; } else {return $url;}}
FIGURA 8 – VERIFICAÇÃO DE REGISTRO JÁ EXISTENTE
$prep_stmt = "SELECT id FROM utilizador WHERE email = ? LIMIT 1";
$stmt = $mysqli->prepare($prep_stmt);
// check existing email
if ($stmt) {
$stmt->bind_param('s', $email);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows == 1) {
// A user with this email address already exists
$error_msg .= 'Este endereço de email já foi registrado!nn';
// $stmt->close();}
$stmt->close();
} else { $error_msg .= 'Database error Line 39'; // $stmt->close(); }
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 14 21-1-2015 Ricardo Antunes
 Caso tudo esteja bem é criado um elemento aleatório para concatenar à pas-
sword e depois ser feita a encriptação, desta forma o registro da password fica
mais seguro na BD, no fim é informado o sucesso.
FIGURA 9 – REGISTRO EFETUADO
if (empty($error_msg)) {
// Create a random salt
$random_salt = hash('sha512', uniqid(mt_rand(1, mt_getrandmax()), true));
// Create salted password
$password = hash('sha512', $password . $random_salt);
// Insert the new user into the database
if ($insert_stmt = $mysqli->prepare("INSERT INTO utilizador (nome, email, password, salt)
VALUES (?, ?, ?, ?)")) {
$insert_stmt->bind_param('ssss', $username, $email, $password, $random_salt);
// Execute the prepared query.
if (! $insert_stmt->execute()) {
header('Location: ../error.php?err=Falha no registro: INSERT');}}
header('Location: ./register_success.php');}
 Se tentar aceder à parte privada do gesCONTACT e não estiver identificado é-lhe
impedido o acesso ou vedada a informação sensível.
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 15
FIGURA 10 – ACESSO NÃO AUTORIZADO
<?php if (login_check($mysqli) == true) : ?>
<div class="topcorner">Bem-vindo <?php echo htmlentities($_SESSION['username']); ?>!
<p><a href="includes/logout.php">Logout</a></p></div>
<div class="container">
∶
<?php else : ?>
<p>
<span class="error">Não está autorizado a visualizar esta página!</span> Tem de se
<a href="index.php">identificar</a>.
</p>
<?php endif; ?>
 Estando o utilizador identificado é exibida esta página com a sua agenda de
contactos, onde pode adicionar e eliminar contactos. A adição (para ser adicio-
nado um contacto nenhum dos campos pode ser nulo [validação do lado do ser-
vidor]) e eliminação é efetuada duma forma dinâmica, usando AJAX, o que per-
mite que só a lista seja recarregada em vez da página inteira. A adição e elimi-
nação tem em conta que só pode “manusear” os contatos relativos ao utilizador.
Também pode ser feita a partilha de um contacto com os outros utilizadores do
gesCONTACT.
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 16 21-1-2015 Ricardo Antunes
FIGURA 11 – AGENDA DE CONTACTOS
<?php
// exibe apenas os contatos do atual utilizador
$sql = "SELECT * FROM `contato` WHERE id IN (SELECT contato FROM listacontatos where uti-
lizador =".$_SESSION['user_id'].") ORDER BY id ASC";
$query = $pdo->prepare($sql);
$query->execute();
$list = $query->fetchAll();
$bg = 'bg_1';
foreach ($list as $rs) {
?>
<tr class="<?php echo $bg; ?>">
<td><a href="#" class="delete_m" onclick="partilha(<?php echo $rs['id']; ?>)"><img
src="images/share.jpg"></a></td>
<td><?php echo $rs['nome']; ?></td>
<td><?php echo $rs['email']; ?></td>
<td><?php echo $rs['telemovel']; ?></td>
<td><?php echo $rs['morada']; ?></td>
<td><a href="#" class="delete_m" onclick="delete_member(<?php echo
$rs['id'];?>)"><img src="images/delete.png"> Apagar</a></td></tr>
∶
function add_member() {
// initialisation
var url = 'add_member.php';
var method = 'POST';
var params = 'full_name='+document.getElementById('full_name').value;
params += '&email='+document.getElementById('email').value;
params += '&telemovel='+document.getElementById('telemovel').value;
params += '&morada='+document.getElementById('morada').value;
var container_id = 'list_container' ;
var loading_text = '<img src="images/ajax_loader.gif">' ;
// call ajax function
ajax (url, method, params, container_id, loading_text) ;}
∶
try {
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 17
$sql = "INSERT INTO contato (nome, email, telemovel, morada) VALUES (:full_name, :email,
:telemovel, :morada)";
$query = $pdo->prepare($sql);
$query->bindParam(':full_name', $_POST['full_name'], PDO::PARAM_STR);
$query->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
$query->bindParam(':telemovel', $_POST['telemovel'], PDO::PARAM_STR);
$query->bindParam(':morada', $_POST['morada'], PDO::PARAM_STR);
$query->execute();
//adiciono a condicao de que este contato só pertence ao current user
$sql2 = "INSERT INTO listacontatos (contato, utilizador) VALUES ((SELECT id FROM contato
ORDER BY id DESC LIMIT 1),".$_SESSION['user_id'].")";
$aijasus = $pdo->prepare($sql2);
$aijasus->execute();
} catch (PDOException $e) {
echo 'PDOException : '. $e->getMessage();}
// list_members : this file displays the list of members in a table view
include('list.php');?>
∶
function ajax (url, method, params, container_id, loading_text) {
try { // For: chrome, firefox, safari, opera, yandex, ...
xhr = new XMLHttpRequest();
} catch(e) {
try{ // for: IE6+
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) { // if not supported or disabled
alert("Not supported!");
}
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) { // when result is ready
document.getElementById(container_id).innerHTML = xhr.responseText;
} else { // waiting for result
document.getElementById(container_id).innerHTML = loading_text;}};
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(params);}
∶
<?php //código que processa a partilha dum contacto pelos restantes membros do gesCONTACT
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
include('config.php');
$pdo = connect();
// listar utilizadores
try {
$sql32 = "SELECT * FROM utilizador WHERE id <>".$_SESSION['user_id'];
$oi = $pdo->prepare($sql32);
$oi->execute();
//passar por todos os utilizadores
$list = $oi->fetchAll();
foreach ($list as $rs) {
//adiciono a condicao para contato ser visivil ao user da presente row na query
$sql2 = "INSERT INTO listacontatos (contato, utilizador) VALUES (:idcon-
tacto,".$rs['id'].")";
$aijasus = $pdo->prepare($sql2);
$aijasus->bindParam(':idcontacto', $_POST['id'], PDO::PARAM_INT);
$aijasus->execute();}
} catch (PDOException $e) {
echo 'PDOException : '. $e->getMessage();}
//atualizar a lista na página dinamicamente
include('list.php'); ?>
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 18 21-1-2015 Ricardo Antunes
FIGURA 12 – EXPORTAÇÃO PARA XML
//exportar contactos para ficheiro xml
function exportar () {
$( document ).ready(function () {
var xml = '<?xml version="1.0"?><Agenda>';
$("tr").each(function () {
var cells = $("td", this);
if (cells.length > 0) {
xml += "<Contacto'" + cells.eq(0).text() + "'>n";
for (var i = 1; i < 5; ++i) {
xml += "t<dados>" + cells.eq(i).text() + "</dados>n";
}
xml += "</Contacto >n";
}
});
xml += '</Agenda>';
window.alert(xml);
});}
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 19
M A N U A L D E I N S T A L A Ç Ã O / U T I L I Z A Ç Ã O
1. O código sql constante no ficheiro gesCONTACTdbCREATE.sql deverá ser execu-
tado na BD (MySQL) do sistema a ser instalado.
2. A diretoria gesCONTACT_SOURCE FILES com os seus ficheiros (manter a sua es-
trutura) devem ser colocados na raiz do servidor web (Apache) [entretanto elimi-
nar o ficheiro gesCONTACTdbCREATE.sql].
3. O ficheiro gesVAR.php deve ser atualizado de forma a refletir o utilizador com
permissões sobre a BD do gesCONTACT nesse sistema.
4. Estando o PHP a funcionar devidamente nesse sistema, com a BD e o servidor
web a funcionar, a partir deste momento o site gesCONTACT encontra-se dispo-
nível no local (endereço) que se escolheu no servidor web.
5. Para utilizar o gesCONTACT basta registar-se (o email tem de ser válido e a pas-
sword tem de ter mais de 6 caracteres [incluir obrigatoriamente maiúsculas, mi-
núsculas e algarismos]) e depois identificar-se. Na parte interna do site (agenda)
todas as opções são bastante intuitivas (adicionar, eliminar, partilhar e exportar).
No fim termine a sua sessão no canto superior direito onde diz “logout”.
C O N C L U S Ã O
Este trabalho foi realizado/concretizado em toda a extensão requisitada e plane-
ada inicialmente. Todos os objetivos iniciais foram cumpridos, tendo ainda sido adicio-
nados mais requisitos como a exportação para xml (com a ajuda de Jquery) e toda a
parte de segurança do site (prevenção contra “SQL injections”, “Session Hijacking”,
“Network Eavesdropping”, “Cross Site Scripting” e “Brute Force Attacks”). Com a utiliza-
ção de alguns css foi possível obter um aspeto visual simples mas agradável e prático,
foi também criado o logótipo com a ajuda do Photoshop CS6. Todo o funcionamento
do site é baseado em processos dinâmicos através de PHP e Ajax.
O trabalho foi bastante útil para interiorizar os conceitos apreendidos durante
esta unidade curricular e familiarizar-me em alguns conceitos específicos que advie-
ram da própria realização do trabalho.
Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC
Página 20 21-1-2015 Ricardo Antunes
Este site poderia ser melhorado nos seguintes pontos:
 Toda a parte de segurança deste site já está preparada para ser completamente
funcional em ssl, contudo para isso seria necessário um certificado ssl que de
forma gratuita só está disponível para domínios primários (impossível de imple-
mentar pois neste momento não tenho na minha posse nenhum domínio web).
Isto seria uma mais-valia para a segurança pois as comunicações entre o cliente
e o servidor passariam a ser encriptadas.
 Seria interessante implementar algumas medidas adicionais de segurança com a
ajuda de emails (confirmação do registro, aviso do bloqueio da conta e conse-
quente desbloqueio, alteração da password, …).
 Inicialmente foi pensado a existência de fotografias associadas aos contactos
(por isso existe a tabela imagens, a BD já está preparada), poderiam ser imple-
mentadas por exemplo ao exibir um contacto em concreto, sem ser na lista de
contactos completos.
 A partilha de contactos poderia ser feita apenas a quem se escolhesse dos utili-
zadores, ao fazer a partilha apareceria uma lista dos utilizadores para se esco-
lher os “alvos”,
 Tanto a partilha como a eliminação poderiam ser ajustadas para se poder mani-
pular mais do que um contacto ao mesmo tempo.
 Na adição do contacto só se verifica se os “inputs” não são nulos, poderia ser
feita uma verificação, tal como no login e registro, através reggex patterns.
 O aspeto do site poderia ser melhorado com a ajuda de um web designer.
ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT”
Ricardo Antunes 21-1-2015 Página 21
R E F E R Ê N C I A S
 http://stackoverflow.com/questions/766809/whats-the-difference-
between-utf8-general-ci-and-utf8-unicode-ci @08/12/2014
 http://www.w3schools.com @08/12/2014
 http://www.wikihow.com/Create-a-Secure-Login-Script-in-PHP-and-
MySQL @17/12/2014
 http://en.wikipedia.org/wiki/Salt_%28cryptography%29 @17/12/2014
 http://php.net/manual/en/language.references.php @17/12/2014
 http://www.w3schools.com/jsref/jsref_obj_regexp.asp @26/12/2014
 http://designscrazed.org/css-html-login-form-templates/ @3/01/2015
 http://www.bewebdeveloper.com/ @9/01/2015
 http://forums.asp.net/t/1963473.aspx?Convert+HTML+ta-
ble+into+XML+using+JavaScript @22/01/2015

Mais conteúdo relacionado

Destaque

Scott Stokes Portfolio 2016
Scott Stokes Portfolio 2016Scott Stokes Portfolio 2016
Scott Stokes Portfolio 2016Scott Stokes
 
Energy investments team.rev0.0.5
Energy investments team.rev0.0.5Energy investments team.rev0.0.5
Energy investments team.rev0.0.5keremmermer
 
Ok módulo 5 técnicas gráficas para la solución de problemas
Ok módulo 5 técnicas gráficas para la solución de problemasOk módulo 5 técnicas gráficas para la solución de problemas
Ok módulo 5 técnicas gráficas para la solución de problemasproargex2013
 
Cura Para El Alma
Cura Para El AlmaCura Para El Alma
Cura Para El AlmaFabiana
 
Soaring club growth morgan hall pasco 2013
Soaring club growth  morgan hall pasco 2013Soaring club growth  morgan hall pasco 2013
Soaring club growth morgan hall pasco 2013Morgan Hall
 
Pivoting An African Open Source Project
Pivoting An African Open Source ProjectPivoting An African Open Source Project
Pivoting An African Open Source ProjectUshahidi
 
21 Flavors of Medication Adherence: One Sheet of 21 ideas presented
21 Flavors of Medication Adherence: One Sheet of 21 ideas presented21 Flavors of Medication Adherence: One Sheet of 21 ideas presented
21 Flavors of Medication Adherence: One Sheet of 21 ideas presentedErin L. Albert
 
Compartir conocimientos. ¿Solo una tendencia o una nueva forma de actualizaci...
Compartir conocimientos. ¿Solo una tendencia o una nueva forma de actualizaci...Compartir conocimientos. ¿Solo una tendencia o una nueva forma de actualizaci...
Compartir conocimientos. ¿Solo una tendencia o una nueva forma de actualizaci...Ignacio Basagoiti
 
Por qué podemos verder 500 envasadoras anual
Por qué podemos verder 500 envasadoras anualPor qué podemos verder 500 envasadoras anual
Por qué podemos verder 500 envasadoras anualMin Wei Chen
 
Viaje a Tenerife por Laura, Keyla y Selene
Viaje a Tenerife por Laura, Keyla y SeleneViaje a Tenerife por Laura, Keyla y Selene
Viaje a Tenerife por Laura, Keyla y SeleneHilario Roma
 
Tipos de registro psicopedagogia
Tipos de registro psicopedagogiaTipos de registro psicopedagogia
Tipos de registro psicopedagogiaMarcial Carpio
 
Les sectes (resum)
Les sectes (resum)Les sectes (resum)
Les sectes (resum)CV Paunero
 
Profit is an opinion, but cash of lack thereof, is cold hard reality
Profit is an opinion, but cash of lack thereof, is cold hard realityProfit is an opinion, but cash of lack thereof, is cold hard reality
Profit is an opinion, but cash of lack thereof, is cold hard realityDennis L. Thompson, CPA, CFE
 

Destaque (20)

Davi plata para empresas 0021 abril (1)
Davi plata para empresas 0021 abril (1)Davi plata para empresas 0021 abril (1)
Davi plata para empresas 0021 abril (1)
 
Scott Stokes Portfolio 2016
Scott Stokes Portfolio 2016Scott Stokes Portfolio 2016
Scott Stokes Portfolio 2016
 
El Salvador, a Country of Opportunities - January 2014
El Salvador, a Country of Opportunities - January 2014El Salvador, a Country of Opportunities - January 2014
El Salvador, a Country of Opportunities - January 2014
 
El metodo gerencial_deming
El metodo gerencial_demingEl metodo gerencial_deming
El metodo gerencial_deming
 
Energy investments team.rev0.0.5
Energy investments team.rev0.0.5Energy investments team.rev0.0.5
Energy investments team.rev0.0.5
 
Ok módulo 5 técnicas gráficas para la solución de problemas
Ok módulo 5 técnicas gráficas para la solución de problemasOk módulo 5 técnicas gráficas para la solución de problemas
Ok módulo 5 técnicas gráficas para la solución de problemas
 
Cura Para El Alma
Cura Para El AlmaCura Para El Alma
Cura Para El Alma
 
Soaring club growth morgan hall pasco 2013
Soaring club growth  morgan hall pasco 2013Soaring club growth  morgan hall pasco 2013
Soaring club growth morgan hall pasco 2013
 
Pivoting An African Open Source Project
Pivoting An African Open Source ProjectPivoting An African Open Source Project
Pivoting An African Open Source Project
 
Catalogo seigard 2014
Catalogo seigard 2014Catalogo seigard 2014
Catalogo seigard 2014
 
21 Flavors of Medication Adherence: One Sheet of 21 ideas presented
21 Flavors of Medication Adherence: One Sheet of 21 ideas presented21 Flavors of Medication Adherence: One Sheet of 21 ideas presented
21 Flavors of Medication Adherence: One Sheet of 21 ideas presented
 
Compartir conocimientos. ¿Solo una tendencia o una nueva forma de actualizaci...
Compartir conocimientos. ¿Solo una tendencia o una nueva forma de actualizaci...Compartir conocimientos. ¿Solo una tendencia o una nueva forma de actualizaci...
Compartir conocimientos. ¿Solo una tendencia o una nueva forma de actualizaci...
 
Por qué podemos verder 500 envasadoras anual
Por qué podemos verder 500 envasadoras anualPor qué podemos verder 500 envasadoras anual
Por qué podemos verder 500 envasadoras anual
 
Viaje a Tenerife por Laura, Keyla y Selene
Viaje a Tenerife por Laura, Keyla y SeleneViaje a Tenerife por Laura, Keyla y Selene
Viaje a Tenerife por Laura, Keyla y Selene
 
EPA DHA jlcrt
EPA DHA jlcrtEPA DHA jlcrt
EPA DHA jlcrt
 
Tipos de registro psicopedagogia
Tipos de registro psicopedagogiaTipos de registro psicopedagogia
Tipos de registro psicopedagogia
 
Les sectes (resum)
Les sectes (resum)Les sectes (resum)
Les sectes (resum)
 
Profit is an opinion, but cash of lack thereof, is cold hard reality
Profit is an opinion, but cash of lack thereof, is cold hard realityProfit is an opinion, but cash of lack thereof, is cold hard reality
Profit is an opinion, but cash of lack thereof, is cold hard reality
 
EN_UpdateFCE_May09
EN_UpdateFCE_May09EN_UpdateFCE_May09
EN_UpdateFCE_May09
 
(1) Cabeza De Calabaza
(1) Cabeza De Calabaza(1) Cabeza De Calabaza
(1) Cabeza De Calabaza
 

Semelhante a Relatório

Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Luis Gustavo Almeida
 
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...iMasters
 
JasperReports Tecnicas de geracao_de_relatorios1
JasperReports  Tecnicas de geracao_de_relatorios1JasperReports  Tecnicas de geracao_de_relatorios1
JasperReports Tecnicas de geracao_de_relatorios1Sliedesharessbarbosa
 
Google Analytics Reporting API: Bebendo água direto da fonte
Google Analytics Reporting API: Bebendo água direto da fonteGoogle Analytics Reporting API: Bebendo água direto da fonte
Google Analytics Reporting API: Bebendo água direto da fonteJohann Vivot
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Altair Borges
 
Django + extjs pelos forms
Django + extjs pelos formsDjango + extjs pelos forms
Django + extjs pelos formsMoacir Filho
 
aula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfaula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfBrunoTorres978388
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicosponto hacker
 
Introdução ao Smarty
Introdução ao SmartyIntrodução ao Smarty
Introdução ao SmartyNelson Gomes
 
Sistema de Ponto Eletrônico Digital: projeto e implementação de hardware e so...
Sistema de Ponto Eletrônico Digital: projeto e implementação de hardware e so...Sistema de Ponto Eletrônico Digital: projeto e implementação de hardware e so...
Sistema de Ponto Eletrônico Digital: projeto e implementação de hardware e so...Andre Devecchi
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsSuissa
 
20140520 Microsoft WebCamp - DataBinding with KnockoutJS
20140520 Microsoft WebCamp - DataBinding with KnockoutJS20140520 Microsoft WebCamp - DataBinding with KnockoutJS
20140520 Microsoft WebCamp - DataBinding with KnockoutJSJoão Pedro Martins
 
Introdução de web
Introdução de webIntrodução de web
Introdução de webSedu
 

Semelhante a Relatório (20)

Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017
 
Google apps script - Parte - 1
Google apps script - Parte - 1Google apps script - Parte - 1
Google apps script - Parte - 1
 
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...
 
JasperReports Tecnicas de geracao_de_relatorios1
JasperReports  Tecnicas de geracao_de_relatorios1JasperReports  Tecnicas de geracao_de_relatorios1
JasperReports Tecnicas de geracao_de_relatorios1
 
Google Analytics Reporting API: Bebendo água direto da fonte
Google Analytics Reporting API: Bebendo água direto da fonteGoogle Analytics Reporting API: Bebendo água direto da fonte
Google Analytics Reporting API: Bebendo água direto da fonte
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
Cobol Web com Net Express 3.1/4.0/5.x - Parte 2
 
Django + extjs pelos forms
Django + extjs pelos formsDjango + extjs pelos forms
Django + extjs pelos forms
 
aula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfaula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdf
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
 
Introdução ao Smarty
Introdução ao SmartyIntrodução ao Smarty
Introdução ao Smarty
 
Sistema de Ponto Eletrônico Digital: projeto e implementação de hardware e so...
Sistema de Ponto Eletrônico Digital: projeto e implementação de hardware e so...Sistema de Ponto Eletrônico Digital: projeto e implementação de hardware e so...
Sistema de Ponto Eletrônico Digital: projeto e implementação de hardware e so...
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webapps
 
Tutorial.yii
Tutorial.yiiTutorial.yii
Tutorial.yii
 
20140520 Microsoft WebCamp - DataBinding with KnockoutJS
20140520 Microsoft WebCamp - DataBinding with KnockoutJS20140520 Microsoft WebCamp - DataBinding with KnockoutJS
20140520 Microsoft WebCamp - DataBinding with KnockoutJS
 
MongoDB + PHP
MongoDB + PHPMongoDB + PHP
MongoDB + PHP
 
Apostila ajax
Apostila ajaxApostila ajax
Apostila ajax
 
Windows Server 2008: Gerenciamento
Windows Server 2008: GerenciamentoWindows Server 2008: Gerenciamento
Windows Server 2008: Gerenciamento
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Workshop Django
Workshop DjangoWorkshop Django
Workshop Django
 

Relatório

  • 1. RELATÓRIO 21-01-2015 Trabalho SIR “gesCONTACT” Instituição de Ensino: ESTG - IPVC Curso: Engenharia Informática Autor: Ricardo Jorge Gonçalves Antunes Orientação Científica: Eng. Pedro Moreira
  • 2. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 1 C O N T E Ú D O INTRODUÇÃO.............................................................................................2 DIAGRAMA DOS CASOS DE USO ..................................................................2 MODELO DE DADOS ...................................................................................3 DESCRIÇÃO DOS FICHEIROS IMPLEMENTADOS .............................................3 ECRÂS FINAIS E FOCOS DE DESENVOLVIMENTO............................................6 Figura 1 – Ecrã login ...................................................................................6 Figura 2 – Campos inválidos .......................................................................7 Figura 3 – Botão login disponível ................................................................7 Figura 4 – Conta bloqueada ........................................................................9 Figura 5 – Já “logado”................................................................................10 Figura 6 – Página de Registro....................................................................11 Figura 7 – Verificação pelo server dos inputs ............................................12 Figura 8 – Verificação de registro já existente...........................................13 Figura 9 – Registro Efetuado .....................................................................14 Figura 10 – Acesso não autorizado ...........................................................15 Figura 11 – Agenda de Contactos .............................................................16 Figura 12 – Exportação para xml...............................................................18 MANUAL DE INSTALAÇÃO/UTILIZAÇÃO .....................................................19 CONCLUSÃO ............................................................................................19 REFERÊNCIAS............................................................................................21
  • 3. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 2 21-1-2015 Ricardo Antunes I N T R O D U Ç Ã O Este relatório é sobre o desenvolvimento do website gesCONTACT que acaba por ser uma mini aplicação para gestão de contactos, com foco em pequenos grupos e com a possibilidade de partilhar contactos entre elementos do grupo de utilizadores do site. São usadas diversas tecnologias como HTML, PHP, MySQL, CSS, Javascript e XML, recorrendo a técnicas de AJAX e à biblioteca JQuery. Foi dado um especial enfoque na parte de segurança relativa ao processo de login e registro, de forma a prevenir contra “SQL injections”, “Session Hijacking”, “Network Eavesdropping”, “Cross Site Scripting” e “Brute Force Attacks”. Foram usadas técnicas de encriptação dos dados sensíveis usando o algoritmo SHA-512. D I A G R A M A D O S C A S O S D E U S O
  • 4. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 3 M O D E L O D E D A D O S D E S C R I Ç Ã O D O S F I C H E I R O S I M P L E M E N T A D O S  index.php: ficheiro de abertura do site gesCONTACT, apresenta o login.  register.php: página que apresenta o formulário para efetuar o registro de um novo utilizador no site gesCONTACT.  register_success.php: página que informa o sucesso do registro.  error.php: caso aconteça um erro inesperado é exibida esta página a informar o sucedido.  protected_page.php: página para onde se é redirecionado em caso de “login successful”, exibe a agenda de contactos desse utilizador e permite criar/apa- gar/partilhar e exportar contactos.  config.php: permite efetuar uma conexão à BD através de um objeto PDO  list.php: ficheiro que exibe a lista de contactos, feito à parte do ficheiro anteri- ormente mencionado, protected_page.php, por forma a permitir a atualização dinâmica da lista usando AJAX.
  • 5. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 4 21-1-2015 Ricardo Antunes  add_member.php: ficheiro com o código para se adicionar um contacto à agenda do respetivo utilizador (necessário ao ficheiro protected_page.php).  delete_member.php: ficheiro com o código para eliminar um contacto à agenda (necessário ao ficheiro protected_page.php).  partilhar.php: ficheiro que permite a partilha de um contacto com os outros uti- lizadores do gesCONTACT (necessário ao ficheiro protected_page.php).  exportar.php: ficheiro que permite exportar todos os contactos para um ficheiro XML (necessário ao ficheiro protected_page.php).  FOLDER includes: pasta com ficheiros php com código parcial para os ficheiros “na raiz”. o gesVAR.php: ficheiro onde se define as variáveis para o acesso à BD e al- gumas definições de estado e de segurança, isto é definido à parte dos scripts de forma a garantir mais proteção para estes dados sensíveis. o db_connect.php: ficheiro que efetua a ligação à BD através dum objeto mysqli. o functions.php: ficheiro com várias funções relativas ao processo de login e registro, como o inicio duma sessão (session_start()) mas de forma se- gura, um função para verificar o login, outra para verificar brute force attack no login, outra para verificar se o login foi efetuado (estado) e fi- nalmente uma para “desinfetar” o output da variável de servidor PHP_SELF. o process_login.php: ficheiro que processa o login e reencaminha para os devidos locais. o register.inc.php: ficheiro que processa o pedido de registro, “desinfe- tando” os inputs, verificando se o hash da password tem o tamanho cor- reto e se o endereço de email ou nome já foram previamente registrados. Caso tudo esteja tudo bem cria o utilizador. o logout.php: ficheiro que termina a sessão do utilizador.  FOLDER js: pasta com ficheiros javascript. o índex.js: ficheiro com funções adicionais para os ficheiros index.php e o register.php. Tratam de transições gráficas e fazem uma pré-verificação dos inputs. o jquery-2.1.1.js: Biblioteca Jquery. o sha512.js: Implementação em Javascript do algoritmo para criação segura de hash sobre “strings”, SHA-512.
  • 6. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 5 o forms.js: ficheiro com as funções para criar um hash da password e verifi- car se o nome e a password são válidos. o script.php: funções para executar via AJAX as ações relativas ao criar/eli- minar/partilhar/exportar contactos.  FOLDER css: pasta com os ficheiros de estilo. o style.css: ficheiro com as definições dos estilos para as páginas iniciais (login e registro). o style_2.css: ficheiro com as definições de estilo para a “parte inte- rior”/protegida do gesCONTACT.  FOLDER images: pasta com as imagens para o site. o ajax_loader.gif: imagem com a animação de uma “barra de loading”. o arrow.gif: imagem dum indicador “seta”. o delete.png: imagem duma “cross”, X. o logo.png: imagem do logótipo gesCONTACT, criado no PHOTOSHOP CS6. o plus.gif: imagem do sinal +, adição. o share.jpg: imagem do símbolo “universal share”.  gesCONTACTdbCREATE.sql: ficheiro com as instruções sql para criar a BD e in- serir os dados.
  • 7. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 6 21-1-2015 Ricardo Antunes E C R Â S F I N A I S E F O C O S D E D E S E N V O L V I M E N T O FIGURA 1 – ECRÃ LOGIN  Esta é a página inicial onde é feito o login, os campos de input têm uma pré-ve- rificação que só depois de verificada é que o botão Login é disponibilizado. $("#name").keyup(function () { var len = $('#name').val().length; var arroba = $('#name').val().search('@'); if (len < 7 || len == 0 || arroba == -1) { $('#name').css('background', 'rgb(255, 214, 190)'); blsp(); if (len != 0) { $('#nameal').css('color', 'rgb(255, 57, 19)').text('Email: Inválido').fadeIn(); } else { $('#nameal').css('color', 'rgb(255, 57, 19)').text('Email: Nulo').fadeIn();} flg.name = 1; } else { $('#name').css('background', 'rgb(255, 255, 255)'); if (flg.logt == 0) { $('#nameal').css('color', 'rgb(17, 170, 42)').text('Email: OK').fadeIn();} else { $('#nameal').css('color', 'rgb(17, 170, 42)').text('Email: OK').fadeIn();} flg.name = 0; tcheck();}}); function tcheck() { if (flg.name == 0 && flg.pass == 0) { $('#signupb').css('opacity', '1').css('cursor', 'pointer'); } else { blsp();}}
  • 8. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 7  Pode ser visto na figura seguinte o que acontece caso as condições não se verifi- quem. FIGURA 2 – CAMPOS INVÁLIDOS FIGURA 3 – BOTÃO LOGIN DISPONÍVEL
  • 9. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 8 21-1-2015 Ricardo Antunes  Estando tudo bem aparece o botão login, ao carregar neste é feita a verificação. É obtido o valor hexadecimal da password, usando SHA-512, enviado depois o formulário para processamento. Originalmente a password é registrada de forma segura, esta é encriptada juntamente com um valor arbitrário “salt”, por isso agora no login é verificado o valor do “salt” e feito o hash deste juntamente com a hipótese e verificada a igualdade. Caso não se verifique a igualdade é mos- trada uma “alert box” a informar o sucedido e é reencaminhado de volta para a página de login. function login($email, $password, $mysqli) { // Using prepared statements means that SQL injection is not possible. if ($stmt = $mysqli->prepare("SELECT id, nome, password, salt FROM utilizador WHERE email = ? LIMIT 1")) { $stmt->bind_param('s', $email); // Bind "$email" to parameter. $stmt->execute(); // Execute the prepared query. $stmt->store_result(); // get variables from result. $stmt->bind_result($user_id, $username, $db_password, $salt); $stmt->fetch(); // hash the password with the unique salt. $password = hash('sha512', $password . $salt); if ($stmt->num_rows == 1) { // If the user exists we check if the account is locked // from too many login attempts if (checkbrute($user_id, $mysqli) == true) { // Account is locked // Send an email to user saying their account is locked $brute = "brute"; return $brute; } else { // Check if the password in the database matches // the password the user submitted. if ($db_password == $password) { // Password is correct! // Get the user-agent string of the user. $user_browser = $_SERVER['HTTP_USER_AGENT']; // XSS protection as we might print this value $user_id = preg_replace("/[^0-9]+/", "", $user_id); $_SESSION['user_id'] = $user_id; // XSS protection as we might print this value $username = preg_replace("/[^a-zA-Z0-9_-]+/", "", $username); $_SESSION['username'] = $username; $_SESSION['login_string'] = hash('sha512', $password . $user_browser); // Login successful. return "true"; } else { // Password is not correct // We record this attempt in the database $now = time(); $mysqli->query("INSERT INTO login_attempts(user_id, time) VALUES ('$user_id', '$now')"); return false;}
  • 10. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 9  Caso sejam falhadas mais de 5 tentativas em menos de duas horas, a conta é bloqueada (de forma a prevenir “brute force attacks”), aparecendo sempre a se- guinte mensagem durante duas horas: FIGURA 4 – CONTA BLOQUEADA function checkbrute($user_id, $mysqli) { // Get timestamp of current time $now = time(); // All login attempts are counted from the past 2 hours. $valid_attempts = $now - (2 * 60 * 60); if ($stmt = $mysqli->prepare("SELECT time FROM login_attempts WHERE user_id = ? AND time > '$valid_attempts'")) { $stmt->bind_param('i', $user_id); // Execute the prepared query. $stmt->execute(); $stmt->store_result(); // If there have been more than 5 failed logins if ($stmt->num_rows > 5) { return true; } else { return false;}}}
  • 11. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 10 21-1-2015 Ricardo Antunes  Também é feita a verificação na página de login do estado deste, caso já esteja identificado aparecem as seguintes opções adicionais do lado esquerdo: FIGURA 5 – JÁ “LOGADO” <?php include_once 'includes/db_connect.php'; include_once 'includes/functions.php'; sec_session_start(); if (login_check($mysqli) == true) { $logged = 'in'; } else { $logged = 'out'; } ?> <?php if($logged == "in"){ echo '<div style="margin-top: 130px;"><p class="logado">Neste momento está identificado como '.$_SESSION['username'].'</p>'; echo '<p class="logado">Pode <a href="includes/logout.php">terminar a sua sessão</a>.</p>'; echo '<p class="logado">Ou então <a href="protected_page.php">voltar à sua agenda</a>.</p></div>';}?>  A figura seguinte mostra a página de registro, nesta tal como na página de lo- gin, só terá o botão de registro disponível quando o email e a password forem “minimamente corretos”.
  • 12. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 11 FIGURA 6 – PÁGINA DE REGISTRO  Depois de feito o pedido de registro é feita uma verificação dos “inputs” do lado do servidor, verificando a validade dos dados (através de regex patterns). O nome só pode ter letras e espaços, a password tem de ter mais do que 5 carac- teres e tem de ter maiúsculas, minúsculas, números e tem de corresponder à “password de confirmação”. Verifica-se também que nenhum dos inputs está va- zio!
  • 13. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 12 21-1-2015 Ricardo Antunes FIGURA 7 – VERIFICAÇÃO PELO SERVER DOS INPUTS function regformhash(form, uid, email, password, conf) { // Check each field has a value if (uid.value == '' || email.value == '' || password.value == '' || conf.value == '') { alert('Deve preencher todos os campos!'); return false;} // Check the username re = /^([a-zA-Z]|s)*$/; if(!re.test(form.username.value)) { alert("O nome só pode conter letras e espaços!"); form.username.focus(); return false;} var re = /(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}/; if (!re.test(password.value)) { alert('Passwords têm de conter pelo menos um algarismo, uma minúscula e uma maiúscula!'); return false;} // Check password and confirmation are the same if (password.value != conf.value) { alert('A password e a sua confirmação não correpondem!'); form.password.focus(); return false;}  Entretanto as variáveis de servidor são “desinfetadas”, de forma a evitar-se ata- ques “cross site scripting attack”. Também é verificado se o pedido de registro contém um nome ou email que já estejam registrados na BD. function esc_url($url) { if ('' == $url) {return $url;} $url = preg_replace('|[^a-z0-9-~+_.?#=!&;,/:%@$|*'()x80-xff]|i', '', $url); $strip = array('%0d', '%0a', '%0D', '%0A');
  • 14. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 13 $url = (string) $url; $count = 1; while ($count) { $url = str_replace($strip, '', $url, $count); } $url = str_replace(';//', '://', $url); $url = htmlentities($url); $url = str_replace('&amp;', '&#038;', $url); $url = str_replace("'", '&#039;', $url); if ($url[0] !== '/') { // We're only interested in relative links from $_SERVER['PHP_SELF'] return ''; } else {return $url;}} FIGURA 8 – VERIFICAÇÃO DE REGISTRO JÁ EXISTENTE $prep_stmt = "SELECT id FROM utilizador WHERE email = ? LIMIT 1"; $stmt = $mysqli->prepare($prep_stmt); // check existing email if ($stmt) { $stmt->bind_param('s', $email); $stmt->execute(); $stmt->store_result(); if ($stmt->num_rows == 1) { // A user with this email address already exists $error_msg .= 'Este endereço de email já foi registrado!nn'; // $stmt->close();} $stmt->close(); } else { $error_msg .= 'Database error Line 39'; // $stmt->close(); }
  • 15. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 14 21-1-2015 Ricardo Antunes  Caso tudo esteja bem é criado um elemento aleatório para concatenar à pas- sword e depois ser feita a encriptação, desta forma o registro da password fica mais seguro na BD, no fim é informado o sucesso. FIGURA 9 – REGISTRO EFETUADO if (empty($error_msg)) { // Create a random salt $random_salt = hash('sha512', uniqid(mt_rand(1, mt_getrandmax()), true)); // Create salted password $password = hash('sha512', $password . $random_salt); // Insert the new user into the database if ($insert_stmt = $mysqli->prepare("INSERT INTO utilizador (nome, email, password, salt) VALUES (?, ?, ?, ?)")) { $insert_stmt->bind_param('ssss', $username, $email, $password, $random_salt); // Execute the prepared query. if (! $insert_stmt->execute()) { header('Location: ../error.php?err=Falha no registro: INSERT');}} header('Location: ./register_success.php');}  Se tentar aceder à parte privada do gesCONTACT e não estiver identificado é-lhe impedido o acesso ou vedada a informação sensível.
  • 16. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 15 FIGURA 10 – ACESSO NÃO AUTORIZADO <?php if (login_check($mysqli) == true) : ?> <div class="topcorner">Bem-vindo <?php echo htmlentities($_SESSION['username']); ?>! <p><a href="includes/logout.php">Logout</a></p></div> <div class="container"> ∶ <?php else : ?> <p> <span class="error">Não está autorizado a visualizar esta página!</span> Tem de se <a href="index.php">identificar</a>. </p> <?php endif; ?>  Estando o utilizador identificado é exibida esta página com a sua agenda de contactos, onde pode adicionar e eliminar contactos. A adição (para ser adicio- nado um contacto nenhum dos campos pode ser nulo [validação do lado do ser- vidor]) e eliminação é efetuada duma forma dinâmica, usando AJAX, o que per- mite que só a lista seja recarregada em vez da página inteira. A adição e elimi- nação tem em conta que só pode “manusear” os contatos relativos ao utilizador. Também pode ser feita a partilha de um contacto com os outros utilizadores do gesCONTACT.
  • 17. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 16 21-1-2015 Ricardo Antunes FIGURA 11 – AGENDA DE CONTACTOS <?php // exibe apenas os contatos do atual utilizador $sql = "SELECT * FROM `contato` WHERE id IN (SELECT contato FROM listacontatos where uti- lizador =".$_SESSION['user_id'].") ORDER BY id ASC"; $query = $pdo->prepare($sql); $query->execute(); $list = $query->fetchAll(); $bg = 'bg_1'; foreach ($list as $rs) { ?> <tr class="<?php echo $bg; ?>"> <td><a href="#" class="delete_m" onclick="partilha(<?php echo $rs['id']; ?>)"><img src="images/share.jpg"></a></td> <td><?php echo $rs['nome']; ?></td> <td><?php echo $rs['email']; ?></td> <td><?php echo $rs['telemovel']; ?></td> <td><?php echo $rs['morada']; ?></td> <td><a href="#" class="delete_m" onclick="delete_member(<?php echo $rs['id'];?>)"><img src="images/delete.png"> Apagar</a></td></tr> ∶ function add_member() { // initialisation var url = 'add_member.php'; var method = 'POST'; var params = 'full_name='+document.getElementById('full_name').value; params += '&email='+document.getElementById('email').value; params += '&telemovel='+document.getElementById('telemovel').value; params += '&morada='+document.getElementById('morada').value; var container_id = 'list_container' ; var loading_text = '<img src="images/ajax_loader.gif">' ; // call ajax function ajax (url, method, params, container_id, loading_text) ;} ∶ try {
  • 18. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 17 $sql = "INSERT INTO contato (nome, email, telemovel, morada) VALUES (:full_name, :email, :telemovel, :morada)"; $query = $pdo->prepare($sql); $query->bindParam(':full_name', $_POST['full_name'], PDO::PARAM_STR); $query->bindParam(':email', $_POST['email'], PDO::PARAM_STR); $query->bindParam(':telemovel', $_POST['telemovel'], PDO::PARAM_STR); $query->bindParam(':morada', $_POST['morada'], PDO::PARAM_STR); $query->execute(); //adiciono a condicao de que este contato só pertence ao current user $sql2 = "INSERT INTO listacontatos (contato, utilizador) VALUES ((SELECT id FROM contato ORDER BY id DESC LIMIT 1),".$_SESSION['user_id'].")"; $aijasus = $pdo->prepare($sql2); $aijasus->execute(); } catch (PDOException $e) { echo 'PDOException : '. $e->getMessage();} // list_members : this file displays the list of members in a table view include('list.php');?> ∶ function ajax (url, method, params, container_id, loading_text) { try { // For: chrome, firefox, safari, opera, yandex, ... xhr = new XMLHttpRequest(); } catch(e) { try{ // for: IE6+ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e1) { // if not supported or disabled alert("Not supported!"); } } xhr.onreadystatechange = function() { if(xhr.readyState == 4) { // when result is ready document.getElementById(container_id).innerHTML = xhr.responseText; } else { // waiting for result document.getElementById(container_id).innerHTML = loading_text;}}; xhr.open(method, url, true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(params);} ∶ <?php //código que processa a partilha dum contacto pelos restantes membros do gesCONTACT include_once 'includes/db_connect.php'; include_once 'includes/functions.php'; sec_session_start(); include('config.php'); $pdo = connect(); // listar utilizadores try { $sql32 = "SELECT * FROM utilizador WHERE id <>".$_SESSION['user_id']; $oi = $pdo->prepare($sql32); $oi->execute(); //passar por todos os utilizadores $list = $oi->fetchAll(); foreach ($list as $rs) { //adiciono a condicao para contato ser visivil ao user da presente row na query $sql2 = "INSERT INTO listacontatos (contato, utilizador) VALUES (:idcon- tacto,".$rs['id'].")"; $aijasus = $pdo->prepare($sql2); $aijasus->bindParam(':idcontacto', $_POST['id'], PDO::PARAM_INT); $aijasus->execute();} } catch (PDOException $e) { echo 'PDOException : '. $e->getMessage();} //atualizar a lista na página dinamicamente include('list.php'); ?>
  • 19. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 18 21-1-2015 Ricardo Antunes FIGURA 12 – EXPORTAÇÃO PARA XML //exportar contactos para ficheiro xml function exportar () { $( document ).ready(function () { var xml = '<?xml version="1.0"?><Agenda>'; $("tr").each(function () { var cells = $("td", this); if (cells.length > 0) { xml += "<Contacto'" + cells.eq(0).text() + "'>n"; for (var i = 1; i < 5; ++i) { xml += "t<dados>" + cells.eq(i).text() + "</dados>n"; } xml += "</Contacto >n"; } }); xml += '</Agenda>'; window.alert(xml); });}
  • 20. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 19 M A N U A L D E I N S T A L A Ç Ã O / U T I L I Z A Ç Ã O 1. O código sql constante no ficheiro gesCONTACTdbCREATE.sql deverá ser execu- tado na BD (MySQL) do sistema a ser instalado. 2. A diretoria gesCONTACT_SOURCE FILES com os seus ficheiros (manter a sua es- trutura) devem ser colocados na raiz do servidor web (Apache) [entretanto elimi- nar o ficheiro gesCONTACTdbCREATE.sql]. 3. O ficheiro gesVAR.php deve ser atualizado de forma a refletir o utilizador com permissões sobre a BD do gesCONTACT nesse sistema. 4. Estando o PHP a funcionar devidamente nesse sistema, com a BD e o servidor web a funcionar, a partir deste momento o site gesCONTACT encontra-se dispo- nível no local (endereço) que se escolheu no servidor web. 5. Para utilizar o gesCONTACT basta registar-se (o email tem de ser válido e a pas- sword tem de ter mais de 6 caracteres [incluir obrigatoriamente maiúsculas, mi- núsculas e algarismos]) e depois identificar-se. Na parte interna do site (agenda) todas as opções são bastante intuitivas (adicionar, eliminar, partilhar e exportar). No fim termine a sua sessão no canto superior direito onde diz “logout”. C O N C L U S Ã O Este trabalho foi realizado/concretizado em toda a extensão requisitada e plane- ada inicialmente. Todos os objetivos iniciais foram cumpridos, tendo ainda sido adicio- nados mais requisitos como a exportação para xml (com a ajuda de Jquery) e toda a parte de segurança do site (prevenção contra “SQL injections”, “Session Hijacking”, “Network Eavesdropping”, “Cross Site Scripting” e “Brute Force Attacks”). Com a utiliza- ção de alguns css foi possível obter um aspeto visual simples mas agradável e prático, foi também criado o logótipo com a ajuda do Photoshop CS6. Todo o funcionamento do site é baseado em processos dinâmicos através de PHP e Ajax. O trabalho foi bastante útil para interiorizar os conceitos apreendidos durante esta unidade curricular e familiarizar-me em alguns conceitos específicos que advie- ram da própria realização do trabalho.
  • 21. Relatório do Trabalho de SIR “gesCONTACT” ESTG-IPVC Página 20 21-1-2015 Ricardo Antunes Este site poderia ser melhorado nos seguintes pontos:  Toda a parte de segurança deste site já está preparada para ser completamente funcional em ssl, contudo para isso seria necessário um certificado ssl que de forma gratuita só está disponível para domínios primários (impossível de imple- mentar pois neste momento não tenho na minha posse nenhum domínio web). Isto seria uma mais-valia para a segurança pois as comunicações entre o cliente e o servidor passariam a ser encriptadas.  Seria interessante implementar algumas medidas adicionais de segurança com a ajuda de emails (confirmação do registro, aviso do bloqueio da conta e conse- quente desbloqueio, alteração da password, …).  Inicialmente foi pensado a existência de fotografias associadas aos contactos (por isso existe a tabela imagens, a BD já está preparada), poderiam ser imple- mentadas por exemplo ao exibir um contacto em concreto, sem ser na lista de contactos completos.  A partilha de contactos poderia ser feita apenas a quem se escolhesse dos utili- zadores, ao fazer a partilha apareceria uma lista dos utilizadores para se esco- lher os “alvos”,  Tanto a partilha como a eliminação poderiam ser ajustadas para se poder mani- pular mais do que um contacto ao mesmo tempo.  Na adição do contacto só se verifica se os “inputs” não são nulos, poderia ser feita uma verificação, tal como no login e registro, através reggex patterns.  O aspeto do site poderia ser melhorado com a ajuda de um web designer.
  • 22. ESTG-IPVC Relatório do Trabalho de SIR “gesCONTACT” Ricardo Antunes 21-1-2015 Página 21 R E F E R Ê N C I A S  http://stackoverflow.com/questions/766809/whats-the-difference- between-utf8-general-ci-and-utf8-unicode-ci @08/12/2014  http://www.w3schools.com @08/12/2014  http://www.wikihow.com/Create-a-Secure-Login-Script-in-PHP-and- MySQL @17/12/2014  http://en.wikipedia.org/wiki/Salt_%28cryptography%29 @17/12/2014  http://php.net/manual/en/language.references.php @17/12/2014  http://www.w3schools.com/jsref/jsref_obj_regexp.asp @26/12/2014  http://designscrazed.org/css-html-login-form-templates/ @3/01/2015  http://www.bewebdeveloper.com/ @9/01/2015  http://forums.asp.net/t/1963473.aspx?Convert+HTML+ta- ble+into+XML+using+JavaScript @22/01/2015