Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Uniform Resource Identifier</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Uniform Resource Identifier</h1> </header> <section bg="uri-cover.jpg" id="uri" class="slide cover"><div><h2>URI</h2> <p>Uniform Resource Identifier</p> </div></section> <section class="slide" id="bedeutung"><div><h2>Bedeutung</h2> <ul> <li>Identifizierung einer abstrakten oder physischen Ressource durch einen einheitlichen Bezeichner</li> </ul> <table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Abk.</th> <th scope="col">Identifizierung durch</th> </tr> </thead> <tbody> <tr> <td>Uniform Resource Name</td> <td>URN</td> <td>den <strong>Inhalt</strong> der Ressource</td> </tr> <tr> <td>Uniform Resource Locator</td> <td>URL</td> <td>den <strong>Ort</strong> der Ressource</td> </tr> </tbody> </table> <footer> <ul> <li>URI: Satz von Regeln: <q>Keine Leerzeichen</q> oder <q>16 Zeichen, Anfang Buchstabe, danach Buchstabe oder Zahl, vier Triplets getrennt durch Bindestrich</q></li> <li>URN: Beispiel ISBN (ein Buch, viele Exemplare), MD5, Personalausweisnummer</li> <li>URL: <ul> <li>ID durch Ort, unabhängig vom Inhalt, (Bsp. Liste der Übungen)</li> <li>werden benutzt, um Querverweise zu realisieren; erst dadurch entsteht ein Netz, ein Web.</li> <li>Objekte können sein: Web-Seiten, Bilder, Audio-, Video-Dateien oder andere Dokumente</li> <li>Weitere Beispiele: E-Mail-Adresse, Telefonnummer</li> </ul> </li> <li>Kann auch beides sein.</li> </ul> </footer> </div></section> <section class="slide" id="syntax"><div><h2>Syntax</h2> <ul> <li>URI besteht aus fünf Teilen (<a href="http://tools.ietf.org/html/rfc3986">RFC 3986</a>, <a href="https://cs.chromium.org/chromium/src/url/third_party/mozilla/url_parse.h?sq=package:chromium&dr=CSs&l=79-88">Chromiums Implementierung</a>)</li> </ul> <pre class="highlight language-" data-lang=""><code>scheme ":" hierarchical-part [ "?" query ] [ "#" fragment ] </code></pre> <table> <thead> <tr> <th scope="col">Bezeichner</th> <th scope="col">Bedeutung</th> <th scope="col">Beispiel</th> </tr> </thead> <tbody> <tr> <td>scheme</td> <td>Schema / Protokoll</td> <td><code class="language-plaintext highlighter-rouge">http</code>, <code class="language-plaintext highlighter-rouge">https</code>, <code class="language-plaintext highlighter-rouge">ftp</code></td> </tr> <tr> <td>authority</td> <td>Anbieter / Server</td> <td><code class="language-plaintext highlighter-rouge">beier.f4.htw-berlin.de:8080</code></td> </tr> <tr> <td>path</td> <td>Pfad</td> <td><code class="language-plaintext highlighter-rouge">/wiki/git/index.html</code></td> </tr> <tr> <td>query</td> <td>Abfrage</td> <td><code class="language-plaintext highlighter-rouge">?tier=Katze&name=Tom</code></td> </tr> <tr> <td>fragment</td> <td>Teil</td> <td><code class="language-plaintext highlighter-rouge">#Installation</code></td> </tr> </tbody> </table> <footer> <ul> <li>hierarchical-part = optionale authority + path</li> <li>Scheme: name + <code class="language-plaintext highlighter-rouge">:</code></li> <li>Authority <ul> <li>Instanz, die Namen in diesem Raum (DNS) verwalten kann (z.B. NICs)</li> <li>alles zwischen <code class="language-plaintext highlighter-rouge">//</code> und (<code class="language-plaintext highlighter-rouge">/</code> oder <code class="language-plaintext highlighter-rouge">?</code> oder <code class="language-plaintext highlighter-rouge">#</code> oder Ende)</li> </ul> </li> <li>Query <ul> <li>beinhaltet Daten zur Identifizierung von Ressourcen, die nur durch Path nicht genau verortet werden können</li> <li>meist Key-Value, muss aber nicht</li> <li>Reihenfolge egal (nicht hierarchisch)</li> <li>muss URL-kodiert sein</li> </ul> </li> <li>Fragment: referenziert eine Stelle innerhalb einer Ressource</li> </ul> </footer> </div></section> <section class="slide" id="beispiel"><div><h2>Beispiel</h2> <p><img src="url.png" alt="URL" class="full-width" /></p> <footer> <ul> <li>Benutzerinformation + Host + Port</li> <li>Benutzerinformation veraltet (da als Teil der URL oft als Klartext übertragen / protokolliert)</li> <li>Case ignored: Scheme, Domain</li> <li> <p>Case matters: Path (kann ignoriert werden, vor allem auf Windows – sonst 404)</p> </li> <li>zwei Probleme <ol> <li>Host von klein nach groß, Pfad von groß nach klein</li> <li>können für Menschen unlesbar sein (nächste Folie)</li> </ol> </li> </ul> </footer> </div></section> <section class="slide" id="wenn-es-nur-so-einfach-wäre-"><div><h2>Wenn es nur so einfach wäre …</h2> <p><strong><a href="http://http://@http://http://">http://http://@http://http://</a></strong> ist eine valide URL</p> <ul> <li>User: <code class="language-plaintext highlighter-rouge">http</code></li> <li>Password: <code class="language-plaintext highlighter-rouge">//</code></li> <li>Domain: <code class="language-plaintext highlighter-rouge">http</code></li> <li>(kein Port)</li> <li>Path: <code class="language-plaintext highlighter-rouge">//http://</code></li> </ul> <p>Wohin zeigt <a href="https://www.google.com:443+q=elon@tesla.com">https://www.google.com:443+q=elon@tesla.com</a> ?</p> <p class="note"><a href="https://twitter.com/m_strehl/status/1036624790893813761">Quelle</a></p> <footer> <ul> <li>URLs sollen menschenlesbar sein, sind sie häufig auch, außer an den <q>Rändern</q></li> <li>für normale Menschen nicht erlernbar, selbst für Profis manchmal schwer</li> <li>dadurch Phishing leichter</li> <li>und auch für Parser schwierig, siehe SSRF</li> </ul> </footer> </div></section> <section class="slide" id="varianten"><div><h2>Varianten</h2> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"???"</span><span class="nt">></span>Link<span class="nt"></a></span> </code></pre> <table> <tbody> <tr> <td>Absolut</td> <td><code class="language-plaintext highlighter-rouge">https://de.wikipedia.org</code></td> </tr> <tr> <td>Absolut (Host)</td> <td><code class="language-plaintext highlighter-rouge">/aufgaben/git-http/</code></td> </tr> <tr> <td>Absolut (Netz)</td> <td><code class="language-plaintext highlighter-rouge">//de.wikipedia.org/styles.css</code></td> </tr> <tr> <td>Relativ</td> <td><code class="language-plaintext highlighter-rouge">../images/image.png</code></td> </tr> <tr> <td>Relativ (Dokument)</td> <td><code class="language-plaintext highlighter-rouge">#inhaltsverzeichnis</code></td> </tr> </tbody> </table> </div></section> <section class="slide" id="schemata"><div><h2>Schemata</h2> <table> <tbody> <tr> <td><code class="language-plaintext highlighter-rouge">crid</code></td> <td>Fernsehsendungen</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">data</code></td> <td>Data-URL: direkt eingebettete Daten</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">file</code></td> <td>Dateien im lokalen Dateisystem</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">ftp</code></td> <td>File Transfer Protocol</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">http</code></td> <td>Hypertext Transfer Protocol</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">https</code></td> <td>Hypertext Transfer Protocol Secure</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">mailto</code></td> <td>E-Mail-Adresse</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">sip</code></td> <td>SIP-gestützter Sitzungsaufbau, z. B. für IP-Telefonie</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">tel</code></td> <td>Telefonnummer</td> </tr> </tbody> </table> </div></section> <section class="slide" id="url-encoding"><div><h2>URL-Encoding</h2> <ul> <li>Frei benutzbare Zeichen: <code class="language-plaintext highlighter-rouge">A-Z a-z 0-9 - _ . ~</code></li> <li>Reservierte Zeichen: <code class="language-plaintext highlighter-rouge">! # $ % & ' ( ) * + , / : ; = ? @ [ ]</code></li> <li>gilt auch für Nicht-ASCII-Zeichen</li> <li>MIME-Type: <code class="language-plaintext highlighter-rouge">application/x-www-form-urlencoded</code></li> <li>Prozent-Kodierung</li> </ul> <p class="center"><code class="language-plaintext highlighter-rouge">timon/pumba & simba.mp4</code> → <code class="language-plaintext highlighter-rouge">timon%2Fpumba%20%26%20simba.mp4</code></p> <p class="note">Online-URL-Enkodierer: <a href="https://www.urlencoder.org/">www.urlencoder.org</a></p> <footer> <ul> <li>wie immer, wenn bestimmte Zeichen eine besondere Bedeutung haben, muss es eine Kodierung für diese Zeichen geben (und die Zeichen, durch die man die Kodierung erkennt)</li> <li>Nur bedingt umkehrbar</li> <li>Moderne Browser lösen Kodierung in der Adressleiste auf (Nutzerfreundlichkeit)</li> <li>MIME-Type muss bei <code class="language-plaintext highlighter-rouge">POST</code>-Requests gesetzt werden</li> </ul> </footer> </div></section> <section class="slide" id="-neu--text-fragments"><div><h2>✨ Neu ✨ Text-Fragments</h2> <pre class="highlight language-" data-lang=""><code>beispiel.html#:~:text=Eine einzigartiger Ausschnitt im Text beispiel.html#:~:text=Anfang,Ende </code></pre> <ul> <li> <p>Beispiel: <a href="https://www.raiffeisen.at/rvs/de/immobilien/steuerfragen-rechtsfragen/rechtsfragen.html#:~:text=THEMA%20MIETEN:%20TIPPS%20F%C3%9CR%20VERMIETER">https://www.raiffeisen.at/rvs/de/immobilien/steuerfragen-rechtsfragen/rechtsfragen.html#:~:text=THEMA MIETEN: TIPPS FÜR VERMIETER</a></p> </li> <li>aktuell nur in Chrome</li> <li><a href="https://web.dev/text-fragments/">Boldly link where no one has linked before: Text Fragments</a></li> </ul> <footer> <ul> <li>bisher war die kleinste linkbare einheit das Fragment</li> <li>neuerdings können auch text-stellen verlinkt werden</li> <li>bei mehreren treffern wird erste benutzt</li> <li>nur Chrome, aber schon in Google-Suchergebnisse integriert</li> </ul> </footer> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="http://www.bcs.org/content/conWebDoc/3337">Isn’t it semantic?</a> – URLs sind eigenartig und heute würde TBL es anders machen</li> <li><a href="https://noncombatant.org/2017/11/07/problems-of-urls/">Some Problems Of URLs</a></li> <li><a href="https://www.blackhat.com/docs/us-17/thursday/us-17-Tsai-A-New-Era-Of-SSRF-Exploiting-URL-Parser-In-Trending-Programming-Languages.pdf">Exploiting URL Parser in Trending Programming Languages</a></li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>