slide1
Download
Skip this Video
Download Presentation
Tecnologies Web Seminaris d’empresa 2013

Loading in 2 Seconds...

play fullscreen
1 / 132

Tecnologies Web Seminaris d’empresa 2013 - PowerPoint PPT Presentation


  • 126 Views
  • Uploaded on

Tecnologies Web Seminaris d’empresa 2013. inLab FIB Jaume Moral. Índex. Tecnologies de client: del HTML a AJAX. Responsive design , web en el mòbil i accessibilitat Conceptes bàsics d\'aplicacions web. Les arquitectures basades en Java

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Tecnologies Web Seminaris d’empresa 2013' - dacey


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Tecnologies Web

Seminaris d’empresa

2013

inLab FIBJaume Moral

slide2
Índex
  • Tecnologies de client: del HTML a AJAX.
  • Responsivedesign, web en el mòbil i accessibilitat
  • Conceptes bàsics d\'aplicacions web.
  • Les arquitectures basades en Java
  • El mon dels frameworks: Spring, Struts, Hibernate...
  • Programar pensant en la seguretat
  • Casos pràctics:
    • L’entorn de desenvolupament Java + web a inLab FIB
    • Com hem muntat el web de inLab amb Drupal
    • El Racó i la API del Racó
    • Single Sign On a la FIB
de qu parlarem
De què parlarem?
  • CSS
  • DOM
  • Javascript
  • HTML5
  • AJAX
  • JQuery
les p gines web html css
Les pàgines web: HTML + CSS
  • El HTML és el que conté la informació de la pàgina.
  • Els fulls d’estil CSS contenen la forma en que es visualitzen
  • 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

<spanclass=”titol”>Aixo es un titol</span>

<spanid=”menu1”>Primer menu</span>

  • Separar la presentació del contingut, faciliten la coherència
tipus de propietats que hi ha a css
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
  • S’apliquen a certs elements de la pantalla amb uns filtres anomenats selectors
    • .navegacio li -> tots els li dintre de class=“navegacio”
    • #cap a:hover -> tots els links del id=“contingut” quan passem per sobre
l estructura de la p gina i el dom
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
example rea desplegable
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>

html 5
HTML 5
  • http://www.html5rocks.com
  • HTML5 =~ HTML + CSS + Javascript
    • Nous tags HTML
    • CSS3
    • Les API per accedir al DOM ja formen part de l’especificació
    • Pensat més per aplicacions i no simplement per pàgines
  • Com identificar una pàgina com HTML 5?
    • <!doctype HTML>
novetats m s importants de html 5
Novetats més importants de HTML 5
  • Emmagatzemament local
    • Clau valor
    • Base de dades (Indexed DB i SQL, ja deprecated)
  • Cache i suport per aplicacions off-line
  • Interfície d’usuari
    • Drag & drop
    • Nous camps per formularis: mail, numero, telefon...
  • Nous tags d’estructura
  • Multimedia
    • Tags audio, video, canvas, webgl
    • No hi ha acord amb els formats
  • API per Geolocalització, Websockets...
on podem fer servir html5
On podem fer servir HTML5?
  • IE9, Chrome, Safari i Firefox 4+ (si no... Modernizr)
  • Mòbils
    • Camps de formularis adaptats
    • Geolocalització
    • Aplicacions off-line
    • Efectes i estil de mòbils: jQuery Mobile / PhoneGap
  • Substitut per Flash
    • Tag video
    • Canvas + Javascript o animacions CSS3
  • Aplicacions per windows 8
javascript avan at
Javascript avançat
  • Amb la manipulació del DOM, 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 la comunicació directa amb el servidor (AJAX)
    • Accedir facilment al DOM
  • Algunes d’aquestes capacitats depenen del navegador i es fa necessari una llibreria que ens abstregui
funcions an nimes
Funcions anònimes
  • function avisar(x) {alert(x)

}

  • var avisar= function (x) {alert(x)

}

  • document.getElement(“boto”).onclick=function(event) {

alert(“hola”);

}

json javascript object notation
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
la revoluci ajax
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
flux d execuci de ajax
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
qu no s ajax
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.
    • Idea de JSONP, que veurem tot seguit
  • AJAX no es només XML
    • Hi ha altres formats per intercanviar informació
  • Parlem amb propietat, que per algo som enginyers!
restriccions de ajax i jsonp
Restriccions de AJAX i JSONP
  • No podem fer una petició AJAX a un servidor diferent que el que ens ha proporcionat la pàgina
  • Forma de saltar-se aquesta restricció: JSONP
    • Carrega un fitxer JS d’una màquina remota que acaba fent una crida a una funció Javascript de la nostra pàgina.
    • El nom ve de que es una estructura JSON amb un afegit (padding), que seria la crida a la funció
    • Ideal per fer API de serveis i incrustar-los a les nostres pàgines amb Javascript.
    • Exemple: API de twitter
jquery
JQuery
  • Idea: afegir “comportament” als elements de la pàgina de la mateixa forma que s’afegeixen propietats de visualització amb CSS
  • Es un javascript “no intrusiu”, que no es posa dintre del HTML
    • Exemple: fem que els links amb class “menu” quans els clickem s’amaguin

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

);

m s sobre jquery
Més sobre JQuery
  • Events
    • $(selector).click(funcio_a_executar)
    • $(selector).mouseover(funcio_a_executar)
  • Animacions
    • $(selector).fadeIn(“slow”)
    • $(selector).animate({width:20,height:200}, "slow")
  • CSS
    • $(selector).addClass(“coses”)
    • $(selector).css ({width:200})
  • Manipulació del DOM
    • $(selector).append(“<p>Afegim HTML!</p>”)
ajax amb jquery
AJAX amb JQuery
  • Crida AJAX

$.ajax({

url: \'document.xml\',

type: \'GET\',

dataType: \'xml\',

timeout: 1000,

error: function(){

alert(\'Error loading XML document\');

},

success: function(xml){

// do something with xml

}

});

  • Carregar HTML via AJAX

$(selector).load(“document.html”)

extensions de jquery
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://jqueryui.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();

conclusions
Conclusions
  • Una pàgina web no es una pàginaimmutable i estàtica
  • La sevaextructuras\'exposavia DOM
  • Es pot manipular i canviar la visualització
  • Potrespondre a eventsJavascript
  • Potdemanarinformació a un servidor via AJAX
  • Tenimllibreriesfantàstiques que ensajuden: jQuery
  • Una pàgina web pot arribar a tenir un nivelld’interactivitat similar a una aplicaciód’escriptori
qu es responsive design
Què es responsivedesign?
  • Adaptar el contingutperque es vegi de la millor forma en qualsevoldispositiu.
    • No fer dos versions, sino una adaptable a la mida de la pantalla que tenim
  • Idea inicial: EthanMarcotte
  • http://www.alistapart.com/articles/responsive-web-design/
layout fixe
Layoutfixe
  • Treballem per una resolució concreta
    • Típica: 960px d’amplada (per pantalles de 1024px)
  • Podem “quadrar” el disseny al pixel
  • Quèpassa si la pantalla es mes gran?
    • Centremcontingut i omplim de blanc
  • Quèpassa si es méspetita?
    • Hem de ferscroll o es veure-horeduit
    • Hem de fer una segonaversió
layout l quid
Layoutlíquid
  • No utilitza mides en pixels, sino en %
  • S’adapta a la mida de la pantalla
  • Un dissenypensat per una pantalla gran, adaptat a mòbil no hicap
    • Exemple: multiplescolumnes, imatgesgrans
  • Un dissenypensat per pantalla petita es incomode en pantalla gran
    • Columna moltestreta / massaampla
idea del responsive design
Idea del responsivedesign
  • Consultem la resolució
  • Fem CSS adaptats a la resolució
    • Líquid, fixe o una barrejadepenent de la mida
  • Aixoenspermet
    • Canviar mides segons la resolució
    • Amagar elements
    • Recolocar elements
  • Volem una única versió del web!
media queries
Media queries

<link href="phone.css” rel="stylesheet" type="text/css" media=“screen and (max-width: 400px)" >

@media screen and (max-width: 400px) {

…. /* estils propis de pantalla petita */

}

@importurl(phone.css) screen and (max-width: 400px)

control del viewport
Control del viewport
  • iPhonesuposa que la pantalla fa 980px
    • Tot el que posem es veupetit
  • Si fem un CSS adaptat, volem evitar aquestcomportament
    • No volemfer zoom ni scroll

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

problema les imatges
Problema: les imatges
  • Problema típicdelslayoutslíquids
  • El textflueix en linies, les imatges no
  • Imatgesmassapetites o que sobresurten
  • Solucions
    • Tallar les imatges (propietat de cssoverflow)
    • Imatges de fonsamb CSS, que podemcanviardepenent de la resolució
    • Reescalarambmax-width: 100%
consells
Consells
  • Començaramb una versió que es vegibé al mòbil
    • Base que es vegibé en mòbil
    • @media amb min-width
  • Provarambdiferents mides i navegadors
  • Intentar no partir de zero
    • Skeleton, Amazium….
    • El que s’haconvertit en stardard: Bootstrap
una ajuda bootstrap
Una ajuda: bootstrap
  • Framework de CSS desenvolupat per twitter
    • Garantia de confiança
  • Permet que elsnostres webs tinguin una presentacióprofessionalsimplementafegintcertesclassesalsnostreselements
  • Permetpersonalització
  • Incorpora elements de responsivedesign
    • Podemtenir-los o no!
components
Components

Botons

Menus

Etiquetes

Missatgesd’error

Barra de progrés

Formularis

Taules

la graella
La graella
  • Permet colocar elselements de forma ordenada a la pàgina
  • Un bon disseny té una graella
    • Mireuqualsevoldiari
  • Bootstrap te una graella de 12 columnes
    • 960px (fixa)
    • Líquida
    • Reponsive (tant liquida comfixa)
conclusions sobre responsive design
Conclusions sobre ResponsiveDesign

Reponsivedesignésja una necessitat

Bootstrapaconsegueixfer-hofàcil

Bootstrappermet que un web tingui un dissenybastantacceptablesensenecessitar un dissenyador ni confiar en que elsinformàtics triaran unscolors que no facin mal alsulls

altres aproximacions
Altresaproximacions
  • Disseny per mòbils en HTML imitant una aplicació nativa.
  • Quanfer-ho servir?
    • Quèestemprogramant?
    • Una aplicació o un web?
  • Concepte de webapp
    • “Carcassa” nativa amb una vista web dintre… ambaspected’aplicació nativa
idees de jquery mobile
Idees de jQuery Mobile
  • Atribut “data-role” alselements
  • Pàginesd’unaaplicació en un sol HTML
    • <div data-role=“page”></div>
    • Links entre pàginesambanchors
  • Elementstípics
    • <div data-role=“header”> (content o footer)
    • <ul data-role=“listview”>
    • <a href=“” data-transition=“slide”>
exemple de jquery mobile
Exemple de jQuery Mobile
  • Llistad’elements
  • Passem a una segonapàginaambtransició de desplaçament
  • Botó de tornar
  • Es veucom una pàgina normal i corrent si desactivemels CSS + JS
conclusions1
Conclusions
  • jQuery Mobile permetdesenvoluparaplicacionsmòbilsambaspectenatiuutilitzantúnicamenttecnologies web
  • Últimquanrealment no necessitemcaptecnologiapròpia del mòbil
    • No serveix per ferAngryBirds
    • Sí serveix per fer una banca on line
accessibilitat1
Accessibilitat
  • És fer que tothom pugui fer servir el nostre web, incloent persones amb discapacitats (visuals, auditives i d’altres)
  • Projecteambl’empresaTechnosite
    • Experts en accessibilitat
    • Colaboracióamb la fundació ONCE
  • Auditories a diferents webs de la UPC
    • Web institucional
    • Ateneas
  • Versió 2.0 de les WAI
wai 2 0
WAI 2.0
  • Les pautes insisteixen en aquests temes
    • Alternatives textuals
    • Alternatives per continguts temporals
    • Adaptabilitat del contigut (a diferents dispositius)
    • Que es pugui distingir el text del fons
    • Que tot es pugui fer desde teclat
    • Donar suficient temps
    • Evitar continguts que puguin provocar atacs epilèptics
    • Fer continguts amb navegació
    • Fer els textos llegibles i entenibles
    • Predictibilitat. Que les coses funcionin com s’esperen
    • Ajuda als errors
    • Compatibilitat
qu ens han trobat
Què ens han trobat?
  • Els formularis han d’estar correctament marcats
    • Label per descriure els camps
    • Fieldsets per agrupar
  • Els botons han de ser botons
    • Si es vol posar disseny ha de ser amb CSS
  • S’han de fer servir colors amb suficient contrast
  • Les taules només s’han de fer servir per taules
  • S’ha d’especificar l’idioma de les pàgines
  • Els links han d’explicar on van. No posar mai “aqui” o “més informació”
    • A l’obtenir una llista de links, no tenim informació
qu hem apr s
Què hem après?
  • Una persona que no hi veuesbasamolt en agrupacionslògiques de contingut
    • Llistes de contingutsrelacionats
    • Jerarquia de títols
  • El javascript no està prohibit, tot ique ho pot semblar
  • El flash també pot ser accessible
  • Un web s’ha de poder “entendre” sense CSS i sense imatges
  • Les imatgeshan de tenirdescripcióquan cal
    • Si té un text al costat o esdecorativa, no cal
  • Es MOLT difícilfercanvisquan no s’hatingut en compte des d’un principi
de qu parlarem1
De què parlarem?
  • La interacció bàsica amb aplicacions web
  • Pas de paràmetres
  • Sessions
  • Cookies
  • Connexions a BD
interacci b sica
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
pas de par metres
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
sessions
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.
cookies
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, 21-Jan-2030

  • 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

cookies de sessio
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)
par metre id sessio
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
quan acaben les sessions
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”
acc s a bases de dades
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
pools de connexions
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!
conclusions2
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 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.
de qu parlarem2
De què parlarem
  • Java com a llenguatge per fer aplicacions web
  • Servlets
  • JSP
  • El concepte d\'aplicació web
  • L\'especificació JEE
especificaci de servlets
Especificació de Servlets
  • Són una sèrie de tecnologies per fer aplicacions web desde Java
  • Compren diversos elements
    • Servlets pròpiament
    • JSP
    • Taglibs
    • Expressionlanguage
    • Concepte d’aplicació web (WAR)
  • El servidor més conegut que suporta treballar amb servlets és Tomcat
  • Veurem una a una totes aquestes tecnologies
servlets
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
exemple de servlet
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”);

}

}

slide65
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
la idea de tag libs
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 TagLibs 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 llenguatge per expressions: expressionlanguage
    • Ben utilitzada, converteix un JSP en una plantilla
exemple de p gina amb tag libs
Exemple de pàgina amb TagLibs

<%@ page language=\'java’ %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<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>

comunicaci servlet jsp
ComunicacióServlet/JSP
  • Un servletpotpassar variables cap a la JSP publicant-les en un entornamb un nom
    • Sessió
    • Request
  • JSP pot pintar-les utilitzant JSTL
  • request.setAttribute(“authors”,authors);
  • request.getSession().setAttribute(“user”,user);
  • Servlet = controlador (executa, prepara les vistes)
  • JSP = vista (només pinta, no executa res)
java web applicacions
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 ApplicationArchive)
exemple de java web application
Exemple de Java Web Application
  • aplicacio/
    • html/ – pàgines estàtiques
    • jsp/ - pàgines JSP
    • css/ – fulls d’estil
    • img/– imatges
    • js/ - javascript
    • WEB-INF/ – directori no visible directament
      • web.xml – descriptor de l’aplicació
      • classes/ – classes de l’aplicació i servlets
      • lib/ – llibreries (JAR) utilitzades per l’aplicació
seguretat al web xml
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>

la pe a que falta
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
conclusions sobre servlets jsp
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ó, especialment al mon empresarial
  • Suport per fer aplicacions estructurades
  • Llibreries de qualsevol cosa: busqueu abans de desenvolupar!
arquitectura jee
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 (Enterprise Java Beans)
    • Capa de presentació
  • JEE és un Model de programació
    • Com hem de desenvolupar les aplicacions?
  • JEE és una Plataforma:
    • Què necessitem per executar-les?
servidors jee
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, ara en Open Source
    • Weblogic
    • IBM Websphere
    • ...
google app engine
Google AppEngine
  • Es la plataforma d’execució d’aplicacions web de Google.
  • No es un servidor JEE ni un Tomcat, pero permet executar aplicacions web Java (i python)
  • Us permet instalar i gestionar les vostres aplicacions, desenvolupades desde Eclipse
  • Serveis que integra
    • Autenticació (amb el username de google)
    • Persistència (en una tecnologia propia: BigTable)
  • Bona idea si voleu fer pública la vostra aplicació
conclusions d arquitectures java
Conclusionsd\'arquitectures Java
  • Java ha trobat un lloccom a plataforma peldesenvolupamentd\'aplicacionsempresarials
  • Podemutilitzar Java al servidor d’una forma simple (Servlets / JSP) o bél’arquitectura completa JEE
  • Una aplicació JEE es potexecutar en qualsevolservidors que compleixi les especificacionsteòricament "sensecanvis"
  • Ésnecessaria tota aquestacomplexitat de JEE? Normalment, no
    • Per exemple, el Racó: sónServlets i un Tomcat
frameworks
Frameworks
  • Que és exactament un framework?
  • Struts
  • Spring i com lligar-lo amb Struts
  • Hibernate
  • L\'arquitectura completa
  • 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
framework plataforma llibreria
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ó

perqu un framework
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?
frameworks per jee
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ó Dependencyinjection
  • 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
l aplicaci d exemple
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.
for ant mvc struts
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
exemple form nova tasca
Exemple: form nova tasca

<html:formaction="/guardarTasca">

<html:hiddenproperty="id" />

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

<br>

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

<html:submitvalue="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
el actionform associat al formulari
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
una action al struts config xml
Una Action al struts-config.xml

<actionpath="/guardarTasca"

type="presentacio.GuardarTascaAction"

name="tascaForm"

scope="request">

<forwardname="success" path="/llistaTasques.do"

redirect="true"/>

<forwardname="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
la action guardartascaaction
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");

}

}

}

exemple de action i vista lligades
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”
flux d una aplicaci struts
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
m s sobre struts
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)
conclusions sobre struts
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)
spring
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
capa de domini
Capa de domini

Tasca

TascaDAO

<<interface>>

GestorTasques

ProvesTascaDAO

JDBCTascaDAO

DataSource

si no utilitzem spring
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é
spring ikea
Spring = Ikea

Tenim una sèrie de peces

Les peces tenenuns “forats” que permetenencaixar-les entre elles

Tenim un llibred’instruccions

Seguint el llibred’instruccionspodemmuntar el moble

El muntador no ve dintre del paquet.

Podem arribar a muntar les peces d’una forma diferent que també ensserveixi

si utilitzem spring
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
qu haur em d afegir al codi
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;}

fitxer de configuraci per proves
Fitxer de configuració per proves

<beans>

<beanid="gestorTasques" class="exemple.GestorTasques">

<propertyname="tascaDAO">

<refbean="provesTascaDAO"/>

</property>

</bean>

<beanid="provesTascaDAO" class="exemple.ProvesTascaDAO">

<propertyname="tasques">

<list>

<beanclass="exemple.Tasca">

<propertyname="id" value="1"/>

<propertyname="nom" value="Acabar transparencies"/>

<propertyname="prioritat" value="1"/>

</bean> ...

</list>

</property>

</bean>

</beans>

fitxer de configuraci real
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>

qu fa spring amb aixo
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

ApplicationContextctx = new

ClassPathXmlApplicationContext("applicationContext.xml");

  • En el moment en que inicialitzem el contenidor...
    • Springparsejarà 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"));

qu mes ens permet spring
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
conclusions sobre spring
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.
hibernate
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
hibernate exemple de guardar un objecte
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();

hibernate exemple de consulta
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();

// ...

relacions
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>

com soluciona les relacions
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
hibernate a l exemple de les tasques
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>

conclusions sobre hibernate
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.
resumint l exemple
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
relaci entre struts i spring
Relació entre Struts i Spring
  • Plugin de struts al fitxer struts-config.xml

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

  • Canviem les ActionClass per ActionSupport

publicclassEditarTascaActionextendsActionSupport {

publicActionForwardexecute(...) throwsException {

ApplicationContextctx = getWebApplicationContext();

GestorTasquesgt= (GestorTasques)(ctx.getBean("gestorTasques"));

cap on anem
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
conclusions de frameworks
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
programar pensant en la seguretat1
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!
fiar se dels par metres
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
autoritzaci d usuaris incorrecta
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
session hijacking
Sessionhijacking
  • 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
atacs de for a bruta
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
cross site javascript xss
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ó
cross site request forgery csrf
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…
injecci de codi
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
  • Directori “../”
    • fopen ($fitxer)
    • Li passem “../../../etc/password”
  • Solució:
    • Validar paràmetres
tractament dels errors incorrecte
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
emmagatzemament insegur
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
configuraci incorrecta del sistema
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
una ajuda firewalls d aplicaci
Una ajuda: firewalls d’aplicació
  • Element que es coloca entre el navegador i l’aplicació i que analitza les peticions HTTP
  • Talla la petició si detecta un patró maliciós
    • Regles genèriques (ex:<script> als paràmetres)
    • Regles adaptades a les nostres aplicacions
  • Mateixos problemes que els antivirus
    • Falsa sensació de seguretat
    • Les regles han d’estar al dia
    • Poden donar falsos positius
  • Exemple: modsecurity (modul de Apache)
uns amics owasp
Uns amics: OWASP
  • Organització no lucrativa que vetlla per la seguretat a les aplicacions web
  • Bones pràctiques
  • Llistes d’errors més comuns (OWASP Top 10)
  • Llibreries per fer validacions i altres eines
  • Conferències (també a Espanya)
  • Llibres
  • WebGoat: curs pràctic de seguretat web
    • Reptes de hacking en una aplicació “mal feta”
conclusions3
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ó
  • Si volem un nivell més de seguretat, posar un firewall d’aplicacions
  • Algú pot utilitzar les nostres pàgines de forma diferent a com fem que les utilitzin.
s ha acabat
S’ha acabat

Per consultes sobre el seminari o temes web en general

[email protected]

Per suggerències o problemes amb el web de la FIB

[email protected]

Per suggerències o problemes amb quasevol tema

dels servidors o aules informàtiques de la FIB

[email protected]

ad