Tecnologies web

130
gener 2009 Tecnologies web

description

Tecnologies web. gener 2009. Índex. Tecnologies de client: del HTML a AJAX. Conceptes bàsics d'aplicacions web. Les arquitectures basades en Java (de JSP a JEE) El mon dels frameworks: Spring, Struts, Hibernate... Programar pensant en la seguretat Casos pràctics: - PowerPoint PPT Presentation

Transcript of Tecnologies web

Page 1: Tecnologies web

gener 2009Tecnologies web

Page 2: Tecnologies web

Índex

Tecnologies de client: del HTML a AJAX.

Conceptes bàsics d'aplicacions web.

Les arquitectures basades en Java (de JSP a JEE)

El mon dels frameworks: Spring, Struts, Hibernate...

Programar pensant en la seguretat

Casos pràctics: Usabilitat a la plataforma eCatalunya Single Sign On en aplicacions web a la FIB 10 anys i un rentat de cara del Racó

Page 3: Tecnologies web

Les tecnologies del clientDel HTML a AJAX

Page 4: Tecnologies web

De què parlarem?

CSS

DOM

Javascript

AJAX

Altres tecnologies per aplicacions riques

Page 5: Tecnologies web

Els estàndards W3C

És un organisme que es dedica a promoure els estàndards al web, dissenyant especificacions i eines

Tenen una oficina a Espanya: http://www.w3c.es/

No només HTML, sino molts altres temes relacionats amb el web:

Accés universal (iniciativa WAI) Web semàntica (RDF) Multimedia (SVG, SMIL) Web services (SOAP,WSDL) ...

http://www.w3c.es/divulgacion/guiasbreves/

Page 6: Tecnologies web

CSS

Fulls d'estil, que es poden tenir un un fitxer a part del HTML o entre els tags <style></style>

Defineixen atributs de visualització de: Els tags HTML normals i corrents Classes que podem associar a una part del text Elements amb un identificador únic

<span class=”titol”>Aixo es un titol</span><span id=”menu1”>Primer menu</span>

Separar la presentació del contingut, faciliten la coherència

Page 7: Tecnologies web

Tipus de propietats que hi ha a CSS

Podem jugar amb Marges Mides Posicions en pantalla Tipus de lletra Imatges i colors de fons Visualització o no d’un element

Aplicar uns estils a pantalla i uns altres a l’imprimir Fer que un menu es vegi en pantalla i no a l’imprimir Exemple: web de la FIB

Page 8: Tecnologies web

El mon ideal: HTML valid + CSS

Idealment, tots els webs haurien de tenir HTML vàlid

El CSS hauria de proporcionar tota la presentació

Exemple de fins on podem arribar:

http://www.csszengarden.com

Realment el que normalment tenim es... HTML que es veu be, però que no es 100% vàlid Format incorporat dintre del HTML (taules) Webs totalment correctes que es veuen malament en

algun navegador per diferències en implementació

Page 9: Tecnologies web

Un exemple de problemes de CSS

<style>

.postit { width: 200px; /* amplada de 200 px */padding: 25px; /* deixem un marge de 25 px */background: yellow;

}

</style>

<div class="postit">

<p>Aixo amb explorer medeix 200 pixels i amb Mozilla, 250.</p>

<p>El "padding" s'afegeix de formes diferents.</p>

</div>

Page 10: Tecnologies web

El problema de CSS

Page 11: Tecnologies web

Treballant amb CSS

Web developer extension Validadors de HTML Edició de CSS “on the fly”

Firebug Inspecció d’elements i els seus estils

CSS “cheat sheet” http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

Treballar amb CSS es dur. S'ha de provar amb tots els navegadors i tot i així d'han de recorrer a "hacks" per que les coses quedin com volem

Busqueu a google: hi ha receptes

Page 12: Tecnologies web

L’estructura de la pàgina i el DOM

Document Object Model: model d'objectes de la pàgina que exposa el navegador als llenguatges de script.

API que ens permet accedir al que esta mostrant el navegador o manipular el seu comportament

DOM = Javascript? NO. Javascript ens permet accedir a la pàgina mostrada i al

navegador utilitzant el DOM

Accedint al DOM podem veure i manipular les propietats definides a través de CSS

Podem accedir a elements qualsevol de la pàgina si els identifiquem amb un ID únic al HTML

Page 13: Tecnologies web

El DOM ha existit des de sempre...

<script>

function comprova() {

if (document.forms[0].elements[0].value=="") {

alert("Escriu un titol!");

}

return false; // evita que enviem les dades

}

</script>

...

<form name="pelicula" onSubmit="comprova()">

<input type="text" type="titol" >

<input type="submit" value="OK">

</form>

Page 14: Tecnologies web

Javascript + DOM

Obrim la porta a manipular la pàgina un cop carregada

Funcions per accedir i manipular l’arbre, normalment a partir del seu ID o un punter. node=getElementById(“x”) node.appendChildren(node2) node.parentElement

Podem mostrar, amagar, moure elements de la pàgina i crear interfaces molt mes agradables i usables.

Hem d’estar preparats per patir diferències entre navegadors Hi ha llibreries que ens permeten abstrure'ns

Page 15: Tecnologies web

Example: àrea desplegable

<script>

function desplegar(id) {

valor=document.getElementById(id).style.display;

if (valor!="block") {valor="block";} else {valor="none";}

document.getElementById(id).style.display=valor;

}

</script>

<style>

.desplegable {display:none}

</style>

...

<div><a href=”javascript:desplegar('op1')">Desplegar</a></div>

<div class="desplegable" id="op1">

Aquest text apareixerà i desapareixerà</div>

Page 16: Tecnologies web

Un exemple avançat: tiddlywiki

Creació de nous nodes a l’arbre HTML

Efectes de visualització

Programació avançada en Javascript

Accés a objectes interns del navegador per guardar

I a sobre... pot ser útil!

http://www.tiddlywiki.org

Page 17: Tecnologies web

La revolució AJAX

AJAX=Asynchronous JavaScript+XML http://www.adaptivepath.com/ideas/essays/archives/000385.php

Treballar des del navegador comunicant-se amb el servidor pero sense necessitat de recarregar les pàgines

Ús extensiu de l’objecte XMLHttpRequest Permet fer peticions HTTP des de Javascript Executa codi JavaScript en resposta a la crida

Manipulem el DOM de la pàgina

Problemes: depenem molt del navegador dificultat de desenvolupament

Ajuda: Plugin LiveHttpHeaders de Firefox

Page 18: Tecnologies web

Flux d’execució de AJAX

Tenim un objecte AJAX

Creem una instancia i li diem: URL a la que connecta Funció de callback

Cridarem aquest objecte en resposta a un event

En rebre la resposta, executem el callback (assincronament)

El callback rep la resposta en XML, HTML, JSON...

Actualitzem la pàgina

Page 19: Tecnologies web

Exemples d’Ajax

GMail només demana la pàgina sencera al principi Demana via xmlhttprequest fragments de Javascript Via DOM, modifica la pàgina amb la informacio del

JavaScript

Pàgina personalitzada de Google

eyeOS “sistema operatiu” al navegador Un dels creadors era fiber

Flickr, ta-da list, Basecamp, Google Maps...

Molts webs l’utilitzen per petites coses Filmaffinity (al votar), per fer-ho més simple

Page 20: Tecnologies web

Què no és AJAX?

AJAX és un nom que ha funcionat tan bé que s’aplica a coses que no tenen res a veure.

AJAX no es només Javascript Si no hi ha interacció amb el servidor, no es AJAX

AJAX no es només XMLHTTPRequest Es poden simular recàrregues amb un frame ocult. http://developer.apple.com/internet/webcontent/iframe.html

AJAX no es només XML Hi ha altres formats per intercanviar informació

Parlem amb propietat, que per algo som enginyers!

Page 21: Tecnologies web

Conclusions AJAX

AJAX es útil per: Tenir interfícies més dinàmiques Pantalles en la que les recàrregues molesten Aconseguir efectes propis d’aplicacions d’escriptori

(autocompletar, arrossegar...)

Però en canvi no es correcte per Llistats: url que hem de poder passar a la gent Quan el botó de tornar enrere té sentit En resum: quan NO estem programant una

aplicació

Exemple pràctic: www.atrapalo.com Triar aeroport de destí i origen -> OK Llistats de viatges -> Malament, molt poc pràctic!

Page 22: Tecnologies web

Javascript avançat

Amb la manipulació del DOM i AJAX, Javascript demostra que serveix per mes que validar formularis

Necessitem capacitats més avançades per fer que poguem realment “programar aplicacions” en Javascript. Crear ojectes i classes Passar com a paràmetres estructures complexes Crear “callbacks” en resposta a events Facilitar l’us de AJAX Accedir facilment al DOM

Algunes d’aquestes capacitats depenen del navegador i es fa necessari una llibreria que ens abstregui

Page 23: Tecnologies web

JSON (Javascript Object Notation)

Notació per dades estructurades (arrays i arrays associatius){ aula:’Tecnologies web’, professors:[ {nom:’Jaume’,cognom:’Moral’}, {nom:’Daniel’,cognom:’Golobart’}

]}

Permet “simular” passar paràmetres a una funció per nom o pasar estructures complexes

Molt utilitzat en llibreries, per simplificar les API.

Similar a XML, pero més llegible per les persones

Page 24: Tecnologies web

La llibreria Prototype

Molt ben dissenyada i base d’altres llibreries

Funció equivalent a document.getElementById()

$(‘element’)

Gestió d’incompatibilitats. executa fins que funcioni algo:

Try.these {funcio1(),funcio2()

}

Registrar handlers pels events.

Event.observe(‘element_id’,’click’,callback,false);

Page 25: Tecnologies web

Llibreria Prototype (2)

Objecte AJAX

var myAjax = new Ajax.Updater('element_a_actualitzar','http://servidor/url',{method: 'get', parameters:'p=nosque' }

);

Ajuda en la sintaxi per declarar classes

MevaClasse = Class.create();MevaClasse.prototype = { initialize : function(el) { this.el = el; },...}m=new MevaClasse(el);

Page 26: Tecnologies web

Llibreria script.aculo.us

Llibreria construida sobre Prototype

Efectes i animacions (no AJAX) de forma molt senzilla

Drag & drop

Per AJAX Autocompletar Edició “in place” com el tiddlywiki Lligar el drag and drop

Molt senzilla d’utilitzar:Effect.BlindDown('id_of_element', {duration:3});

Ajax.InPlaceEditor('editme', '/demoajaxreturn.php');

Page 27: Tecnologies web

Altres llibreries útils

Yahoo User Interface library (YUI) http://developer.yahoo.com/yui/ Similar a script.aculo.us Molt ben documentada

Google Web Toolkit (GWT) http://code.google.com/webtoolkit/ Orientada únicament a AJAX Es una llibreria Java que genera el Javascript Parteix de la base que no hem de programar Javascript

JQuery http://jquery.com/ Idea totalment diferent. Està molt de moda

Page 28: Tecnologies web

JQuery

Idea: afegir “comportament” als elements de la pàgina de la mateixa forma que s’afegeixen propietats de visualització amb CSS

El Javascript no queda barrejat Fem que els links amb class “menu” quans els clickem

s’amaguin$("a.menu").click(function(event) { event.preventDefault(); $(this).hide("slow"); }

);

Es un javascript “no intrusiu”, que no es posa dintre del HTML

Page 29: Tecnologies web

Extensions de JQuery

Plugins (http://plugins.jquery.com/) Son extensions diverses basades en la llibreria Exemple: tablesorter, que converteix una taula

“normal” amb una taula que es pot ordenar picant sobre els titols

$(".ordenable").tablesorter();

UI (http://ui.jquery.com/) Són únicament elements d’interficie d’usuari Necessiten una part en javascript i una de CSS+imatges Exemple: tabs, per crear pestanyes

$(“.pestanyes").tabs();

Page 30: Tecnologies web

i el Flash? Millor FLEX

Supera a HTML + Javascript amb temes relacionats amb gràfics vectorials, pero no en temes d'interfaces d'usuari

Encara que es pugui generar d'altres formes, el normal es fer-ho a partir del Flash Editor. Incomode (per programadors)

La solució: FLEX 3 Framework basat en Flash per aplicacions "riques" Llenguatge per generar interfícies MXML(similar a HTML) +

ActionScript (similar a Javascript)… sense problemes de navegador!

Permet accedir a dades remotes per HTTP SDK gratuit, un compilador que genera fitxers .swf Es pot integrar a Eclipse

Page 31: Tecnologies web

Altres tecnologies per les RIA (Rich Internet Applications)

OpenLaszlo Framework OpenSource que genera HTML+Javascript o

Fitxers Flash (SWF) a partir del seu codi LZX

Silverlight Es l'alternativa a Flex de Microsoft. XAML per definir l'interface + programació en algun

llenguatge de la família .NET

Adobe AIR Permet crear aplicacions multiplataforma d'escriptori com si

fossin aplicacions web. Poden estar basades en HTML+Javascript o en FLEX

Els que han caigut pel cami… Java Applets Controls ActiveX

Page 32: Tecnologies web

Conclusions

Una pàgina web no es una pàgina immutable i estàtica La seva extructura s'exposa via DOM Es pot manipular i canviar la visualització Pot respondre a events Javascript Pot demanar informació a un servidor via AJAX

Pero… Hem de tenir en compte diferències entre navegadors Hem de recorrer a llibreries per facilitar la programació

Hi ha alternatives a la idea de HTML + Javascript que poden evitar aquesta complexitat.

Page 33: Tecnologies web

Conceptes bàsics d'aplicacions web.

Page 34: Tecnologies web

De què parlarem?

La interacció bàsica amb aplicacions web

Pas de paràmetres

Sessions

Cookies

Autenticació i Autoritzacio d’usuaris

Connexions a BD

Page 35: Tecnologies web

Interacció bàsica

Com pot comunicar-se una pàgina web amb el servidor? Utilitzant el protocol HTTP

Seguint un link Demana al servidor una certa URL, que pot ser una

pàgina generada pel servidor i el navegador la carrega.

Enviant un formulari Li enviem les dades que acabem d'omplir

Amb una petició tipus AJAX El navegador fa una petició "en background" i sense

recarregar la pàgina

Page 36: Tecnologies web

Pas de paràmetres

GET S'afegeixen els paràmetres a la URL

POST S'envien com una segona part de la petició

Aquesta informació es posa al formulari que envia els paràmetres.

Els parametres son strings. Qualsevol tipus complex requereix un tractament dels que s'encarrega la plataforma escollida

Page 37: Tecnologies web

Sessions

Cada petició HTTP és independent de les altres. Problema quan volem desenvolupar aplicacions.

El protocol no proporciona cap mètode per saber des del servidor quines peticions ens arriben del mateix client, no incorpora el concepte de sessió.

Tècniques per aconseguir tenir estat: Cookies amb un identificador de sessió Paràmetre ID_SESSIO

Altres possibles tècniques Adreça IP. No sempre funciona.

Page 38: Tecnologies web

Mites sobre la falta d’estat

“Jo treballo amb IIS i el servidor ja suporta

sessions, sense necessitar cookies”

“Per què hem de passar un identificador de sessió?

Encara que desactivem les cookies el PHP

ja té una variable amb la sessió.”

Si volem sessions, el navegador sempre ha d’enviar alguna dada en les seves peticions per identificar-se. El servidor no fa miracles

Page 39: Tecnologies web

Cookies

Un servidor ens pot enviar una cookie quan demanem qualsevol fitxer, afegint una capçalera de l’estil...

Set-Cookie: foo=bar; path=/; expires Mon, 23-Jan-2009

Quan fem una altra petició al mateix servidor, enviem aquesta informació en una capçalera extra

Cookie: foo=bar

Les cookies no les demana el servidor: les envia automàticament el navegador com si fos un paràmetre

Page 40: Tecnologies web

Cookies de sessio

Les cookies que no tenen data de caducitat duren fins que es tanca el navegador. Son cookies de sessió

Les plataformes de desenvolupament web més conegudes (JSP, ASP, PHP…) utilitzen cookies per mantenir la sessió

La primera vegada que ens connectem al web, ens donen un identificador aleatori, que anirem enviant mentre no tanquem el navegador

El servidor es guardarà valors associats a aquest identificador (una mena de taula de hash)

Page 41: Tecnologies web

Eines per treballar amb cookies

Si estem desenvolupant una aplicació web i les coses no acaben de funcionar, pot ser interessant veure que esta passan amb les cookies

Livehttpheaders Permet veure les capçaleres HTTP que s'estan passant

entre el client i el servidor. Entre elles, les cookies

Add'n'edit cookie Permet manipular les cookies que tenim i canviar el

valor

Page 42: Tecnologies web

Paràmetre ID_SESSIO

És un substitut de les cookies, amb exactament la mateixa idea de la cookie de sessió, però passat explícitament com un paràmetre o una part de la URL

És més difícil d'implementar, perquè les nostres aplicacions l'han de passar explícitament a qualsevol petició que es faci al servidor, reescrivint les URL a les pàgines.

Podem perdre la sessió si fem una petició al servidor sense l’identificador (per exemple, una pàgina estàtica)

No es guarda cap informació: el id_sessió només serà vàlid fins que tanquem el navegador

Page 43: Tecnologies web

Quan acaben les sessions?

En sistemes orientats a connexió, la sessió acaba quan tallem la connexió. En web no existeix aixo

3 possibilitats Tanquem el navegador. S’esborra la cookie pero no la

informació que teníem al servidor Caduca. Els servidors es configuren perque la informació

de la sessió caduqui passats uns minuts d’inactivitat Invalidem la sessio. Anem a una pàgina que esborra la

informació de la sessió

Una sessió no invalidada ni caducada és perfectament vàlida al servidor. Si tenim el seu identificador, la podem “robar”

Page 44: Tecnologies web

Autenticació i Autorització

Autenticació és el que ens permet saber quin usuari ha entrat a la nostra aplicació Habitualment, es fa amb usuari i password Dos grans formes: protocol HTTP i formulari + cookies És millor que sigui un sistema extern a l’aplicació, que no es

bona idea desenvolupar una i una altra vegada

Autorització és el fet de donar certs permisos o no a un usuari en un cop ja sabem qui és Moltes vegades se n’encarrega la propia aplicació Es pot muntar en base a rols

Idealment, haurien de ser declaratives, no per programa JSP permet fer-ho al fitxer web.xml PHP a la configuració del servidor Apache

Page 45: Tecnologies web

Accés a bases de dades

Generar pàgines dinàmiques normalment implica treballar amb alguna bases de dades

En una aplicació no web, podem connectar una vegada al principi de l'aplicació i desconnectar al final.

En una aplicació web, no tenim clar quan ens desconnectem, així que no podem mantenir una connexió oberta "per sempre"

Obrir i tancar connexions continuament cada vegada que hem d'accedir a la BD té un cost

Page 46: Tecnologies web

Pools de connexions

Solució: treballar amb connexions compartides

El servidor té oberta una connexió i nosaltres la “demanem”, la utilitzem i la “tornem”

Normalment, no n’hi ha una, sino que tenim vàries connexions obertes: pool de connexions

Normalment es configuren uns paràmetres Número mínim de connexions obertes Número màxim (per no saturar la màquina) Temps màxim d’utilització

Si la nostra aplicació no torna les connexions, podem tenir problemes i es pot penjar el sistema!

Page 47: Tecnologies web

Conclusions

Programem amb el que programem, hem de tenir molt clars una sèrie de conceptes Els diferents tipus de pas de paràmetres Els problemes que ens poden portar les sessions El fet de no tenir estat i els problemes que implica Els temes d’autorització i autorització d’usuaris Els problemes que poden representar els accessos a les

bases de dades

La plataforma que escollim per programar probablement ja ens aillarà d'aquests conceptes, però és bo saber-los.

Page 48: Tecnologies web

Les arquitectures basades en Java (de JSP a JEE)

Page 49: Tecnologies web

De què parlarem

Java com a llenguatge per fer aplicacions web

Servlets

JSP

El concepte d'aplicació web

L'especificació JEE

Page 50: Tecnologies web

La historia de Java

Java va sorgir fa ja més de 15 anys

Primera utilitat: petits programes que s'executen al navegador (amb el plugin de Java): els Applets A la època, la única forma d'afegir més interactivitat Complexitat per tenir el plugin correcte Actualment quasi no s'utilitzen (millor Flash o similars)

Segon intent: Java per aplicacions d'escriptori No gaire èxit. Aplicacions massa pesades

Tercer intent: Java al servidor Al no tenir interfície d'usuari, funciona millor Aplicacions web

Page 51: Tecnologies web

Especificació de Servlets

Són una sèrie de tecnologies per fer aplicacions web desde Java

Compren diversos elements Servlets pròpiament JSP Taglibs Expression language Concepte d’aplicació web (WAR)

El servidor més conegut que suporta treballar amb servlets és Tomcat

Veurem una a una totes aquestes tecnologies

Page 52: Tecnologies web

Servlets

Són unes classes java que permeten generar pàgines web quan s’executen en un servidor

Tenim accés a la petició, la resposta, la sessió i a paràmetres d’aplicació

Anem escrivint la pàgina des del programa, generant el codi HTML per programa. (Sí, es molt lleig!)

Com funciona? El servidor executa el mètode doGet() o doPost() del

servlet, que reben com a parametres la resposta i la petició Obtenim els paràmetres de la petició i construim el HTML

utilitzant l’objecte resposta

Page 53: Tecnologies web

Exemple de Servlet

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class ServletHola extends HttpServlet {

public void doGet ( HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println(“Hola, ”+request.getParameter(“nom”);

}

}

Page 54: Tecnologies web

JSP

JSP permet tenir pàgines HTML amb codi Java que s'executa abans de tornar-la cap al client.

No s’interpreta el codi cada vegada. La primera invocació fa que es compili la pàgina i es converteixi en un servlet.

Qualsevol servidor on podem executar Servlets permet executar JSP, es la mateixa tecnologia

Permet cridar altres classes Java, on hi haurà el gruix del codi. No hem de barrejar!

La nostra aplicació estarà formada per JSP per la presentació Classes Java per la capa de negoci

Page 55: Tecnologies web

Exemple amb JSP

<%@ page language="java"%>

<%

String salutacio=“Hola”+request.getParameter(“nom”);

%>

<HTML>

<BODY>

<%=salutacio%>

</BODY>

<HTML>

Page 56: Tecnologies web

La idea de Tag Libs

JSP permet declarar nous tags per posar a les notres pàgines i associar-los a codi java

Podem aconseguir una molt més gran separació entre presentació i codi: idea de JSP sense codi Java

Per una llista de Tag Libs ja programats... http://jakarta.apache.org/taglibs/

Hi ha una llibreria estàndar (JSTL), que permet no haver de recorrer a Java dintre de JSP per moltes coses.

Iteradors, condicionals... Nou lleguatge per expressions: expression language Ben utilitzada, converteix un JSP en una plantilla

Page 57: Tecnologies web

Exemple de pàgina amb Tag Libs

<sql:driver var="dataSource"

driver="sun.jdbc.odbc.JdbcOdbcDriver” url="jdbc:odbc:authors">

<sql:query var="authors" dataSource="$dataSource">

SELECT * FROM Authors

</sql:query>

<table>

<c:forEach var="row" items="$authors.rows">

<tr>

<td>${row.Au_ID}</td>

<td>${row.Author}</td>

<td>${row.YearBorn}</td>

<td>

</c:forEach>

</table>

Page 58: Tecnologies web

Java Web applicacions

Concepte d’aplicació, no només pàgines independents. Separarem en una estructura de directoris...

Pàgines estàtiques i JSP Classes Java que s’executen com a servlets Classes Java d’utilitats (JavaBeans) o Taglibs

Configurarem l’aplicació al fitxer web.xml… Paràmetres d’inicialització Mapejos de URL a servlets Usuaris, grups i autoritzacions Recursos externs que necessitem (p.e. DataSources)

Empaquetarem tot aixo en un fitxer .WAR (Web Application Archive)

Page 59: Tecnologies web

Exemple de Java Web Application

aplicacio/html/ – pàgines estàtiquesjsp/ - pàgines JSPcss/ – fulls d’estilimg/– imatgesjs/ - javascriptWEB-INF/ – directori no visible directament

web.xml – descriptor de l’aplicacióclasses/ – classes de l’aplicació i servletslib/ – llibreries (JAR) utilitzades per l’aplicació

Page 60: Tecnologies web

Seguretat al web.xml

En una aplicació web tenim seguretat declarativa utilitzant unes directives al fitxer web.xml

<security-constraint> <web-resource-collection> <web-resource-name>Zona protegida</web-resource-name> <url-pattern>/protegit</url-pattern> </web-resource-collection> <auth-constraint> <role-name>admin</role-name> </auth-constraint></security-constraint><login-config> <auth-method>FORM</auth-method> <form-login-config> <form-login-page>/jsp/login.jsp</form-login-page> <form-error-page>/html/fail_login.html</form-error-page> </form-login-config> </login-config>

Page 61: Tecnologies web

La peça que falta

Fem una seguretat basada en rols pero... d’on surten els usuaris i els rols que tenen? La informació està configurada al Tomcat No es l’aplicació que es preocupa d’on estan definits els

seus usuaris i passwords: aixi es més fàcil lligar-la amb sistemes externs

Tenim diferents opcions de guardar-nos els usuaris i rols al servidor Basat en base de dades Basat en LDAP En un fitxer de text Qualsevol sistema que ens poguem programar nosaltres

Page 62: Tecnologies web

Llibreries que ens poden ser útils

Java té moltissimes llibreries, moltes d'elles útils per web

log4j Sistema de logs configurable Per posar “xivatos” i treure'ls fàcilment

Velocity, Freemaker Sistema de plantilles en Java Per si no ens agraden les JSP

HttpClient Per poder connectar-nos a altres servidors web

iText Generar PDF

Page 63: Tecnologies web

Conclusions sobre Servlets/JSP

Paquet amb l’aplicació JSP, Servlets, classes, taglibs... Fitxers de configuració

Servidor que proporciona serveis de Autenticació i autorització Connexió a bases de dades

S’ha convertit en un estàndard amb molta acceptació, especialement al mon empresarial

Suport per fer aplicacions estructurades

Llibreries de qualsevol cosa: busqueu abans de desenvolupar!

Page 64: Tecnologies web

Arquitectura JEE

Arquitectura completa d’aplicacions de n-capes basat en la plataforma Java És una ampliació de l’especificació de servlets.

Idea principal: aplicacions a la capa intermitja, accessibles a través navegadors web o altres tipus de client Components per la lògica de negoci Capa de presentació

JEE és un Model de programació Com hem de desenvolupar les aplicacions?

JEE és una Plataforma: Què necessitem per executar-les?

Page 65: Tecnologies web

Elements del Model d’Aplicació

Model de components EJB (Enterprise Java Beans)

Capa de presentació Servlets /JSP

Protocol per comunicar components remots RMI / IIOP

Accés a bases de dades o altres fonts d’informació JDBC (Bases de dades relacionals) JNDI (Serveis de directori) JavaMail (Correu electrònic) JTA (Transaccions)

Page 66: Tecnologies web

Esquema de l’arquitectura

Page 67: Tecnologies web

Què és un EJB?

Són components de l’aplicació que s’executen a la capa intermitja i que executen la lògica de negoci. El que us expliquen com “capa de domini”

Han d’executar-se en un servidor de EJB, que els hi proporcionarà serveis transaccionals, persistència, alta disponibilitat...

Ha passat per unes especificacions molt complexes que han fet que no s’utilitzessin gaire.

L’especificació actual (EJB 3.0) es basa en les anotacions de Java 5.0 per configurar-les.

@Stateful, @Stateless, @Remote

Page 68: Tecnologies web

Exemple. Botiga de llibres

Page 69: Tecnologies web

Servidors JEE

Per poder executar una aplicació que utilitzi EJB, necessitem un servidor que sigui "JEE compliant"

Hi ha una gran quantitat d'aquests servidors que basen el seu negoci en els serveis d'assessorament i consultoria

A l'estar dirigits bàsicament a empreses es centren en temes d'alta disponibilitat.

Jboss, líder dintre dels Open Source Glassfish de Sun Microsystems, ara en Open Source Oracle Application Server BEA Weblogic IBM Websphere ...

Page 70: Tecnologies web

Conclusions d'arquitectures Java

Java ha trobat un lloc com a plataforma pel desenvolupament d'aplicacions empresarials

Podem utilitzar Java al servidor d’una forma simple (Servlets / JSP) o bé l’arquitectura completa JEE

Una aplicació JEE es pot executar en qualsevol servidors que compleixi les especificacions teòricament "sense canvis"

És necessaria tota aquesta complexitat de JEE? Normalment, no Per exemple, el Racó: són Servlets i un Tomcat

Page 71: Tecnologies web

Frameworks i altres llibreries d’aplicacions web

Page 72: Tecnologies web

Frameworks

Que és exactament un framework?

Struts

Spring i com lligar-lo amb Struts

Hibernate

L'arquitectura completa

El nouvingut: Ruby on rails

Mantra d’aquesta lliçó: Tothom es troba els mateixos problemes Hi ha gent que sap mes que nosaltres que els ha resolt No reinventem la roda

Page 73: Tecnologies web

Framework / plataforma / llibreria

Una plataforma normalment implica una decisió de Hardware Servidors Llenguatge de programació

Una llibreria normalment s’utilitza per solucionar un problema concret

En canvi un framework...

Un framework, es un conjunt de llibreries per una determinada plataforma que condicionen totalment la forma en que ens plantegem, organitzem i desenvolupem una aplicació

Page 74: Tecnologies web

Perquè un framework?

En un primer moment Són excessivament restrictius Les coses passen i no sabem perque

Amb el temps No hem de pensar desde zero. Programar es converteix en

“omplir forats” Facilitem el manteniment. Qualsevol persona que conegui el

framework triat podrà modificar fàcilment la nostra aplicació

En general es bo utilitzar un framework quan veiem que la nostra aplicació pot ser complexa o altres persones l’hauran de mantenir

El problema es: quin framework triar?

Page 75: Tecnologies web

Frameworks per JEE

Struts Capa de presentació Permet estructurar les aplicacions segons el patró MVC

Spring Ens permet estructurar la capa de domini Es basa en el patró Dependency injection

Hibernate No es pot considerar propiament un framework, sino un

mapejador d'objectes a bases de dades relacionals

Els veurem un a un per veure que ens poden oferir i entendre com fer una aplicació amb tots ells

Page 76: Tecnologies web

L'aplicació d'exemple

Farem un petit gestor de tasques

Una tasca tindrà un nom i una prioritat

Hi ha haurà una pantalla de llistar les tasques

Podrem editar-les, esborrar-les i crear-ne de noves

Una paraula d'advertència. És necessari utilitzar 3 frameworks per una aplicació tan tonta?

La resposta es NO. No hem de fer aplicacions "overengineered". El codi que menys falla es aquell que no existeix.

Page 77: Tecnologies web

Forçant MVC: Struts

Struts és un framework que ens permet forçar les nostres aplicacions a utilitzar MVC

Proporciona un servlet controlador configurable amb un fitxer XML amb les accions a executar per cada una de les URL de l'aplicació (les classes Actions)

Tenim uns objectes (els ActionForms) que permeten accedir desde les Actions als valors entrats als formularis de les nostres pàgines.

Les Actions actuen sobre les classes Java que formen el model, que son les que realment fan la feina

A les vistes, ens proporciona tags que ens ajuden a visualitzar les dades dels formularis o obtingudes per les Actions

Page 78: Tecnologies web

Exemple: form nova tasca

<html:form action="/guardarTasca">

<html:hidden property="id" />

Nom: <html:text property="nom"/>

<br>

Prioritat: <html:text property="prioritat"/>

<html:submit value="Guardar"/>

</html:form>

Taglibs pels elements del form (nom, propietat, id) que es mapegen amb les propietats de l'ActionForm

Fem referència a URL declarades al struts-config.xml

Page 79: Tecnologies web

El ActionForm associat al formulari

<form-bean name="tascaForm" type="org.apache.struts.action.DynaActionForm">

<form-property name="id" type="java.lang.Integer" initial="-1" />

<form-property name="nom" type="java.lang.String" />

<form-property name="prioritat" type="java.lang.Integer" initial="1" />

</form-bean>

Descrivim les propietats del form

Pot set també una bean

Page 80: Tecnologies web

Una Action al struts-config.xml

<action path="/guardarTasca"

type="presentacio.GuardarTascaAction"

name="tascaForm"

scope="request">

<forward name="success" path="/llistaTasques.do"

redirect="true"/>

<forward name="error" path="/errorTasca.jsp"/>

</action>

Per cada acció de la nostra aplicació tenim què s'executa (en aquest cas el GuardarTascaAction) quins paràmetres li arriben (estaran al tascaForm) vistes on podem anar després de executar-la

Page 81: Tecnologies web

La Action GuardarTascaAction

public class GuardarTascaAction extends Action {

public ActionForward execute(

ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

DynaActionForm f=(DynaActionForm)form;

try {

// Crear una tasca i guardar-la obtenint les dades de

// f.get("nom") i f.get("prioritat")

return mapping.findForward("success");

} Catch (Exception e) {

return mapping.findForward("error");

}

}

}

Page 82: Tecnologies web

Exemple de Action i Vista lligades

La Action obté una llista de tasques... Tasca[] tasques= gt.llistar();request.setAttribute("tasques",tasques);return mapping.findForward("success");

La vista visualitza les dades colocades per la Action...<c:forEach var="tasca" items="${tasques}"><tr><td>${tasca.id}</td><td>${tasca.nom}</td><td>${tasca.prioritat}</td></tr></c:forEach>

La Action “fa coses” i la vista “visualitza”

Page 83: Tecnologies web

Flux d'una aplicació struts

Demanem una URL struts (normalment acaba en .do)

Struts empaqueta els paràmetres (si n'hi ha) en la classe de tipus ActionForm especificada.

Mirem al fitxer XML quina classe hem d'executar per la URL que ens han demant

Executem el mètode execute() de la ActionClass que toqui passant-li el ActionForm amb els paràmetres

La Action retorna quina vista ha de mostrar i posa les dades necessaries a l'entorn.

La vista es construeix consultant les dades que la Action li proporciona

Page 84: Tecnologies web

Flux d'una aplicació struts

Page 85: Tecnologies web

Més sobre struts

D'entrada sembla complicat

En una aplicació gran, ajuda molt a la organització.

No ens obliga a utilitzar tecnologies concretes domini o persistència com volguem Les vistes, no necessàriament JSP

Que mes permet? Sistematitzar les validacions. Podem fer que el

ActionForm validi els valors entrats, per programa o per configuració

Plugin Tiles. Idea de jsp:include Internacionalització dels missatges (fitxer properties)

Page 86: Tecnologies web

Conclusions sobre Struts

Struts es un dels primers frameworks MVC que va sortir per Java

Permet automatitzar processos que poden donar lloc a errors com per exemple les validacions

Ordena el nostre codi Les Actions no tenen res de codi de presentació El pas de paràmetres cap a les accions queda especificat

a través de les propietats dels objectes Form Les vistes no "executen" res, només mostren El nostre struts-config.xml mostra el flux de l'aplicació

(el podriem dibuixar com un diagrama d'estats)

Page 87: Tecnologies web

Spring

Es un framework de frameworks, pero en aquest cas ens centrarem en el contenidor lleuger

Serveix per organizar millor la nostra capa de domini Programació basada en interfaces Èmfasi en el baix acoblament de les classes

Exemple: l'aplicació de les tasques Tindrem la classe "Tasca" Necessitarem un GestorTasques, que serà una façana de

tot el nostre sistema El GestorTasques utilitzarà un TascaDAO per guardar les

tasques. Per ara, en tindrem un de prova

Page 88: Tecnologies web

Capa de domini

GestorTasques

TascaDAO

<<interface>>

ProvesTascaDAO JDBCTascaDAO

DataSource

Tasca

Page 89: Tecnologies web

Si no utilitzem Spring...

Qui crea el gestorTasques? Es crea en cada petició? Podem utilitzar el patró Singleton

Si el gestorTasques utilitza un objecte de tipus DAO, li especifiquem quin es per programa? Si, es clar. Com a molt podriem tenir un fitxer de

propietats si volem que es pugui canviar

Com li diem la base de dades al DAO? Utilitzarà JNDI per anar-la a buscar o bé la configurarem

en un fitxer de propietats també

Page 90: Tecnologies web

Si utilitzem Spring...

Spring ens permetrà Llegir un fitxer de configuració on li diem els objectes que

formen el nostre sistema Si una classe depèn de una altra, farem aquesta

dependència explícita al fitxer. A nivell de programació, tindrem un “setter” d’aquesta propietat.

Spring fa de “muntador” de l’aplicació

Es basa en Inversion of Control o principi de Hollywood, "No ens truquis, dona'ns el número i et truquem nosaltres" No creis els objectes. Deixa un "set" i te l'assignarà Spring Flux de l’aplicació menys evident

Page 91: Tecnologies web

Què hauríem d’afegir al codi?

El nostre DAO necessita un Datasource?

DataSource setDataSource (Datasource ds) { this.ds=ds;}

El nostre GestorTasques necessita un TascaDAO?

TascaDAO setTascaDAO (TascaDAO dao) { this.dao=dao;}

Page 92: Tecnologies web

Fitxer de configuració per proves

<beans>

<bean id="gestorTasques" class="exemple.GestorTasques">

<property name="tascaDAO">

<ref bean="provesTascaDAO"/>

</property>

</bean>

<bean id="provesTascaDAO" class="exemple.ProvesTascaDAO">

<property name="tasques">

<list>

<bean class="exemple.Tasca">

<property name="id" value="1"/>

<property name="nom" value="Acabar transparencies"/>

<property name="prioritat" value="1"/>

</bean> ...

</list>

</property>

</bean>

</beans>

Page 93: Tecnologies web

Fitxer de configuració real

<beans>

<bean id="mysqlDataSource" destroy-method="close">

<property name="driverClassName" value="com.mysql.jdbc.Driver" />

<property name="url" value="jdbc:mysql://localhost:3306/aules" />

<property name="username" value="aules" />

</bean>

<bean id="gestorTasques" class="exemple.GestorTasques">

<property name="tascaDAO">

<ref bean="JDBCTascaDAO"/>

</property>

</bean>

<bean id="JDBCTascaDAO" class="exemple.JDBCTascaDAO">

<property name="dataSource">

<ref bean="mysqlDataSource"/>

</property>

</bean>

</beans>

Page 94: Tecnologies web

Què fa Spring amb aixo?

El contenidor (ApplicationContext) només es crearà una vegada, quan s’inicialitzi l’aplicació, que pot ser web o no

ApplicationContext ctx = newClassPathXmlApplicationContext("applicationContext.xml");

En el moment en que inicialitzem el contenidor... Spring parsejarà el fitxer i crearà les instàncies Cridarà els “setters” de les propietats per passar-li els

paràmetres especificats

A través del contenidor, podrem accedir des de la nostra aplicació a les instàncies creades

ctx.getBean("gestorTasques"));

Page 95: Tecnologies web

Què mes ens permet Spring?

Permet fer referències per tipus exemple: crear un DataSource i passar-lo a totes les

classes que en necessitin un

Spring JDBC Exepcions “amb sentit” Ens podem oblidar d’obrir i tancar connexions

Spring MVC Similar a struts, però integrat al contenidor.

AOP (Aspect Oriented Programming) Permet configurar codi a executar quan cridem un mètode

d’un bean obtingut de Spring. Interceptors. Serveix per marcar transaccions

Page 96: Tecnologies web

Conclusions sobre Spring

Es un framework poc habitual: no ens condiciona massa la forma de programar, només ens estructura

Un cop entès el concepte de Inversion of Control i utilitzat de forma bàsica, no es gens complicat

Les nostres classes no son conscients de que l’estem utilitzant. Fins i tot podriem arribar a canviar-lo o prescindir d’un framework de la capa de domini

Únic punt negatiu: els fitxers de configuració son horribles.

Page 97: Tecnologies web

Hibernate

Intenta solucionar l’etern problema de la persistència Per un costat tenim la nostra aplicació amb objectes Per l’altre, una BD relacional (mysql, Oracle…) Com les casem? hibernate

Hibernate es un mapejador Objecte-Relacional. No és un framework tal i com l’hem definit.

Fitxer XML amb els mapejos propietats <-> columnes relacions entre elles

Ofereix una capa de persistència pels objectes A la vegada, ofereix una forma de consultar-los

Igual que SQL, pero amb els objectes

Page 98: Tecnologies web

Hibernate: exemple de guardar un objecte

// ...Configuration cfg = new Configuration() .addClass(Product.class) .addClass(Order.class) .addClass(OrderItem.class);

// ...Order order = new Order();order.addProduct(milk, 3);order.addProduct(coffee, 5);

// ...sess = sf.openSession();Transaction t = sess.beginTransaction();sess.save(order);t.commit();sess.close();

Page 99: Tecnologies web

Hibernate: exemple de consulta

// ...String query = "select o from o " + "in class test.hibernate.Order " + "where o.priceTotal > :priceTotalLower " + "and o.priceTotal < :priceTotalUpper";

// ... Query q = sess.createQuery(query);q.setDouble("priceTotalLower", Double.parseDouble(args[0]));q.setDouble("priceTotalUpper", Double.parseDouble(args[1]));

List list = q.list();// ...sess.close();// ...

Page 100: Tecnologies web

Relacions

Implementa relacions entre classes Exemple: equips i jugadors

<hibernate-mapping>

<class name="example.Team" table="teams">

<id name="id" column="team_id" type="long" unsaved-value="null">

<generator class="hilo"/>

</id>

<property name="name" column="team_name" type="string"

length="15" not-null="true"/>

<property name="city" column="city" type="string" length="15"

not-null="true"/>

<set name="players" cascade="all" inverse="true" lazy="true">

<key column="team_id"/>

<one-to-many class="example.Player"/>

</set>

</class>

</hibernate-mapping>

Page 101: Tecnologies web

Com soluciona les relacions?

A partir d’aquest fitxer, genera l’esquelet de la classe

Bidireccional: Des del jugador, podem accedir a l’equip (getTeam) Des de l’equip podem accedir al jugadors (getPlayers) Ens torna un Set (conjunt) de resultats

Lazy: Quan carreguem un jugador, no carrega els jugadors Quan volem els jugadors, s’accedeix a BD No podem tancar la sessió

Cascade Mateix sentit que a bases de dades

Page 102: Tecnologies web

Hibernate a l'exemple de les tasques

Farem un DAO utilitzant Hibernate

Li passarem la configuració amb Spring

Mapejarem la taula "tasques"

<hibernate-mapping>

<class name="exemple.Tasca" table="TASQUES">

<id name="id" column="ID">

<generator class="increment"/>

</id>

<property name="nom" column="NOM"/>

<property name="prioritat" column="PRIORITAT"/>

</class>

</hibernate-mapping>

Page 103: Tecnologies web

Conclusions sobre Hibernate

Hibernate posa una capa respecte a executar SQL contra una base de dades Pot tenir mètodes de cache que acceleren les nostres

consultes i optimitzar la velocitat Pot generar un SQL molt més costós que el que podriem

generar nosaltres mateixos directament

En general, Hibernate requereix uns coneixements importants de la plataforma per treure el màxim rendiment

Consell particular: Si no us espanta el SQL, utilitzeu JDBCTemplate. No es tan sofisticat, pero dona més sensació de control.

Page 104: Tecnologies web

Resumint l'exemple

Amb Struts hem fet la capa de presentació pantalles amb JSP Controlador amb les "Action"

Amb Spring hem organitzat la capa de domini Creació i configuració dels gestors Configuració general de l'aplicació

Amb Hibernate hem accedit a la BD Hem accedit a una base de dades relacional sense

abandonar la orientació a objectes

Hem utilitzat les 3 tecnologies conjuntament sense interferències entre elles

Page 105: Tecnologies web

Relació entre Struts i Spring

Plugin de struts al fitxer struts-config.xml

<plug-in className="org.springframework.web.struts.ContextLoaderPlugIn"> <set-property property="contextConfigLocation" value="/WEB-INF/applicationContext.xml"/></plug-in>

Canviem les ActionClass per ActionSupport

public class EditarTascaAction extends ActionSupport { public ActionForward execute(...) throws Exception {

ApplicationContext ctx = getWebApplicationContext(); GestorTasques gt= (GestorTasques)(ctx.getBean("gestorTasques"));

Page 106: Tecnologies web

Cap on anem?

Struts 2 Evolució de Struts, amb alguns canvis importants Ha agafat idees de Spring (dependency injection)

Anotacions Disponibles des de Java 1.5 Permet fer comentaris que després es puguin llegir, es

a dir, afegir informació a les classes, mètodes i propietats

Permet estalviar-nos alguns fitxers de configuració Exemples: columnes de BD a que equivalen propietats

Page 107: Tecnologies web

Necessitem eines!

xDoclet Generador automàtic de fitxers a partir de “meta-

informacio” als fitxers Java Es com un JavaDoc ++, les anotacions ho han copiat

Eclipse + plugins adequats Entorn de desenvolupament extensible Desenvolupar amb el plugin adequat pot suposar que

una tecnologia sigui o no usable.

ANT i Maven Entorns per compilar, similar al Make

Junit Framework per proves unitaries.

Page 108: Tecnologies web

Conclusions de frameworks

Utilitzar Spring, Struts i Hibernate es complex

La corba d'aprenentatge es important

Costa dominar-los al 100%

Canviem programació per configuració de fitxers XML

Tenim més codi del que voldríem, tot i que tenim eines que ens ajuden a generar-lo

Tot es dolent? No Ens obliguen a fer la nostra aplicació més ordenada Importants per la mantenibilitat

Existexen frameworks centrats en simplificar? SI

Page 109: Tecnologies web

Ruby on Rails

Ruby és un llenguatge de programació (poc conegut)

Rails és un framework per programar aplicacions web

Diferència: No fa servir fitxers XML i molt poca configuració Intenta reduir el codi al màxim Es publicita amb videos tipus teletienda

Voleu provar? http://instantrails.rubyforge.org/

Page 110: Tecnologies web

L'exemple de les tasques

Pas 1: crear l’aplicació$ rails tasques$ cd tasques

Pas 2: configurar la BD Tocar el fitxer config/database.yml (no XML!)

Pas 3: generar la classe “task” i els fitxers necessaris$ ruby script/generate scaffold Task nom:string prioritat:integer

Pas 4: crear la taula i la base de dades al mysql a partir de la definició de task$ rake db:migrate

Engegar el servidor i connectar-se a localhost:3000/tasks$ ruby script/server

Page 111: Tecnologies web

Conclusions sobre rails

Aire fresc en el mon dels frameworks “Convention over configuration”

Suposarem que les coses es diuen d’una certa forma Guanyem coherència i estalviem errors

Substitueix XML per un format mes senzill Mapeig totalment transparent objecte/relacional URL amb sentit (edit, new...) Podem posar en marxa un prototip en un temps

mínim Però...

Convencions basades en l’anglès (plurals i noms de columnes)

Ruby es un llenguatge desconegut i això fa por

Page 112: Tecnologies web

A l’ombra de rails...

Django (Python) Parteix de classes i no de la BD

Symfony (PHP)

CakePHP (PHP) Necessiten de les novetats de PHP5

Trails (i també Grails) Internament, utilitza Spring, Tapestry i Hibernate

Rails ha revolucionat el mon dels frameworks, creant-ne de mes alt nivell

Page 113: Tecnologies web

Programar pensant en la seguretat

Page 114: Tecnologies web

Programar pensant en la seguretat

Les aplicacions web mal programades programades poden ser un problema se seguretat

Permeten recuperar informació de la màquina

Un error pot fer que poguem executar codi amb els privilegis de l’usuari que executa el web

Manipulant l’aplicació, podem fer coses que no hauriem de poder fer

… i tot aixo via web, sense arribat a entrar a la màquina!

Page 115: Tecnologies web

OWASP Top 10

1 - Cross Site Scripting (XSS)

2 - Injection Flaws

3 - Malicious File Execution

4 - Insecure Direct Object Reference

5 - Cross Site Request Forgery (CSRF)

6 - Information Leakage and Improper Error Handling

7 - Broken Authentication and Session Management

8 - Insecure Cryptographic Storage

9 - Insecure Communications

10 - Failure to Restrict URL Access

Page 116: Tecnologies web

Fiar-se dels paràmetres

Qualsevol paràmetre que arribi a les nostres pàgines de mans del client ha de ser validat L’usuari pot canviar els valors que apareixen a qualsevol

URL nomes editant la línia i provant.

Exemple de vulnerabilitat Seleccionem un producte en un catàleg Enviem a la pàgina que afegeix al carro el identificador

del producte i el preu

Solució: Validar sempre els paràmetres

Page 117: Tecnologies web

Autorització d’usuaris incorrecta

Quins rols poden accedir a quins serveis?

Què passa si accedim a la URL d’una pàgina que només esta visible per un usuari privilegiat amb un usuari normal?

Exemple: Web protegit. Sempre demana password Formulari que comprova que siguem “admin” El “action” d’aquest formulari no esta protegit

Solució: Seguretat declarativa sempre que es pugui Revisar qui pot accedir a cada pàgina

Page 118: Tecnologies web

Session hijacking

Si aconseguim el ID de sessió d’un altre usuari, ens podem fer passar per ell temporalment. Podem “esnifar” el ID d’un altre usuari amb la xarxa Podem mirar la cookie al seu navegador Si esta a la URL, ens la podem copiar (difícil si es llarga)

Solució: ID llargs Sessions millor per cookies Nomes HTTPS Caducitat curta

Page 119: Tecnologies web

Atacs de força bruta

Hi ha diccionaris de passwords habituals

Aprofitar les preguntes per recordar el password (solen ser més facils que un password i no sempre son personals) Com es diu el meu gos? Segurament molta gent ho sap

Solució: Bona política de passwords Deshabilitar els comptes després de X accessos

Page 120: Tecnologies web

Cross Site Javascript (XSS)

Es que un altre usuari del web miri una pàgina on hi ha codi JavaScript escrit per l’atacant

Exemple: un forum, un sistema de missatges on podem enviar

algo que veurà un usuari privilegiat. El codi, que s’afegeix a la pàgina, podria enviar la cookie

de sessio per http a un servidor extern Manipular el DOM per canviar el contigut

Solució: Filtrar els tags en qualsevol paràmetre que s’envii cap a

la nostra aplicació

Page 121: Tecnologies web

Cross Site Request Forgery (CSRF)

Consisteix construir un link que faci una operació en un web en el que l’atacant ja ha entrat

Exemple (una mica irreal): Tenim obert el nostre banc i el webmail al mateix temps Ens arriba al webmail amb un link de l’estil

http://www.meubanc.com/transfererir?origen=xxx&desti=yyy&euros=1000

Massa evident? Els links es poden dissimular: frames ocults, imatges…

Solució: Com usuari, no tenir finestres obertes d’entorns delicats

quan mirem altres webs Tokens per fer peticions úniques, operacions només via

POST…

Page 122: Tecnologies web

Clickjacking

La idea es fer-li veure a l’usuari una pàgina modificada on els links que hi ha no fan el que s’espera

Exemple Creem una pàgina amb un iframe transparent i un altre

visible per sota. Fem que l’atacant clicki un link. Ell veurà el web visible,

però el click es farà al web de sobre, que no veu.

Solució: Ara mateix... no hi ha una solució clara. Com a usuari, plugin NOSCRIPT Fer servir LYNX (hi ha gent que viu fora de la realitat!)

Page 123: Tecnologies web

Buffer Overflows

Consisteix en aprofitar que no es comproven els límits en la longitud de les dades per executar instruccions

És un problema que afecta als servidors, programats en C i que no comproven límits de longitud

Difícil d’explotar a menys que es disposi del codi font del servidor

Important! Pot afectar també als navegadors (que es més normal que no s’actualitzin) via aplicacions web

Solució: Estar actualitzat a últimes versions

Page 124: Tecnologies web

Injecció de codi

Modificar alguns dels paràmeters per fer que l’aplicació executi codi que “injectem” a l’aplicació

SQL (en l’autentificació d’usuaris) Select * from users where user=‘$u’ and pass=‘$p’ Fem que $p valgui “x’ or ‘1’=‘1”

Comandes de sistema operatiu System (“sendmail $mail”) Fem que $mail valgui “[email protected];rm –rf /”

Directori “../” fopen ($fitxer) Li passem “../../../etc/password”

Solució: Validar paràmetres

Page 125: Tecnologies web

Tractament dels errors incorrecte

Els errors poden desvetllar informació sobre el sistema Versions concretes de servidors Pantalles d’error on mostra el codi que falla Errors SQL que ens permeten coneixer les taules Errors de connexió que mostren on ens intenten connectar Errors relacionats amb fitxers Ens mostra el path del fitxer que no troba Ens diu que no tenim accés (no que no existeix)

Solució Configurar els servidors de producció perque els errors no es

mostrin mai en pantalla, sino en fitxers de log

Page 126: Tecnologies web

Emmagatzemament insegur

Guardar informació sensible de forma insegura al servidor.

Passwords per les connexions I si estan en un fitxer .inc i aquest fitxer es visible?

Números de compte corrent I si podem fer SQL injection i veure aquest camp?

Fitxers de configuració Pot ser que estiguin en un directori mapejat al web? Pot ser que hi poguem accedir amb ../

Solució Llista de les informacions crítiques Veure que podem fer per que no estiguin facilment disponibles

Page 127: Tecnologies web

Denial of Service (DOS)

Consisteixen en inundar el servidor de peticions perque no pugui donar servei als seus usuaris legítims

No s’aconsegueix accés al servidor

És més un acte de protesta que de hacking

Solució: A nivell d’aplicació no n’hi ha Per xarxa, es pot intentar tallar l’accés a l’atacant

Page 128: Tecnologies web

Configuració incorrecta del sistema

Deixar els exemples

Comptes per defecte (amb passwords coneguts)

Deixar la possibilitat del llistat de fitxers en un directori on hi ha informació privilegiada

Solució: Mirar amb lupa les configuracions. Vigilar els valors per defecte Treure tot el que específicament no necessitem

Page 129: Tecnologies web

Conclusions

Validar, validar i validar.

Assegurar-nos que coneixem be els nostres servidors i tenir les configuracions controlades.

Evitar fer coses que algú ja ha fet i ha comprovat que no té problemes de seguretat No tornar a implementar sistemes d’autentificació

Algú pot utilitzar les nostres pàgines de forma diferent a com fem que les utilitzin.

Page 130: Tecnologies web

S’ha acabat

Gràcies, això es tot!

[email protected]