11 Web-Anwendungen
Werbung
Klaus-Peter Löhr!
11 Web-Anwendungen!
11.1 Mobiler Code !
!
11.2 JavaScript - Teil 1
!
11.3 Document Object Model
11.4 JavaScript - Teil 2
!
11.5 Un/sicherheit !
!
11.6 Applets etc.
!
!
11.7 AJAX !
!
!
11.8 Web-Anwendungen
!
Zusammenfassung
!
!
WS 13/14
ALP 5 - Web-Anwendungen
!3!
!8!
!13!
!26!
!29!
!37!
!67!
!74!
!78!
1
Web-Anwendung (Web application) = verteilte Anwendung
mit Anwendungslogik als Backend beim Web Server
und Benutzerschnittstelle als Frontend beim Browser
Zusätzlich wünschenswert:
§ klientenseitig ausführbarer Code,
§ samt HTML vom Server heruntergeladen;
§ Benutzerschnittstelle ohne Server-Kontakt veränderbar!
è mobiler Code
(Vorsicht vor Trojanischen Pferden !)
WS 13/14
ALP 5 - Web-Anwendungen
2
11.1 Mobiler Code!
Zwei Techniken für das Herunterladen von mobilem Code:
<html>!
.....!
<script> alert('note:..') </script>!eingebetteter Code
.....!
<script src="myscript.js"></script>!nachzuladender Code
<applet code="Animation.class" ... >..</applet>
*
<object ..... >.. "Animation.class" ..</object>!
.....!
</html>
* HTML 4.01
WS 13/14
ALP 5 - Web-Anwendungen
3
Es gibt verschiedene Skriptsprachen:
!
<html>!
<head>!
<META http-equiv="Content-Script-Type" content="text/vbscript">!
.....!
Gilt für gesamtes Dokument.
</head>!
Voreinstellung ist "text/javascript" !
!
<body>!
.....!
<script type="text/javascript">!
!.................. !
!( JavaScript Code )
</script>!
.....!
<script>!
!.................. !
!( VBScript Code )
</script>!
.....
WS 13/14
ALP 5 - Web-Anwendungen
4
! Ein HTML-Verweis (Hyperlink, A element, tag <a> )
kann sich auf Skript-Code beziehen:
!
<html>!
.....!
<br>!
Unsere Geschäftsbedingungen finden Sie!
<a href="http://www.abc.com/agb.html">hier.</a>!
<br><br>!
Unsere Coldline erreichen Sie!
<a href="mailto:[email protected]">hier.</a>!
Wenn Sie Ihren Namen eingeben wollen - !
<a href="javascript: var name = prompt('Name:','');!
!
!
!
if(name=='') ..... ">hier.</a>!
.....!
</html>
!
WS 13/14
ALP 5 - Web-Anwendungen
5
Skript-Code kann auf eine Vielzahl vom Benutzer ausgelöster
Ereignisse reagieren. Beispiel mit GUI-Element in Formular:
<html>!
<head>!
<script>!
! function check() { ..... } !
!
!
</script>!
</head>!
!
<body>!
.....!
<input type="button" name="checkButton" !
value="check input" onclick=" check() " >!
.....!
!!
Auch hier beliebiger Skript-Code!
WS 13/14
ALP 5 - Web-Anwendungen
6
Ø Einschlägige Sprachen für klientenseitig ausgeführten
eingebetteten Skript-Code in HTML:
§ JavaScript mit Varianten
• ECMAScript
• Jscript
(Microsoft)
• JScript.NET
(Microsoft)
§ VBScript
§ Tcl
§ Flash
Ø JavaScript wird von allen gängigen Browsern unterstützt!
Ø Flash ist attraktiv für Graphik/Animation
WS 13/14
ALP 5 - Web-Anwendungen
7
11.2 JavaScript - Teil 1!
JavaScript ist keine Java-Variante!
Ø Mehrparadigmensprache:
• objektbasiert mit Prototypen statt Klassen
• funktional (beeinflusst durch Scheme, Self, Smalltalk, ...)
Ø ausgeführt durch einen Interpretierer im Browser
Ø kann umgehen mit Elementen des Dokuments und des
umgebenden Browser-Fensters, ferner mit Ereignissen,
die durch den Benutzer ausgelöst werden
WS 13/14
ALP 5 - Web-Anwendungen
8
Meilensteine und Implementierungen:
– JavaScript (1995): Netscape/Sun
– ECMAScript: ECMA (European Computer Manufacturers
Association)
– JScript: Microsoft
– Seit Version 1.5: Orientierung an DOM (Document Object
Model): standardisierte Repräsentation des Dokumentinhalts
WS 13/14
ALP 5 - Web-Anwendungen
9
Ein erstes Beispiel:
!
<html><head> !
!
!
!!
<script> !
function action() {!
document.write("<br><font size=10 color='red'>"); !
document.write("<b>autsch!</b> </font> ")
}!
</script>
!
!!
</head>!
<body>!
<br>Dies ist !
<script> document.write("ein Test:<br><br>") !
</script>!
<input type="button" value="drück mich!" onclick=" action() ">!
<br><br>Nein,!
<a href="javascript: alert('aua!') ">mich!</a>!
</body>!
</html>
!
!
!
!
Hilfreich: Fehlermeldungen auf Fehlerkonsole des Browsers!
WS 13/14
ALP 5 - Web-Anwendungen
10
Wichtige Eigenschaften:
Ø keine statische Typisierung
Ø Mehrparadigmen-Sprache:
§ objektähnliche Elemente (keine Klassen)
§ „Vererbung“: Erweiterung eines Prototyps
§ funktionale Elemente
§ „Funktionen“ sind selbst Objekte
Ø DOM: HTML-Elemente als Objekte
WS 13/14
ALP 5 - Web-Anwendungen
11
Objekte haben
§ Eigenschaften (properties)
§ Methoden (methods)
und können ad-hoc (!) um solche erweitert werden.
Funktionen können als Konstruktoren eingesetzt werden (vgl. Beta):
function Complex(r,i) { this.re = r; this.im = i; }
var c = new Complex(3.14, 1.0);
aber hier auch einfach var c = { re: 3.14, im: 1.0 }
Kein Unterschied zwischen Feld, Verbund, Objekt (vgl. PHP):
!
!
!c.re == c["re"]!
WS 13/14
ALP 5 - Web-Anwendungen
12
11.3 Document Object Model (DOM)!
Ø JavaScript „sieht“ den HTML-Text als Baum von Objekten
und kann diesen Baum manipulieren!
Ø Knoten in diesem Baum sind HTML-Elemente,
HTML-Attribute und andere.
Ø Änderungen am Objektbaum schlagen sich sofort in
entsprechenden Änderungen der Ansicht nieder!
(Allerdings ist nicht alles erlaubt!)
WS 13/14
ALP 5 - Web-Anwendungen
13
Beispiel
(aus http://www.w3schools.com/htmldom/default.asp )
<html>!
<head>!
<title>My title</title></head>!
<body>!
<a href="other.html">My link</a>!
<h1>My header</h1></body></html>!
WS 13/14
ALP 5 - Web-Anwendungen
Hier 4 Knotentypen:
• Document
• Element
• Attribute
• Text
14
„Typen“ von Knoten im Objektbaum:
Node - Obertyp aller Knoten
Document - Wurzel des Baums: document
Element - HTML-Element
Attr - Attribut eines HTML-Elements
Weitere allgemeine „Typen“:
NodeList - Liste der Kindknoten eines Knotens
NamedNodeMap - die Attribute eines HTML-Elements
Ferner „Typen“ für etliche spezielle HTML-Elemente.
WS 13/14
ALP 5 - Web-Anwendungen
15
Events als Attribute name=value von HTML-Elementen:
name = Event-Name
value = JavaScript-Code, der beim Eintreffen des
Ereignisses ausgeführt wird. this ist das
dem Element entsprechende DOM-Objekt!
Typische Events:
!onclick!
!onmousedown
!onmouseover
!onsubmit!
!.....!
onmouseup!
onmouseout!
!
Jedes Element hat seine eigenen - jeweils sinnvollen - Events.
WS 13/14
ALP 5 - Web-Anwendungen
16
Beispiel mit einfachem Textelement:
<html><body>!
<p id="test" !
onclick=" firstChild.nodeValue = 'pong' ">!
ping!
<br>!
pong!
</p>!
</body></html>!
Beim Klicken irgendwo im Absatz test
wird ping durch pong ersetzt.
WS 13/14
ALP 5 - Web-Anwendungen
17
Lokale Überprüfung von Formulareingaben
Zur Erinnerung: gothic (10.3.3, 10.3.4 )
Zur Entscheidung über eine mögliche Mitgliedschaft im
Gothic Club bedarf es gar keiner Rückfrage beim Server!
Sie kann klientenseitig mit JavaScript vorgenommen werden:
1. Eingabe syntaktisch korrekt?
2. Entscheidung über eligible.
Achtung:
WS 13/14
Trotzdem ist es ratsam, wichtige Prüfungen
immer auch beim Server vorzunehmen;
denn der Klient kann ja den Browser umgehen.
ALP 5 - Web-Anwendungen
18
<FORM action="http://localhost/alp5/php/gothic.php" method="GET">!
!First name: !<INPUT type="text" name="firstname" size=10>
!
!Last name: !<INPUT type="text" name="lastname"><br>!
!Age: !<INPUT type="text" name="age" size=2><br>
!
!email:!<INPUT type="text" name="email"><br>!
!Sex: !<INPUT type="radio" name="sex" value="Male"> male!
!
!<INPUT type="radio" name="sex" value="Female"> female!
!<BR><BR>!
!<INPUT type="submit"> <INPUT type="reset">
!
WS 13/14
!
</FORM>
!
!
! ALP 5!- Web-Anwendungen
!
!
ersetzen19durch:
<FORM onSubmit=" !
partielle Eingabeüberprüfung
var years = parseInt(age.value);!
var error = isNaN(years) || years<=0 || years>150;!
if (error) errorAlert(age.value)!
else check(years,elements[4].checked,firstname.value);!
return false " >
!
!!
!First name: !<INPUT type="text" name="firstname" size=10>
!
!Last name: !<INPUT type="text" name="lastname"><br>!
!Age: !<INPUT type="text" name="age" size=3><br>
!
!email:!<INPUT type="text" name="email"><br>!
!Sex: !<INPUT type="radio" name="sex" value="Male"> male!
!
!<INPUT type="radio" name="sex" value="Female"> female!
!<BR><BR>!
!<INPUT type="submit"> <INPUT type="reset">
!
</FORM> !
!
!
!
!
!
!!
WS 13/14
ALP 5 - Web-Anwendungen
20
Ø !Das INPUT-Element mit Attribut name="age" wird im DOM!
durch das Kind age des Formularobjekts repräsentiert
und der Wert von dessen value-Attribut durch age.value
(entsprechend für firstname ).
Ø !elements[4] repräsentiert den Schalter Male. Das Attribut
checked prüft, ob er eingeschaltet ist.
Ø onSubmit: Der hier angegebene JavaScript-Code bildet den
Rumpf einer anonymen Boole‘schen Methode des Formularobjekts.
Er wird aktiviert, wenn der submit-Knopf gedrückt wird.
Ø Der gelieferte Wert entscheidet, ob das submit tatsächlich
ausgeführt wird oder nicht.
WS 13/14
ALP 5 - Web-Anwendungen
21
<SCRIPT> !
function errorAlert(age) {!
document.bgColor = "red";
!
alert("incorrect age " + val);!
document.bgColor = "white"; } !
</SCRIPT>!
<SCRIPT>!
function check(age, male, name) {!
var eligible = male? age>70 : age>75;!
document.open();!
if(eligible)!
document.write('<h2>Ok!</h2>')!
else document.write(!
'<h2>Sorry, ' + name.split(' ')[0] +!
', you are not eligible.</h2>');!
document.close()
} </SCRIPT>!
(Dies z.B. im HEAD-Element unterbringen.)
WS 13/14
ALP 5 - Web-Anwendungen
22
JavaScript Code statt Hyperlink
Script-Aktivierung auch durch Klicken auf Verweis-Element a :
!
<a href="javascript: . . . (JavaScript code) . . . ">
. . . HTML: Text, Bilder, . . .
</a>!
Beim Anklicken wird der Code ausgeführt.
Aber Achtung: Wenn der letzte berechnete Wert
(Ausdruck oder Anweisung) nicht undefined ist,
ersetzt er - als HTML interpretiert - das aktuelle
Dokument.
WS 13/14
ALP 5 - Web-Anwendungen
23
Beispiel Bild ersetzen:
!
<html><head><title>Test DOM</title></head>!
<body><br><br>!
<p align="center">!
<a href="javascript: image.src = 'tree.gif'; undefined ">!
!<img !id="image" src="tuer.jpg" !
!
!width="300" height="300"></a>!
!<br>!
tuer.html
!Open door!!
</p>!
</body></html>
(Ohne undefined wird der ganze Fensterinhalt
durch den Text „tree.gif“ ersetzt.)
WS 13/14
ALP 5 - Web-Anwendungen
24
Beispiel DOM-Baum verändern: Textknoten entfernen
!
<html><head><title>TestX DOM</title></head>!
<body><br><br>!
<script> function swap() { !
image.src = 'tree.gif';!
p.removeChild(p.childNodes[4]) }!
</script><br><br>!
<p id="p" align="center">!
<a href="javascript: swap() ">!
<img id="image" src="tuer.jpg" !
width="300" height="300"></a>!
<br>!
Open door!!
</p>!
tuerX.html
</body></html>!
WS 13/14
ALP 5 - Web-Anwendungen
25
11.4 JavaScript - Teil 2!
Drei JavaScript-Prinzipien:
Verwendung: lokale Reaktion auf Ereignisse, die
durch Benutzer-Interaktion ausgelöst werden.
Bevorzugter Stil: weitgehende Trennung von HTML
und JavaScript: Code in functions konzentrieren und
z.B. im Dokumentkopf unterbringen - vorzugsweise
in getrennten <SCRIPT>-Elementen.
WS 13/14
Nachgeladener Code und Trennung von HTML, CSS, JS
ALP 5 - Web-Anwendungen
26
Nachgeladener Code
Vollkommene Trennung der functions vom Dokument:
<html><head><title>Test DOM</title></head>!
<body>!
<script src="treescript.js"></script>!
<br><br>!
<p id="p" align="center">!
<a href="javascript: swap() ">!
<img id="image" src="tuer.jpg"!
width="300" height="300"> </a>!
<br>!
!Open door!!
</p>!
function swap() { !
</body></html>!
image.src = 'tree.gif';!
p.removeChild(p.childNodes[4]) }!
WS 13/14
ALP 5 - Web-Anwendungen
27
Trennung von HTML, CSS, JS :
Inhalt
(contents)
Verhalten
(behaviour)
Darstellung
(presentation)
HTML
JavaScript
CSS
!index.html !
!myJS.js
<head>!
<script src="myJS.js">!
<link
rel="stylesheet"!
! type="text/css"!
! href="myCSS.css">!
. . . . . (Inhalt!) . . . . .
WS 13/14
ALP 5 - Web-Anwendungen
!
!myCSS.css!
28
11.5 Un/sicherheit!
Mobiler Code kann immer auch Trojanischer Code sein!
Beschränkung der Zugriffsmöglichkeiten von JavaScript Code:
Ø Code läuft in eingeschränkter Umgebung (sandbox):
Zugriff nur auf Browser- und DOM-Objekte
Ø Weitere Einschränkung (same-origin policy):
Zugriff nur auf solche Ressourcen, die zum gleichen
Ursprungsort (protocol, host, port) wie der Code gehören
WS 13/14
ALP 5 - Web-Anwendungen
29
Weiterreichende Rechtevergabe
jenseits der genannten Einschränkungen ähnlich wie beim
Sicherheitssystem von Java (8.5), aber wenig genutzt:
Ø Signierter Code
Ø Preferences für Rechtevergabe
http://www.mozilla.org/projects/security/components/jssec.html
Dennoch:
WS 13/14
Schwachstellen im Web - insbesondere ausnutzbar
durch Skript-Code - sind nach wie vor die beliebtesten
Einfallstore bei Angriffen auf Informatik-Systeme.
ALP 5 - Web-Anwendungen
30
Kleine Fallstudie
Beim Formular des Gothic Club soll Anna ihren Namen eingeben.
Was passiert, wenn sie „aus Versehen“ folgendes eingibt?
!<script>alert("bang!")</script>
Wenn Anna zu jung für den Club ist, erhält sie dann die
Antwort „Sorry, <script>alert("bang!")</script>, ..... “ ?
Nein, wenn die Eingabe-Überprüfung diese Eingabe ablehnt.
„Ja, wenn dieser Text nicht überprüft wird. “ ??
Nein, doch nicht, weil document.write HTML-Text als
solchen interpretiert, d.h. das Skript erkennt und alert
ausführt: die alert-Meldung „bang!“ erscheint.
WS 13/14
ALP 5 - Web-Anwendungen
31
Ursache der Malaise:
Daten und Code werden nicht unterschieden!
Allerdings schadet Anna nur sich selbst.
Es liegt also noch keine Sicherheitsverletzung vor.
Aber:
Kann Anna durch „ähnlich verrückte“ Eingaben beim
Server oder anderen Klienten Schaden anrichten?
WS 13/14
ALP 5 - Web-Anwendungen
32
Cross-Site Scripting (XSS) :
Angreiferin Anna kann eine Seite mit Schwachstellen von Sven
dazu benutzen, einem Dritten Carsten, der diese Seite besucht,
bösartigen Skriptcode unterzuschieben.
Die Mehrzahl aller Sicherheitsverletzungen im Netz ist auf
XSS (oder ähnliche code-injection-Techniken) zurückzuführen.
Ältere Server- und Browser-Software ist wesentlich anfälliger
für XSS als neuere Versionen.
WS 13/14
ALP 5 - Web-Anwendungen
33
Svens schwache Webseite http://cool.tools.com/sven.php :
<html><head><title>Welcome!</title></head><body><br> !
Hello!
<?
!$name = $_GET['name'];! PHP code !
!if($name!='') { !
!
!echo "<script>document.write('$name');";!
!
!echo "</script>!"; }
?>!
<br><br>You can choose from:<br>....<br>....</body></html>!
WS 13/14
ALP 5 - Web-Anwendungen
34
Angreiferin Anna lockt Carsten auf ihre Webseite anna.html:
!
<html><title>Welcome!</title><br>!
anna.html
Hello friend!<br> <br>!
Get cool tool from!
<a href="sven.php?name=');alert('Sorry, expired Dec. 2010!"> !
Sven! !
document.write('');alert('Sorry, expired Dec. 2010!')
</a>!
</html>
Ärgerlich für Carsten und geschäftsschädigend
für Sven! („Geschieht ihm recht!“)
Wenn ein Web Server Daten entgegennimmt,
die später eventuell wieder ausgeliefert werden,
sollten diese Daten „codefrei“ gemacht werden
(„sanitizing“, z.B. durch escaping mit \ )
WS 13/14
ALP 5 - Web-Anwendungen
35
Vermischtes:
Ø JavaScript-Code wird häufig von Entwicklungsumgebungen
automatisch erzeugt.
Ø JavaScript kann als Web-unabhänge Skriptsprache verwendet
werden. Beliebte Interpretierer sind Rhino und SpiderMonkey
Ø Server-Side JavaScript (SSJS):
<server> write("<br>hello"); ..... </server>
Ø Java-Programm kann JavaScript-Code ausführen:
package javax.script, class ScriptEngine, eval(...), !
Ø JavaScript-Code kann Java-Objekte erzeugen, benutzen:
„LiveConnect“
WS 13/14
ALP 5 - Web-Anwendungen
36
11.6 Applets etc.!
Ø Applets sind (kleinere) Java-Programme, die in einem
Java-fähigen Web Browser gestartet werden können.
Ø Ein HTML-Element <object> oder <applet> in
einem Dokument enthält den Namen einer Datei,
aus der das Applet nachgeladen werden kann, z.B.
! <applet code="xyz.class" ... (HTML 4.01)!
Ø Applets waren einmal ein großer Hype, sind jetzt wegen
leistungsfähiger JavaScript-Implementierungen weniger
populär - aber immer noch für viele Zwecke geeignet.
WS 13/14
ALP 5 - Web-Anwendungen
37
Dokument-Struktur mit Applets (HTML 5):
<!DOCTYPE html>!
<html><head> ..... </head>!
<body>!
.....!
<object ..... >!
!<param ... >!
!<param ... >
belegt einen Bereich im Browser-Fenster !
!.....!
</object>!
.......!
<object ..... >!
! .....
!
belegt einen Bereich im Browser-Fenster
</object>
weiter unten!
.......!
</body></html>!
WS 13/14
ALP 5 - Web-Anwendungen
38
Ein Applet ist eine Unterklasse von java.applet.Applet
oder javax.swing.JApplet.
Nach dem Laden eines Applet erzeugt der Browser ein
entsprechendes Objekt und „steuert“ es über bestimmte
Methoden, die in Applet vordefiniert sind:
void init()
!Initialisierung, Übernahme von Parametern
aus <param> (ähnlich Konstruktor).
[vordefiniert als Leeroperation]
void destroy()!Finalisierung, Freigabe von Ressourcen.
[vordefiniert als Leeroperation]
Beachte: Die Lebensdauer eines Applet ist i.d.R. länger als die
des einbettenden Dokuments. Der Browser entscheidet,
wann er es löscht (mit vorangehender Finalisierung).
WS 13/14
ALP 5 - Web-Anwendungen
39
public void start()
§ wird vom Browser nach init aufgerufen
§ und immer dann, wenn der Benutzer zur Seite zurückkehrt,
die das Applet enthält
§ wird insbesondere für das Starten von Animation eingesetzt
public void stop()
§ wird vom Browser vor destroy aufgerufen
§ und immer dann, wenn der Benutzer die Seite verlässt,
die das Applet enthält
§ wird insbesondere für das Stoppen von Animation eingesetzt
WS 13/14
ALP 5 - Web-Anwendungen
40
public void paint(Graphics g)
§ stammt aus der Oberklasse java.awt.Container
§ wird zur Darstellung von Graphik verwendet
§ das Graphics-Objekt stellt der Browser zur Verfügung
§ wird nach jedem start aufgerufen
§ ... und immer dann, wenn durch manuelle Änderungen am
Fenster (Größenveränderung, Ikonisierung) der Inhalt
neu angezeigt werden muss
§ ... und immer dann, wenn das Applet repaint() aufruft
Diverse weitere Methoden, u.a. vom Applet aufzurufende
- für Parameterübernahme, Kontextinformation etc.
WS 13/14
ALP 5 - Web-Anwendungen
41
Ø Die Klasse Applet ist eine mittelbare Unterklasse der
Klasse Component - und damit ein GUI-Fenster !
Ø Somit stehen alle Methoden der Klasse Component zur
Bearbeitung von Ereignissen zur Verfügung !
!
Ø Beispiele für Ereignisklassen: KeyEvent, MouseEvent, ...
(Unterklassen von AWTEvent)
WS 13/14
ALP 5 - Web-Anwendungen
42
import
import
import
public
!
!
public
!
!
}
!
!
!
!
!
!
!
//
java.awt.*; // simple GUI applet!
java.awt.event.*;
!!
java.applet.*;
!
class Interaction extends Applet { !
private TextField text = new TextField(); !
private Button button = new Button("show"); !
void init() {
!
this.setLayout(new GridLayout(2,1));!
this.add(text); this.add(button);!
text.setForeground(Color.red);!
text.setBackground(Color.yellow);!
Rectangle r = this.getBounds();// from <object..>!!
this.setFont(new Font(!
"Helvetica", Font.PLAIN, r.height/5));!
ActionListener action = new ActionListener() { !
!public void actionPerformed(ActionEvent e) { !
!
! showStatus(text.getText()); } };
!
button.addActionListener(action); } // end init!
end class!
WS 13/14
ALP 5 - Web-Anwendungen
43
... und das einbettende Dokument interact.html:
!
<html><title>Applet interaction</title>!
<br>!
<h2>Here comes an Applet</h2>!
<font size="5">Please enter text and press "copy". <br>!
Text will be copied into status line. <br>!
</font><br>!
<object type="application/x-java-applet" height="100" width="200“>!
<param name="code" value="Interaction" />!
Applet failed to run. No Java plug-in was found.!
</object>!
</body></html> !
!
!
!Beachte: Test auch mit $ appletviewer interact.html
oder Java-main mit init()- und start()-Aufrufen.
WS 13/14
ALP 5 - Web-Anwendungen
44
Beliebt ist die Implementierung von Animationen mit Applets:
Ø !public class MyMovie extends Applet !
!
!
!
implements Runnable!
Ø !public void run() { ..... } bereitstellen
Ø Thread erzeugen mit new Thread(this)!
Ø Es empfiehlt sich, start/stop geeignet zu implementieren.
WS 13/14
ALP 5 - Web-Anwendungen
45
Beispiele:
einfach:
https://eyeasme.com/Shayne/HTML5_APPLETS/index.html
graphisch:
http://docs.oracle.com/javase/tutorial/deployment/applet/examples/
dist/applet_ComponentArch_DynamicTreeDemo/AppletPage.html
dynamisch:
http://cs.gmu.edu/cne/workbenches/ricart/ricart.html
sehr dynamisch:
http://docs.oracle.com/javase/tutorial/deployment/deploymentInDepth/
examples/dist/depltoolkit_Java2Demo/DeployUsingNameValuePairs.html
WS 13/14
ALP 5 - Web-Anwendungen
46
11.6.1 Un/sicherheit!
Welchen Schaden können Trojanische Applets anrichten?
Applet kann auf Ressourcen der Umgebung nur sehr beschränkt
zugreifen, sofern es nicht signiert ist und weiterreichende
Rechte erhält. Ein Applet
Ø kann nur an das System, von dem es geladen wurde,
HTTP-Anfragen schicken (same-origin policy, vgl. S. 29)
Ø kann nur wenige system properties lesen
Ø (und einige weitere harmlose Dinge).
WS 13/14
ALP 5 - Web-Anwendungen
47
Beispiel: Gewinnen Sie hier eine Reise nach Hawaii
<applet codebase="http://page.mi.fu-berlin.de/lohr/classes/"!
code="Write.class" width="1000" height="100">!
<param name="file" value="/Users/lohr/tmp/text" >!
</applet>!
public void init() { file = getParameter("file"); }!
public void paint(Graphics g) { out = new PrintWriter(file); ... }!
(bösartiges Applet versucht, in Datei zu schreiben. Effekt:)
java.security.AccessControlException: access denied !
(java.io.FilePermission /Users/lohr/tmp/text write)!
Aber: signierte Applets können weiterreichende Zugriffsrechte haben.
(Vorsicht mit appletviewer: .java.policy entscheidet!)
WS 13/14
ALP 5 - Web-Anwendungen
48
WS 13/14
ALP 5 - Web-Anwendungen
49
Meldung beim Laden eines signierten Applets:
Erläuterungen, Zertifikat
WS 13/14
ALP 5 - Web-Anwendungen
Vertrauen??
50
11.6.2 Java Network Launch Protocol (JNLP)!
ist Web-basierte Technologie für das Herunterladen von
§ Applets und
§ freistehenden Java-Anwendungen mit Java Web Start
von einem Web Server:
Ø ermöglicht flexible Steuerung der Zugriffsrechte;
Ø erlaubt Java-Code entweder als Applet oder als
freistehende Anwendung laufen zu lassen.
Ø Sun/Oracle: „Rich Internet Application“ (RIA)
(siehe aber 11.8.2, S. 76)
WS 13/14
ALP 5 - Web-Anwendungen
51
<object type="application/x-java-applet" height="300" width="300"> !
<param name="code"
value="MyApplet" /> !
<param name="archive" value="MyApplet.jar" />!
</object>!
!
wird ersetzt durch
!
<script src="https://www.java.com/js/deployJava.js"></script> !
<script> !
var attributes = { code:'MyApplet', width:300, height:300,!
archive: 'MyApplet.jar' };!
var parameters = { jnlp_href: 'myApplet.jnlp'}; !
deployJava.runApplet(attributes, parameters, '1.7'); !
</script>!
XML-Text beschreibt – Applet
- Java-Version
- permissions
- .....
WS 13/14
ALP 5 - Web-Anwendungen
52
Java Web Start
ü ist Bestandteil der Java-Plattform und wird zum Interpretieren
von .jnlp–Ressourcen eingesetzt:
ü www.xyz.com/cool.jnlp herunterladen und speichern.
ü cool.jnlp durch Doppelklick öffnen.!
ü è Java Web Start veranlasst Beschaffung der aktuellen Version
des Programms über dessen Web Server.
WS 13/14
ALP 5 - Web-Anwendungen
53
11.6.3 LiveConnect!
LiveConnect: Applets mit JavaScript und DOM
JavaScript kann auf public-Elemente von Applets
zugreifen.
<applet mayscript ...> kann JavaScript Code
ausführen, die JavaScript-Funktionen im Dokument
aufrufen und auf die DOM-Objekte zugreifen.
WS 13/14
ALP 5 - Web-Anwendungen
54
JavaScript kann auf public-Elemente von Applets zugreifen !
!
<html><head><title>Javascript to Applet</title></head>!
<body>
!!
<applet id="applet" code ="Interaction" !
!
width="200" height="100" >!
</applet> !
<script> document.applet.write("hallo") </script>!
</body></html>!
!
public class Interaction extends Applet { !
!
private TextField text = new TextField(); !
!
private Button button = new Button("show"); !
!public void init() { ........(S. 43)........... }
!
!public void write(String s) { text.setText(s); }!
!} !
WS 13/14
ALP 5 - Web-Anwendungen
55
Beispiel Stoppen und Neustarten einer Animation:
<html><head><title>Stoppable drop</title></head>!
<body>!
<applet id="applet" code ="Drop.class" !
!
width="300" height="300" >!
</applet> !
<input type="button" value="Start" !
!onClick="applet.start()">!
<input type="button" value="Stop" !
!onClick="applet.stop()">!
</body>!
</html>!
WS 13/14
ALP 5 - Web-Anwendungen
56
Wen es interessiert:
import java.applet.*;
!
import java.awt.*;
!
public class Drop extends Applet implements Runnable { !
private volatile boolean stop; !
public void start() { stop = false; new Thread(this).start(); } !
public void stop() { stop = true; }!
public void run() {
!
!Graphics g = this.getGraphics(); !
!Rectangle re = this.getBounds();
!// Applet-Bereich
!
!int r=0,
!
!// aktueller Radius
!
!
d,
!
!
!// aktueller Durchmesser
!
width=re.width/2, !
!
!// halbe Applet-Breite
!
height=re.height/2;
!
!// halbe Applet-Höhe!
!while(true) { !
!
if(stop) return;!
!
if(r>Math.max(width,height)) r = 0; !
!
d = 2*r;
!
!
g.clearRect(0,0,re.width,re.height); !// Kreis löschen!
!
g.drawOval(width-r,height-r,d,d);
!// neuer Kreis!
!
g.drawOval(width-(r-1),height-(r-1),d-2,d-2); !
!
r++;
!
!
!// 2 Kreise für "Linienbreite 2"!
!
try { Thread.sleep(50); } !
!
catch (InterruptedException e) { }
} // end loop !
!} // end run() !
13/14
ALP 5 - Web-Anwendungen
57
} //WS
end
class Drop!
!
!
<applet mayscript ...> kann JavaScript Code
ausführen, die JavaScript-Funktionen im Dokument
aufrufen und auf die DOM-Objekte zugreifen ! Diese
haben den Typ netscape.javascript.JSObject.
($ javac -cp .:$JAVAHOME/lib/plugin.jar ... !)
.....!
window
= JSObject.getWindow(this);
!
document = (JSObject)window.getMember("document");!
.....!
window.eval(" ..... JavaScript code ..... ");!
window.call(". JavaScript function name .", argArray);!
.....!
JSObject node = (JSObject)!
document.call(".. document method name ..", argArray);!
.....!
!
!(Alternative: Common DOM API - siehe Quellen)
WS 13/14
ALP 5 - Web-Anwendungen
58
11.6.4 <object> für andere Medientypen!
Viele andere MIME Types (Format type/subtype) neben
application/java-vm sind möglich, etwa
!
!
!
!audio/midi !(veraltet)
!application/x-shockwave-flash!
!image/vnd.adobe.photoshop!
!text/plain !
!und viele andere!
!
Typisches Beispiel:!
!
<object data="http://ingeb.org/Lieder/freudesc.mid" !
! type="audio/midi"!
! width="100" height="50" !
.....!
</object>!
WS 13/14
ALP 5 - Web-Anwendungen
59
<html><body><br> !
!Beispiel mit 3 Objekten !
<h4>An die Freude</h4>!
<object data="schiller.txt" !
!
type="text/plain" !
!
width="300" height="100" border="1">!
</object>!
<object data="http://ingeb.org/Lieder/freudesc.mid" !
!
type="audio/midi"!
!
width="100" height="50" >!
</object><br>
!
!
<object data="http://www.youtube.com/v/NKusg6Jyc9Y&rel=1" !
!
type="application/x-shockwave-flash" !
!
width="700" height="520">!
</object>!
</body></html>!
!
!
!type ist entbehrlich, wenn die Dateierweiterung
hinreichend Aufschluss gibt (so hier).
WS 13/14
ALP 5 - Web-Anwendungen
60
Microsoft ActiveX Controls
§
§
§
§
§
können ähnlich wie Applets eingesetzt werden:
ursprünglich nur Maschinencode für Intel,
mit .NET auch für die virtuelle CLR-Maschine,
heruntergeladen vom MS Internet Information Server,
durch den MS Internet Explorer.
Beispiel Media Player:!
<object codebase=" (URL - hier entbehrlich, weil Media Player lokales Plugin) "!
! classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"!
! width="200" height="45" >!
! <param name="filename" !
!
! value="http://ingeb.org/Lieder/freudesc.mid"> !
</object>!
WS 13/14
ALP 5 - Web-Anwendungen
61
11.6.5 Resümee und Reflexion!
über „Web-Anwendung“ mit mobilem Code (vgl. 10, S. 42):
Ø verteilte Anwendung mit Benutzerschnittstelle, für die
ein Browser als Plattform fungiert (URL-Eingabe, HTML,
Java, JavaScript, ...,
Ø identifiziert durch URL.
Ø Benutzerschnittstelle wird in den Browser geladen und
wird teils lokal, teils durch neue HTTP-Anfragen verändert.
Ø Anwendungslogik wird teils lokal, teils beim Web Server
realisiert, der als Plattform für die Anwendung fungiert.
Ø Dürftige Interaktionsmöglichkeiten zwischen Frontend
und Backend: nur HTTP-Anfragen, oft mit Warten auf
vollständig neues Dokument.
WS 13/14
ALP 5 - Web-Anwendungen
62
Zum Vergleich: Fernaufrufe (z.B. Java RMI)
Ø verteilte Anwendung mit Benutzerschnittstelle benötigt
keine aufwendigen Plattformen (außer JVM),
Ø identifiziert durch host, port, app (RMI registry).
Ø Benutzerschnittstelle mit awt/Swing anstatt mit
HTML/DOM/JavaScript
Ø Beliebige Interaktion in beiden Richtungen zwischen
Frontend und Backend, einschließlich Objektübertragung
Ø Eine Sprache (oder mehrere: CORBA).
WS 13/14
ALP 5 - Web-Anwendungen
63
„Browser“ und „Server“ für RMI statt HTTP ?
Ø Browser: Entgegennahme einer „URL“, Fernaufruf an Server.
Ø Server: Starten der gewünschten Anwendung,
Auslieferung der Benutzerschnittstelle an den Browser !
Ø Hyperlinks: objektgebunden; beliebig in Text eingestreut
nicht möglich.
Ø Sicherheit: mit Richtlinien steuerbar, daher aber riskant.
Ø Konzeptionelles Manko (kein prinzipielles!): aktuelles RMI
setzt bereits konventionellen Web Server voraus!
WS 13/14
ALP 5 - Web-Anwendungen
64
Beispielsweise mit einfacher Anwendung „Akkumulator“:
$ java ServerImpl &!
[1] 24703!
$ Server ready on 56789!
$ java Browser!
enter URL: localhost 56789 acc!
!
!
Akkumulator sitzt im Backend!
enter URL: localhost 56789 acc!
enter URL: !
!
Achtung – URL identifiziert Objekt,
nicht Klasse !
WS 13/14
ALP 5 - Web-Anwendungen
65
// THIS IS THE "RMI BROWSER“!
import java.rmi.Naming;!
import java.awt.*;!
public class Browser{!
public static void main(String[] arg) throws Exception {!
for(;;) { !
System.out.print("enter URL: ");!
String input = System.console().readLine();!
if(input==null) System.exit(0);!
String url[] = input.split(" ");!
if(url.length!=3) {!
System.out.println("URL format: host port app"); continue; }!
String host = url[0];!
String port = url[1];!
String app = url[2];!
Server server = null;!
String rmiurl = "rmi://" + host + ":" + port + "/" + app;!
try { server = (Server)Naming.lookup(rmiurl); }!
catch(Exception e) { System.out.println("failure"); continue; }!
Frame front = server.get(); // GUI from remote backend!
front.setVisible(true);
// show GUI!
} // end for!
} // end main!
}!
!
WS 13/14
ALP 5 - Web-Anwendungen
66
11.7 AJAX!
(„Asynchronous JavaScript and XML“)
Im letzten Resümee:
Ø „Dürftige Interaktionsmöglichkeiten zwischen Frontend
und Backend: nur HTTP-Anfragen, oft mit Warten auf
vollständig neues Dokument.“
Stimmt nicht ganz:
JavaScript Code kann explizit eine HTTP-Anfrage starten,
deren Antwort das aktuelle Dokument nicht ersetzt –
aber für dessen Modifikation beliebig benutzt werden kann
(allerdings mit same-origin policy!).
WS 13/14
ALP 5 - Web-Anwendungen
67
AJAX :
Ø Anfrage vorbereiten: XMLHTTP-Objekt erzeugen
(Konstruktorfunktion hängt von der Umgebung ab)
if(window.ActiveXObject)
// Internet Explorer
request = new ActiveXObject("Microsoft.XMLHTTP");!
!else if(window.XMLHttpRequest)// Firefox, Safari, ...
request = new XMLHttpRequest();!
Ø Eine Listener-Funktion f definieren, die festlegt, was beim
Eintreffen der Antwort zu tun ist, und damit:
request.onreadystatechange = f!
WS 13/14
ALP 5 - Web-Anwendungen
68
Asynchrone Anfrage starten:
request.open('GET', !
'http://www.xyz/some.file', true);
!
!
!
!
!
!
!!
request.send(null);
!
!
!
(asynchron)!
(auch query string statt null bei Verwendung von POST)
!
Reaktion auf die Antwort:
request.readyState von 0 bis 4 !
Bei jeder Zustandsänderung wird die Funktion f aufgerufen;
sie muss den aktuellen Zustand prüfen:
if(request.readyState == 4) {!
!
. . . . . }// response received!
else { . . . . . }// still not ready!
WS 13/14
ALP 5 - Web-Anwendungen
0
1
2
3
4
(uninitialized)
(loading)
(loaded)
(interactive)
(complete)
69
var request;!
function makeRequest(url) { ! !
!
request = new XMLHttpRequest();!
!
request.onreadystatechange = updateDocument;!
request.open("GET", url, true);!
request.send(null);!
}
!!
function updateDocument() {!
if(request.readyState != 4) return;!
if(request.status == 200) {!
var div = document.createElement("div");!
div.innerHTML = request.responseText;!
var span = document.getElementById("span");!
span.appendChild(div); }!
else alert("failure - illegal request");!
}!
WS 13/14
ALP 5 - Web-Anwendungen
70
<span id="span"!
ajax.html
!style="cursor: pointer; !
font-size: 20;!
background-color: aqua"!
!onclick=" makeRequest('pingpong.html') " >!
Make a request!!
</span>
<p
id="pingpong" !
onclick=" firstChild.nodeValue = 'pong' ">!
ping <br> pong!
</p>
WS 13/14
ALP 5 - Web-Anwendungen
71
Ein „universelles“ getResponse für verschiedene Formate:
!
function getResponse(request) {!
switch(request.getResponseHeader("Content-Type")) {!
case "text/plain":!
case "text/html":!return request.responseText;!
case "text/xml": !return request.responseXML; // liefert DOM!
case "application/json": !
return jsonParse(request.responseText);!
// http://code.google.com/p/json-sans-eval/
case "application/javascript":!
!
!
!return eval(request.responseText);!
// potentiell unsicher (Daten als Code)!
default:
!
!return request.responseText; }!
}!
WS 13/14
ALP 5 - Web-Anwendungen
72
Beispiel mit XML:
.....!
function updateDocument() {!
if(request.readyState != 4) return;!
if(request.status == 200) {!
var xmldoc = request.responseXML;!
var root = xmldoc.getElementsByTagName('root').item(0);!
alert(root.firstChild.data); }!
else alert("failure - illegal request");!
}!
<span style="cursor:pointer; font-size:30; background-color:aqua"
onclick="makeRequest('xmltest.xml')" >!
Make a request!!
</span>!
</body></html>!
<?xml version="1.0" ?>!
<root>!
!Test successful.!
</root>!
WS 13/14
ALP 5 - Web-Anwendungen
73
11.8 Web-Anwendungen!
- gängige Terminologie -
Web-Anwendung (Web application): benutzt einen Web Browser
Ø ohne Interaktion mit Web Server: kann wahlweise über Server
oder aus lokaler HTML/Javascript-Datei gestartet werden;
Ø wenig Interaktion mit Web Server: „Rich Internet Application“;
typischerweise aufwendige Multimedia-Anwendungen;
Ø viel Interaktion mit Web Server: AJAX ist hilfreich;
typische Anwendungen: Internet-Handel, Cloud Computing.
WS 13/14
ALP 5 - Web-Anwendungen
74
11.8.1 „Web-Anwendungen“ ohne Server!
Vier Alternativen für einfache Desktop-Anwendungen:
awt/Swing/... programmieren für JVM
awt/Swing/... mit GUI Builder für JVM
w HTML/JavaScript/DOM für Browser
ç
x HTML/JavaScript/DOM mit GUI Builder
WS 13/14
ALP 5 - Web-Anwendungen
75
11.8.2 Rich Internet Applications (RIA)!
Schwammiger Begriff!
„Web-Anwendung mit reichhaltiger Benutzerschnittstelle,
aber wenig Interaktion zwischen Frontend und Backend“
Unterschiedliche Konkretisierungen:
„heftig multimedial“,
z.B. mit Flash, Silverlight (MS), JavaFX, ... -> HTML 5
Java-bezogen: „Applets + Java Web Start“
WS 13/14
ALP 5 - Web-Anwendungen
76
11.8.3 Web-Anwendungen ohne Browser!
è Web-Dienste (Web services) è Kap. 13
WS 13/14
ALP 5 - Web-Anwendungen
77
Zusammenfassung!
Ø Mobiler Code: der Web Server kann nicht nur Daten
liefern, sondern auch Code - vorzugsweise JavaScript der im Browser ausgeführt wird.
Ø Document Object Model (DOM): JavaScript kann auf
Elemente des Dokuments als vordefinierte Objekte in
einem Objektbaum zugreifen.
Ø Sicherheit: Web-Anwendungen sind berühmt-berüchtigt
für Sicherheitslücken, von denen viele auf Probleme mit
Skriptsprachen zurückzuführen sind.
WS 13/14
ALP 5 - Web-Anwendungen
78
Ø Mobiler Code: Applets sind „kleine“ Java-Programme,
die wie Bilder und andere Objekte nachgeladen werden.
Typische Browser sind „Java-fähig“, d.h. sie führen das
Applet in einer JVM aus.
Ø Sicherheit: Ein Applet wird in der Regel in einer „sandbox“
ausgeführt und darf auf „fast keine“ externen Ressourcen
zugreifen. Ausgenommen sind signierte Applets, denen
über JNLP weitergehende Rechte zugestanden werden
können.
Ø JavaScript Code kann die öffentlichen Methoden von
Applets aufrufen. Umgekehrt (aber weniger verbreitet)
können Applets vom der umgebenden JavaScript-Welt
Gebrauch machen (Interpretierer und Code).
WS 13/14
ALP 5 - Web-Anwendungen
79
Ø AJAX: Nachladen von HTML-Fragmenten mit HTTP
GET oder POST über ein XMLHttpRequest-Objekt;
auch andere Medientypen als HTML sind möglich.
Ø Die für das Web verfügbaren Technologien erlauben
verteilte Anwendungen mit reichhaltigen Benutzerschnittstellen und beliebig gestalteten Backends.
Ø Verbleibende Nachteile:
§ nachrichtenbasierte Interaktion Frontend/Backend
§ Sicherheitsgefährdung durch Skriptsprachen
§ Sicherheitsgefährdung durch mobilen Code
WS 13/14
ALP 5 - Web-Anwendungen
80
Quellen!
St. Münz: Web-Seiten professionell erstellen (3.Aufl.). Addison-Wesley 2008
(und SelfHTML: http://de.selfhtml.org/javascript)
D. Flanagan: JavaScript (5.ed.). O‘Reilly 2006
Mozilla Developer Center: JavaScript.
https://developer.mozilla.org/en/JavaScript
W3C: Document Object Model (DOM)
http://www.w3.org/TR/DOM-Level-3-Core
http://www.w3schools.com/jsref/
http://www.w3schools.com/htmldom/default.asp
Mozilla Developer Center: JavaScript Security.
http://www.mozilla.org/projects/security/components/jssec.html
WS 13/14
ALP 5 - Web-Anwendungen
81
Applets:
docs.oracle.com/javase/tutorial/deployment/applet/
en.wikipedia.org/wiki/Java_applet
www.oracle.com/technetwork/java/javase/plugin2-142482.html
mit HTML5:
eyeasme.com/Shayne/HTML5_APPLETS/
LiveConnect:
jdk6.java.net/plugin2/liveconnect/
Java RIA:
docs.oracle.com/javase/7/docs/technotes/guides/jweb/
Common DOM API: docs.oracle.com/javase/7/docs/jre/api/plugin/dom/
docs.oracle.com/javase/6/docs/technotes/guides/
plugin/developer_guide/java_js.html
Appletviewer:
docs.oracle.com/javase/1.5.0/docs/tooldocs/windows/appletviewer.html
Applet security: docs.oracle.com/javase/tutorial/deployment/applet/security.html
docs.oracle.com/javase/tutorial/security/index.html
WS 13/14
ALP 5 - Web-Anwendungen
82
Java Web Start: www.oracle.com/technetwork/java/javase/javawebstart
docs.oracle.com/javase/6/docs/technotes/
guides/javaws/developersguide/contents.html docs.oracle.com/javase/6/docs/technotes/guides/jweb/
MS ActiveX:
www.fpoint.com/support/whitep/fp-ActiveX-toWeb.pdf
AJAX:
www.w3schools.com/ajax/
www.w3.org/TR/XMLHttpRequest/
en.wikipedia.org/wiki/Ajax_(programming)
WS 13/14
ALP 5 - Web-Anwendungen
83
