Diferència entre revisions de la pàgina «NF3 - Objectes predefinits del llenguatge Javascript»

De wikiserver
Dreceres ràpides: navegació, cerca
(→‎Exercici 1)
(→‎Exercici 2)
Línia 163: Línia 163:
 
Modifica l'exercici anterior per tal de que l'iframe intenti carregar google, però des de l'script modifica el location per carregar la wikipedia.
 
Modifica l'exercici anterior per tal de que l'iframe intenti carregar google, però des de l'script modifica el location per carregar la wikipedia.
  
−
:[[solució execici canviar location]]
+
<!--:[[solució execici canviar location]]-->
  
 
== Missatges entre diferents finestres ==
 
== Missatges entre diferents finestres ==

Revisió del 15:08, 25 nov 2014

The Browser Object Model (BOM)

Si creus que JavaScript viu dins del navegador de web, és parcialment correcte, és cert que el navegador web és l'amfitrió pel vostres programes JavaScript, però els vostres programes mai interaccionaran directament amb el navegador web. En comptes d'això s'ha de treballar amb una col·lecció d'objectes JavaScript que actuen com un intermediari entre el vostre JavaScript i el navegador web. Aquesta col·lecció d'objectes s'anomena BOM(Model d'Objecte del Navegador). El seu objectiu és proporcionar una interfície simple, compatible entre els programes javascript i el navegador web.

Els programes escrits per una plataforma (com l'UNIX) no funcionen en una altra plataforma (com Windows) sense molta feina de conversió. Això és a causa que utilitzen una interfície de programació molt diferent per dur a terme la mateixa tasca. Considerem ara la indústria dels navegadors web. El codi Javascript que crea per a l'Internet Explorer ha de ser capaç de funcionar a la perfecció en el Netscape Navigator. Pots fins i tot utilitzar el codi que va escriure per al navegador en Linux amb Internet Explorer en Macintosh. Això és a causa que tots dos navegadors són compatibles amb la mateixa interfície de programació, és a dir, el model d'objectes del navegador.

El model d'objectes del navegador es compon de una gran col·lecció d'objectes que permeten als programes Javascript ficar-se en cada racó del navegador web. Tots els objectes estan disposats en una estructura d'arbre. L'objecte de la finestra es troba en la part superior d'aquest arbre i tots els altres objectes del model d'objectes del navegador es pot trobar en el seu interior, BOM és molt gran i bastant complex.

Bom.png

Objecte Window

L'objecte Window és compatible amb tots els navegadors. Representa la finestra del navegador. Tots els objectes globals de Javascript, funcions i variables es converteixen automàticament en membres de l'objecte Window. Les variables globals són propietats de l'objecte Window. Les funcions globals són mètodes de l'objecte Window. Fins i tot l'objecte document (de l'HTML DOM) és una propietat de l'objecte Window: 

window.document.getElementById("header");
// es igual a:
document.getElementById("header");

Ara veurem els mètodes i propietats d'aquest objecte:

La mida del navegador

Hi ha diverses maneres de determinar la mida de la finestra del navegador (viewport) que no inclou les barres de lliscament ni les barres d'eines. Segons sigui el teu navegador Chrome, Firefox, Opera o Safari

  • window.innerHeight = la altura de la finestra
  • window.innerinnerWidth = la amplada de la finestra

Si el navegador és Internet Explorer 5 o superior:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth
  • document.body.clientHeight;
  • document.body.clientWidth;

Per solucionar el problema podem fer : 

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Podeu veure tots els métodes en aquesta pàgina : w3schools window

Objecte Navigator

L'objecte navigator ens dona informació sobre el navegador utilitzat per l'usuari.

Per veuere els seu métodes i propietats vegeu aquesta pàgina: w3schools navigator

Objecte History

L'objecte History ens dona informació sobre les pàgines visitades.

Per veuere els seu métodes i propietats vegeu aquesta pàgina: w3schools history

Objecte Screen

L'objecte Screen ens dona informació sobre la pantalla del usuari. Per exemple, la propietat screen.availWidth ens dona l'altura sense incloure la barra de windows.

Per veuere els seu métodes i propietats vegeu aquesta pàgina: w3schools screen

Objecte Location

L'objecte Location ens dona informació sobre la URL actual de la pàgina.

Per veuere els seu métodes i propietats vegeu aquesta pàgina: w3schools location

Popup Window

Una finestra PopUp és un dels mètodes més antics de mostrar informació (html) a l'usuari. Normalment, només has d'escriure: 

window.open("http://www.infomerce.es");

Y s'obrirà una nova finetra amb la url corresponent. Molts navegadors el que obren és una nova pestanya en comptes d'una finestra separada. Moltes pàgines han abusat dels PopUps, per això, els navegadors intenten bloquejar-les i protegir l'usuari. Però, pot ser hi ha situacions on el seu ús està indicat, com per exemple a l'hora de comprar algun producte a una tenda on-line podem conversar via chat amb un dels depenents reals de la botiga per preguntar quelcom.

Perquè és beneficiós?

  • La finestra emergent és independent amb el seu propi entorn de Javascript. Així que el servei de xat no necessita integrar-se amb javascripts del lloc de la tenda.
  • La finestra emergent és molt simple agregar al lloc. És només un petit botó, sense javascripts addicionals per carregar-se.
  • L'element emergent pot persistir fins i tot si l'usuari deixa la pàgina. Per exemple, el depenent avisa a l'usuari que hi ha una oferta especial en una altre pàgina. L'usuari pot navegar amb l'altre finestra sense tancar el xat.

Sintaxy de window.open()

La sintaxi és: 

window.open(url, name, params)
  • url : La url que es vol mostrar
  • name: El nom de la finestra, pot ser usat com a target dels formularis.
  • params: Es pot definir molts paràmetres separats tots ell amb una coma.

Params:

  • left/top (numeric) : Coordenades top/left de la finestra
  • width/heith (numeric) : L'amplada i la llargada de la finestra
  • menubar(yes/no) : Mostra o oculta el menu del navegador
  • toolbar (yes/no) : mostra o oculta les opcions del navegador (pag. endavant, enrera, recàrrega,...)
  • location (yes/no) : mostra o oculta la url
  • status (yes/no) : mostra o oculta la barra d'estat del navegador
  • resizable (yes/no) : Permet o no canviar la mida de la finestra.
  • scrollbars (yes/no) : Mostra o no les barres de lliscament de la finestra.

Exemple: 

var p1 = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no'
var p2 = 'width=0,height=0,left=-1000,top=-1000'
window.open('/', 'test', p1+p2)

Com accedir a la finestra: Una vegada la finestra s'ha obert, podem canviar el seu contingut des de la finestra 'pare'. Ho podem fer amb el valor retornat per la funció window.open(). Exemple: 

var win = window.open('/', 'exemple', 'width=300,height=300');
win.focus();
win.onload = function() {
  var div = win.document.createElement('div');
  div.innerHTML = 'Hola a tots!';
  div.style.fontSize = '30px';
  win.document.body.insertBefore( div, win.document.body.firstChild );
}

També, des de la finestra oberta podem accedir al 'pare' utilitzant la propietat window.opener. Aquesta propietat la tenen tots els popUps. Les altres finestres contenen el valor null.

Politica de seguretat : "El mateix Origen"

La política de "mateix origen" limita l'accés d'una finestra a una altra. La raó darrere d'això és la seguretat. Si tens blabla.com en una finestra i gmail.com en un altre, llavors no voldries que un script des de blabla.com pugui accedir o modificar el teu correu electrònic o executar accions en gmail en nom teu.

L'essència de la política del mateix origen pot formular-se com: les finestres poden comunicar-se entre elles només si són del mateix protocol://domini: port o, en breument, del mateix origen.

Aquest exemples son del mateix origen: 

http://site.com
http://site.com/
http://site.com/my/page.html

Aquestes altres, en canvi, son s'origen diferent: 

http://www.site.com (another domain)
http://site.org (another domain)
https://site.com (another protocol)
http://site.com:8080 (another port)

Exercici 1

Escriu una pàgina que contingui un iframe de 100px i carrega la url: "http://google.com". Crea un script i obtè la url del iframe.


No podem llegir propietats d'altres origens però es pot escriure! Algunes de les propietats es poden modificar.

Exercici 2

Modifica l'exercici anterior per tal de que l'iframe intenti carregar google, però des de l'script modifica el location per carregar la wikipedia.


Missatges entre diferents finestres

La API per l'intercanvi de missatges entre diferents finestres és compatible amb tots els navegadors moderns, incloent IE8. Permet finestres / marcs de diversos dominis comunicar-se entre si. Per fer-ho s'utilitza el mètode postMessage.

El mètode window.postMessage permet la comunicació entre scripts amb seguretat. Normalment, els scripts de diferents pàgines se'ls permet comunicar si i només si les pàgines on son executats es troben en llocs amb el mateix protocol (http), el mateix port (80 és el valor predeterminat para HTTP), i domini (document.domain ha d'estar configurat a les dues pàgines amb el mateix valor). Window.postMessage proporciona un mecanisme controlat per eludir aquesta restricció d'una manera que és segura quan s'usa correctament.

Sintaxi : 


window.postMessage(data, targetDomain)
  • data : El missatge a enviar. La especificació diu que pot ser qualsevol tipus d'objecte, però a la pràctica la majoria de navegadors només implementen strings.
  • targetDomain : el domini de la pàgina a la qual va dirigit el missatge.

El receptor del missatge El receptor del missatge ha d'implementar un event per tal d'agafar la informació: 

<div id="test">Envia'm un missatge!</div>
<script>
function listener(event){
  if ( event.origin !== "http://javascript.info" )
    return   document.getElementById("test").innerHTML = "received: "+ event.data;
}
if (window.addEventListener){
  addEventListener("message", listener, false);    //Per altres Navegadors compatibles
} else {
  attachEvent("onmessage", listener);              //Per al navegador Microsoft Explorer
}
</script>
  • event.origin : contè la informació del domini REAL d'on prové el missatge. No hi ha manera de que un hacker ho reemplaci.

Altres propietats de event:

  • event.source : conté la referència a la finestra que t'envia el missatge. Pot contestar al missatge enviat de la següent manera : event.source.postMessage("missatge de resposta", event.origin);
  • event.data : El primer paràmetre de postMessage();

Nota: IE8 no deixa comunicar-se entre pestanyes. Només amb iframes.

L'atac Clickjacking

La idea general és simple.

  • Un visitant és atret a la pàgina del mal. No importa com. "Faci clic per obtenir 1000000 $" o el que sigui.
  • La pàgina del mal posa un link "fer-se ric ara" amb z-index = -1. com ho fa?
    • La pàgina inclou un iframe transparent a un domini que estigués visitant la víctima, exemple facebook.com i el posiciona damunt del botó m'agrada. Quan la victima faci un click en m'agrada, també estarà accedint al link del iframe.

Exemple: 

<style>
iframe { /* iframe from facebook.com */
  width:300px;
  height:100px;
  position:absolute;
  top:0; left:0;
  filter:alpha(opacity=50); /* in real life opacity=0 */
  opacity:0.5;
}
</style>
<div>Click en el enllaç per ser ric!:</div>
<iframe src="/files/tutorial/window/clicktarget.html"></iframe>
<a href="http://www.google.com" target="_blank" style="position:relative;left:20px;z-index:-1">CLICK ME!</a>
<div>Serás ric per tota la teva vida!</div>

Els events de teclats son molt més dificils de hackejar degut a que s'està escrivint sobre l'iframe. Llavors, l'usuari de la pàgina quan intenta entrar les dades no veu el que escriu e immediatament pot parar d'escriure o reiniciar el navegador.

Com podem prevenir l'atac?

Hi ha moltes maneres, però la més senzilla i efectiva és desactivar els iframes si la teva pàgina no els utilitza. com ho fem? 

<meta http-equiv="X-Frame-Options" content="deny">

Exercicis

Moure finestra

  • Crea una pàgina que tingui un botó que mogui la finestra 100 px cap a la dreta. Fes que la mida de la finestra es vagi fent cada vegada més petita s'arriva al costat dret de la pantalla.
  • Amplia l'exercici anterior per tal que es pugui fer el mateix cap a dalt, cap a baix i cap a l'esquerra.
solució Moure Finestra

Scrollbars & Info

  • A l'exercici anterior crea un botó per tal que es puguin amagar o mostrar les barres de desplaçament.
  • A més a més mostra tota la informació que puguis del navegador de l'usuari
  • Mostra el numero de pagines visitades.
  • Mostra la url actual, el port i el protocol.
solució scollbars

Intercanvi de missatges entre finestres

  • Crea una página en la que pregunti un text a l'usuari. Envia aquest text a una altre pestanya i escriu-la al html.
  • Modifica el programa anterior per tal que la finestra que reb el missatge comuniqui a la finestra que l'envia que l'ha rebut correctament.
solució envia missatge
solució envia i confirma missatge
Obtingut de «http://wikiserver.infomerce.es/index.php?title=NF3_-_Objectes_predefinits_del_llenguatge_Javascript&oldid=3102»