Source Viewer — Manual

Alle Funktionen des Source Viewers: Eingabewege, Editor, Live-Vorschau, Beautify/Minify, Extrahieren, Snapshots und die Proxy-Architektur mit ihren Limits.

Zurück zur Übersicht: Source Viewer · Tool live öffnen: www.jpkc.com/tools/source/

Dieses Manual beschreibt den Source Viewer vollständig: wie Inhalt in den Editor kommt, was jede Funktion tut, wie der serverseitige Proxy beim URL-Laden arbeitet und welche technischen Grenzen gelten. Die Oberfläche des Tools ist auf Englisch — die Button- und Menü-Bezeichnungen werden deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Die drei Eingabewege

Es gibt drei Arten, Inhalt in den Editor zu bekommen:

  1. Einfügen oder tippen. Klick in den Editor und füge Code per Strg+V ein oder schreib direkt los. Eigene Buttons für Cut, Copy und Paste stehen in der Werkzeugleiste: Cut und Copy arbeiten mit der aktuellen Auswahl (ohne Auswahl kommt „No text selected."), Paste liest über die Clipboard-API des Browsers — der Browser fragt dafür gegebenenfalls nach der Berechtigung.
  2. Lokale Datei öffnen. Im Menü File wählst du Open file… (im Editor auch Strg+O), oder du ziehst die Datei einfach per Drag & Drop auf den Editor. Die Datei wird als UTF-8-Text vollständig im Browser gelesen — sie verlässt deinen Rechner nicht.
  3. Von URL laden. Trag oben in der Karte Load from URL eine absolute http(s)-Adresse ein und klick Load. Der Quelltext wird serverseitig geholt (siehe Proxy-Architektur) und in den Editor geschrieben.

Achtung, Enter-Taste: Drückst du im URL-Feld Enter, startet das Tool die Verbindungsanalyse (Analyze connection), nicht den Quelltext-Abruf. Für den Quelltext klickst du Load.

Was beim Laden passiert

  • Die Sprache wird automatisch gesetzt. Beim Öffnen, beim Drag & Drop und beim URL-Laden erkennt das Tool den Sprachmodus zuerst am Dateinamen bzw. am Pfad der URL (style.css → CSS, app.ts → TypeScript, auch Dockerfile und Makefile). Fehlt eine Endung, entscheidet der Inhalt: <?xml wird zu XML (bzw. SVG, wenn ein <svg> darin steckt), <?php zu PHP, ein anderer Start mit < zu HTML, gültiges JSON zu JSON, alles andere zu Text. Ausnahme: Lädst du eine bloße Domain ohne Pfad und ohne abschließenden Schrägstrich (https://example.pl), wertet das Tool die Domain-Endung als Dateiendung — .pl ergibt Perl, .io Io, .sh SH. Mit / am Ende (https://example.pl/) entscheidet der Inhalt. Kennt die Erkennung eine Sprache, die nicht im Auswahlmenü steht, ergänzt das Tool sie dort.
  • Bearbeiteter Code wird nicht kommentarlos überschrieben. Hast du den Inhalt selbst verändert, fragt jede Aktion, die ihn ersetzt (Load, SEO, Analyze connection, Open file…, Drag & Drop, New file, Clear editor), vorher nach — und legt automatisch einen Snapshot an. Unveränderter, gerade geladener Inhalt wird ohne Rückfrage ersetzt.
  • Der Dateiname wird gemerkt — von der geöffneten Datei bzw. aus dem letzten Pfadsegment der URL (bei einer reinen Domain der Hostname, z. B. example-com). Er erscheint in der Statuszeile und dient als Name beim Speichern.
  • Erfolgreich abgerufene URLs landen in der Liste „Recent URLs" (Uhr-Symbol neben dem URL-Feld). Sie hält die letzten 10 Adressen im Browser-Speicher; ein Klick setzt die URL wieder ins Feld, Clear list leert die Liste. Zusätzlich schreibt das Tool die Adresse als ?url=… in die Adresszeile: Ein solcher Link füllt das URL-Feld beim Öffnen vor, lädt aber nicht automatisch.

Dein Stand wird automatisch im lokalen Browser-Speicher (localStorage) gesichert — Inhalt, gewählte Sprache und die zuletzt eingegebene URL. Den Inhalt sichert das Tool etwa eine Sekunde nach der letzten Änderung, Sprache und URL sofort. Das Badge mit dem Festplatten-Symbol neben „Code Editor" zeigt den Status: grün = gespeichert, rot = Speichern fehlgeschlagen (dann kommt einmalig der Hinweis, dass der Browser-Speicher voll oder deaktiviert ist und du den Code als Datei sichern solltest). Beim nächsten Besuch stellt der Editor den Inhalt wieder her (Toast „Content restored from local storage.").

Datei-Menü, Speichern und Snapshots

Alle Dateioperationen liegen im Menü File (Datei-Symbol, ganz links in der Werkzeugleiste):

  • New file — beginnt eine neue Datei mit einem leeren HTML-Grundgerüst und stellt die Sprache auf HTML.
  • Open file… (Strg+O) — öffnet eine lokale Datei (siehe oben).
  • Save (Strg+S) — lädt den Editor-Inhalt als Datei herunter. Der Name ist der gemerkte Dateiname mit der Endung des aktuellen Sprachmodus — untitled.ts für TypeScript, .md nach einer Markdown-Konvertierung, .txt für Text. Die Berichte heißen seo-<name>.md bzw. connection-<name>.md. Bei leerem Editor kommt „Nothing to save.".
  • Snapshots… — öffnet die Snapshot-Verwaltung (siehe unten).
  • Print source… — öffnet ein Druckfenster mit dem Quelltext in Festbreitenschrift, mit Sprache und Druckdatum im Kopf.
  • Clear editor — leert den Editor, setzt die Sprache auf HTML zurück und löscht den automatisch gespeicherten Stand. Snapshots und die Liste „Recent URLs" bleiben erhalten.

Snapshots

Snapshots sind benannte Zwischenstände im Browser-Speicher — mit Code, Sprache und Dateiname. Im Dialog Snapshots vergibst du optional einen Namen (bis 80 Zeichen) und klickst Save current code. Jeder Eintrag zeigt Datum, Sprache und Größe; Restore holt ihn zurück (mit Strg+Z rückgängig zu machen), das Papierkorb-Symbol löscht ihn.

Zusätzlich legt das Tool automatische Snapshots an: vor jedem Ersetzen von selbst bearbeitetem Code und vor dem Wiederherstellen eines anderen Snapshots. Behalten werden höchstens 20 Snapshots; wird es eng — an der Anzahl oder am Speicherplatz des Browsers —, fliegen zuerst die ältesten automatischen raus.

Der Editor und das Syntax-Highlighting

Der Editor basiert auf dem ACE Editor (öffnet in neuem Tab) — derselben Engine, die auch im Source Code-Tab des SEO & GEO Analyzers steckt.

Sprachen und Highlighting

Über den Sprachwähler (Dropdown in der Werkzeugleiste) wählst du den Sprachmodus. Die Liste umfasst über 100 Sprachen: ganz oben eine Gruppe gängiger Sprachen (HTML, CSS, JavaScript, TypeScript, JSON, JSX, TSX, Vue, LESS, SASS, SCSS, Markdown, MySQL, PHP, Python, Text, Twig, XML, YAML), darunter alphabetisch der komplette Rest — von ABAP, Assembly und C/C++ über Dockerfile, Go, Kotlin, Lua, Rust und Swift bis Terraform, Verilog und XQuery. Ein neuer Editor startet im HTML-Modus.

Beim Öffnen und Laden setzt das Tool die Sprache automatisch; eingefügten Code ordnet es dagegen nicht neu zu — dort wählst du den Modus selbst. Das Highlighting liefert ACE über seine Sprachmodi. Zusätzlich aktiv: Linting (Syntax-Prüfung über Worker), Autovervollständigung (Basis, Snippets und Live-Vorschläge), Hervorhebung des Worts unter dem Cursor und Code-Faltung. Eingerückt wird mit echten Tabs.

Themes

Im Einstellungs-Dialog stehen vier Themes zur Wahl: Dracula (Dark) (Standard), Monokai (Dark), GitHub (Light) und Solarized (Light). Die Markdown-/Text-Vorschau rendert unabhängig davon auf hellem Grund.

Bearbeiten, Navigieren, Suchen

  • Undo/Redo, Indent/Outdent, Schriftgröße −/+, Zeilenumbruch (Toggle line wrap) und Vollbild (Toggle fullscreen) liegen als Buttons in der Werkzeugleiste. Im Vollbild bekommt die URL-Leiste eine eigene, kompakte Variante über dem Editor.
  • Über das More tools-Menü (drei Punkte) erreichst du Go to Line (Strg+G), Find (Strg+F), Replace (Strg+H), den Dialog Extract links, images, scripts… (siehe Extrahieren) sowie Keyboard Shortcuts und Settings. Go to Line öffnet einen kleinen Dialog, der den gültigen Zeilenbereich anzeigt und die aktuelle Zeile vorbelegt.
  • Der Dialog Keyboard Shortcuts listet die Tastenkürzel nach Gruppen — File Operations, Navigation, Search & Replace, Editing, Selection und Code Folding. Beispiele, die im Editor so greifen: Strg+S speichern, Strg+O öffnen, Strg+G gehe zu Zeile, Strg+F suchen, Strg+H ersetzen, Strg+K nächster Treffer, Alt+↑/↓ Zeile verschieben, Strg+/ Kommentar umschalten, Alt+0 alles bis auf die Cursor-Stelle falten, Alt+Shift+0 alles entfalten. Einige Einträge des Dialogs weichen von der tatsächlichen Belegung des Editors ab — Vorsicht vor allem bei Strg+D: Es löscht die Zeile, Duplizieren liegt auf Strg+Shift+D. Strg+Shift+K springt zum vorigen Treffer, Strg+Shift+L markiert die ganze Zeile, alle Vorkommen wählst du mit Strg+Alt+K aus. Einen weiteren Cursor setzt Strg+Klick, Alt+Ziehen zieht eine Blockauswahl auf, und F3 ist unter Windows und Linux nicht mit der Suche belegt. Außerdem öffnet Strg+L die Gehe-zu-Zeile-Funktion nicht (nur Strg+G), Alt+←/→ springt unter Windows und Linux an Zeilenanfang bzw. Zeilenende statt wortweise (wortweise: Strg+←/→), und Strg+Shift+[/] faltet nicht — Falten liegt dort auf Alt+L, Entfalten auf Alt+Shift+L. Die Kürzel für Speichern, Öffnen und Gehe-zu-Zeile greifen, solange der Editor den Fokus hat (auf dem Mac mit Cmd).

Statuszeile und Bedienung per Tastatur

Unter dem Editor zeigt eine Statuszeile Größe (Bytes bzw. KB), Zeilenzahl, Sprache und Dateinamen, daneben die Cursorposition. Stammt der Inhalt von einer URL, nennt der Tooltip die Quelle („Loaded from …").

Die Werkzeugleiste ist eine Toolbar mit einem Tab-Stopp: Mit Tab springst du hinein, mit den Pfeiltasten ←/→ sowie Pos1/Ende wanderst du zwischen den Buttons. Auf schmalen Touch-Bildschirmen (unter 768 px) wird die Werkzeugleiste zur horizontal wischbaren Leiste. Die Editorhöhe passt sich dem Fenster an; lange Dateien scrollen im Editor selbst.

Einstellungen

Der Dialog Editor Settings (More tools → Settings) steuert: Font Size (8–32 px, Standard 15), Tab Size (2/4/8 Leerzeichen, Standard 4), Theme (siehe oben) sowie die Schalter Word wrap, Show invisible characters, Show indent guides, Show line numbers, Highlight active line, Autocomplete und Syntax validation (linting) — alle standardmäßig an. Die Einstellungen werden im Browser gespeichert; Reset to Defaults stellt die Standardwerte wieder her.

Umwandeln und Vorschau

Beautify

Der Button Beautify (Zauberstab) — ebenso der Eintrag Beautify im Format-Menü daneben — formatiert den Inhalt mit dem JS Beautifier (öffnet in neuem Tab). Welche Routine läuft, legt der Sprachmodus fest:

Routine Sprachmodi
HTML HTML, XML, SVG, Vue, Twig, Handlebars, Django, Liquid, EJS
CSS CSS, SCSS, LESS
JavaScript JavaScript, JSON, JSX, TypeScript, TSX, Hjson

Bei allen anderen Sprachen — etwa Markdown, YAML, Python oder SASS (eingerückte Syntax) — verweigert das Tool die Formatierung mit einem Hinweis, statt den Code zu verunstalten. Steht der Modus auf einer JavaScript-Sprache, der Inhalt beginnt aber mit einem HTML-Tag, greift die HTML-Routine. Eingerückt wird mit Tabs. Bei Dateien über 50 KB erscheint zuerst ein Hinweis-Toast, weil das Formatieren dann einige Sekunden dauern kann; das Ergebnis ist ein einzelner Undo-Schritt.

Auf der JavaScript-Route laufen vorher zwei Unpacker: einer für mit Dean Edwards' P.A.C.K.E.R. gepackten Code (eval(function(p,a,c,k,e,…)) — er dekodiert, ohne den Code auszuführen — und einer für URL-kodierten Code. Andere Verschleierungen löst das Tool nicht auf. Bei leerem Editor kommt „Nothing to beautify.".

Minify

Das Format-Menü (Pfeil rechts neben Beautify) enthält Minify (HTML, CSS, JS, JSON). Die Routine richtet sich nach dem Sprachmodus und ist bewusst konservativ:

  • HTML, XML, SVG: Kommentare fliegen raus (Conditional Comments bleiben), Whitespace-Folgen werden zu einem Leerzeichen zusammengefasst — nicht entfernt, weil Leerraum zwischen Inline-Elementen sichtbar ist. Inhalte von <pre>, <textarea>, <script> und <style> bleiben unangetastet.
  • CSS, SCSS, LESS: Strings bleiben wörtlich erhalten, Kommentare verschwinden bis auf Lizenzkommentare (/*! … */), Leerraum wird nur um {, }, ; und , entfernt — nie um :, denn a :hover ist etwas anderes als a:hover.
  • JSON: kompakt neu serialisiert; ungültiges JSON bricht mit einer Fehlermeldung ab.
  • JavaScript: über Terser (öffnet in neuem Tab) mit Komprimierung und Umbenennung lokaler Namen; die Bibliothek wird erst beim ersten Aufruf geladen.

Andere Modi (auch TypeScript oder JSX) quittiert das Tool mit einem Hinweis. Nach dem Minifizieren zeigt ein Toast die Größe vorher und nachher samt Ersparnis in Prozent; Strg+Z macht es rückgängig.

HTML → Markdown

Der Button mit dem Markdown-Symbol wandelt HTML in Markdown um. Dafür läuft der html-to-markdown (öffnet in neuem Tab)-Konverter als WebAssembly-Modul (Rust-Kern) direkt im Browser; er erzeugt CommonMark mit GFM-Tabellen, Tief- und Hochstellung als ~x~ bzw. ^x^. Die Konvertierung arbeitet nur in den Modi HTML, XML, SVG, PHP, Twig und Vue und nur, wenn der Inhalt Tags enthält — sonst kommt der Hinweis „Convert works on HTML …". Nach der Umwandlung steht der Editor automatisch im Modus Markdown.

Vor der Konvertierung räumt das Tool das HTML auf:

  • Relative Links und Bildquellen werden absolut — aufgelöst gegen ein <base href> bzw. gegen die URL, von der die Seite geladen wurde. So funktionieren die Links im Markdown auch außerhalb der Ursprungsseite. Ohne <base> gilt die zuletzt per Load geladene URL, bis New file, Open file… (auch per Drag & Drop), Clear editor oder ein SEO- bzw. Verbindungsbericht sie zurücksetzt. Fügst du nach einem Load fremdes HTML ein, löst das Tool dessen relative Links also gegen die alte Lade-URL auf; nur ohne Lade-URL bleiben sie relativ.
  • Skip-Links („Skip to content", „Zum Inhalt" …) und Überschriften-Permalinks (#, , 🔗) werden entfernt, damit sie nicht in jeder Markdown-Überschrift landen.
  • <details>/<summary> wird zu einer Überschrift mit dem Inhalt darunter, <dl>-Definitionslisten werden zu - **Begriff** — Definition.
  • Inline-SVG wird verworfen, statt als Base64-Bild eingebettet zu werden.

Aus den Meta-Daten baut das Tool zusätzlich ein gültiges YAML-Frontmatter und stellt es dem Markdown voran. Es enthält — soweit vorhanden — title, description, author, canonical_url, base_href, language, text_direction, keywords, open_graph und twitter_card, die übrigen Meta-Tags unter meta, die <link>-Elemente des Heads unter link_tags (etwa alternate mit hreflang, Icons, Manifest), strukturierte Daten unter structured_data (Format, Schema-Typ und das rohe JSON — erfasst wird derzeit praktisch nur JSON-LD), die Überschriften-Gliederung unter outline, Link-Zahlen unter links (gesamt, intern, extern, Anker und — falls vorhanden — sonstige wie mailto: unter other) und unter images die Bildzahl, die Zahl der Bilder ohne alt und die Bildliste. So entsteht aus einer abgerufenen HTML-Seite in einem Schritt eine saubere Markdown-Datei mit Analyse-Kopf.

HTML → Plain Text

Der Button mit dem Text-Symbol wandelt HTML in reinen Text um — Formatierung gestrippt, ohne Frontmatter, mit denselben Voraussetzungen und Aufräumschritten wie die Markdown-Konvertierung. Danach steht der Editor im Modus Text.

HTML-Live-Vorschau

Steht der Editor auf HTML oder SVG, öffnet der Button Preview (Auge) die HTML Preview: Der Code wird im Vollbild-Dialog gerendert — in einem abgeschotteten Frame (sandbox), in dem keine Skripte, keine Formulare und keine Pop-ups laufen (Badge „Scripts off"). Externe Stylesheets, Webfonts und Bilder werden geladen, sofern sie per HTTPS kommen; eingebettete Frames, Videos und Audio von fremden Servern lädt die Vorschau nicht. Relative Adressen löst das Tool gegen die Lade-URL bzw. <base href> auf, eine Meta-Refresh-Weiterleitung entfernt es. Drei Buttons schalten die Breite um: volle Breite, Tablet (768 px) und Phone (390 px).

Weil Skripte aus sind, siehst du die Seite so, wie sie ohne JavaScript aussieht — eine client-gerenderte App bleibt hier weitgehend leer.

Markdown-/Text-Vorschau

In den Modi Markdown und Text öffnet Preview stattdessen die Text/Markdown Preview: Das Markdown wird per markdown-it (öffnet in neuem Tab) (samt Plugins für Fußnoten, Definitionslisten, Sub/Sup, Mark, Ins, Emoji, Abkürzungen und Task-Listen) als HTML gerendert; Code-Blöcke darin hebt highlight.js (öffnet in neuem Tab) hervor. Ein vorangestelltes YAML-Frontmatter erscheint als yaml-Codeblock. Text, der nicht nach Markdown aussieht, wird als vorformatierter Block gezeigt. Das gerenderte HTML wird vor der Anzeige bereinigt (DOMPurify) — Skripte aus geladenen Seiten laufen also auch hier nicht.

Aus dem Dialog heraus — oder direkt über das Dropdown neben dem Preview-Button mit Copy as HTML, Save as HTML und Print Preview — kannst du das Ergebnis als vollständiges HTML-Dokument kopieren, als preview.html speichern oder drucken. Dieses Dropdown ist nur in den Modi Markdown und Text aktiv.

More tools → Extract links, images, scripts… öffnet den Dialog Extract from HTML. Er liest das HTML im Editor aus und listet wahlweise:

  • Links — alle href von <a>-Elementen (ohne javascript:),
  • Images — alle src von <img>,
  • Scripts — alle externen Skripte (<script src>),
  • Stylesheets — alle <link rel="stylesheet">,
  • Headings — die Überschriften H1–H6, nach Ebene eingerückt.

Jeder Typ zeigt seine Anzahl im Button. Der Schalter Remove duplicates (standardmäßig an) entfernt doppelte Einträge (nicht bei Überschriften); Copy kopiert die Liste. Relative Adressen werden gegen die Lade-URL bzw. <base href> aufgelöst — hast du das HTML nur eingefügt, weist der Dialog darauf hin, dass die Seite für absolute Adressen per URL geladen werden muss. Ohne Tags im Editor kommt „Extract works on HTML …".

URL-Analyse: SEO und Verbindung

Neben dem reinen Quelltext kann das Tool zwei Analyse-Berichte zu einer URL laden — beide laufen über denselben Proxy und landen als Markdown-Bericht im Editor (Sprache Markdown, Dateiname seo-…md bzw. connection-…md):

  • SEO (Balken-Symbol, Button SEO) — eine On-Page-Auswertung der Seite: Titel und Länge, Sprache, alle Meta-Tags, <link>-Attribute, Tag-Zähler für <head> und <body>, Überschriften-Hierarchie, alle Links und Bilder mit Attributen, kopierfertige Listen aller href- und src-Werte, eine Barrierefreiheits-Übersicht, Keyword-Dichte, eine Plain-Text-Version mit Wort- und Zeichenzahl und konkrete SEO-Empfehlungen (Critical Issues, Improvements Recommended, What's Good) mit einem Prozent-Score. Das ist dieselbe Analyse-Familie wie der SEO & GEO Analyzer, hier in den Editor geliefert.
  • Analyze connection (Schild-Symbol, auch per Enter im URL-Feld) — eine Verbindungs- und Header-Analyse per GET-Request, bei dem das Tool nur die Header liest und den Body nicht herunterlädt: finale URL nach Weiterleitungen, IP, Protokoll und HTTP-Version, HTTP-Status, Timing (DNS, TCP, SSL-Handshake, Pretransfer, Starttransfer, Total), Security-Header (u. a. HSTS, CSP, X-Frame-Options, Referrer-Policy, Permissions-Policy, Cross-Origin-Policies), Server-Infos, Caching-Header und die rohen HTTP-Header.

Der SSL/TLS-Teil der Verbindungsanalyse trennt zwei Dinge: Die Verification-Zeile sagt, ob das Zertifikat gegen die CA-Liste als vertrauenswürdig geprüft wurde (oder welcher Fehler vorlag — etwa abgelaufen, selbst signiert, falscher Hostname). Die Zertifikatsdetails kommen aus einem separaten Handshake ohne Prüfung — deshalb siehst du sie auch bei kaputten Zertifikaten: Common Name, Organisation, Aussteller, Gültigkeit mit Resttagen (Warnung ab 30 Tagen), Signaturalgorithmus, öffentlicher Schlüssel, Seriennummer, SHA-256-Fingerabdruck, ob der Hostname abgedeckt ist, TLS-Version und Cipher, die Liste der SANs sowie die Zertifikatskette so, wie der Server sie sendet — jedes Glied beschriftet (eine „cross-signed root" wird als solche benannt) und mit dem Ergebnis der Signaturprüfung. Kommt gar keine HTTP-Antwort zustande, beginnt der Bericht mit einer Fehlerdiagnose, und die Header-Abschnitte werden als „unbekannt" statt als „fehlend" ausgewiesen.

Dazu kommt Open URL in new tab (Pfeil-Symbol neben dem URL-Feld, auf sehr schmalen Bildschirmen ausgeblendet), das die eingegebene URL einfach im neuen Tab öffnet, sowie das Menü External validation tools in der Werkzeugleiste (Symbol mit Pfeil aus dem Kasten): W3C Markup Validator, PageSpeed Insights, Structured Data Testing (führt zum Schema.org-Validator), SSL Server Test, IP Geolocation und Redirect Checker. Die Einträge sind mit der zuletzt verwendeten URL vorbelegt und öffnen den externen Dienst in einem neuen Tab.

Proxy-Architektur: serverseitiger Abruf

Sobald eine der drei URL-Funktionen (Load, SEO, Analyze connection) läuft, wird die Zielseite vom JPKCom-Server abgerufen, nicht von deinem Browser. Der Grund ist CORS: Ein direkter Abruf einer fremden Domain aus dem Browser scheitert. Für den Datenschutz heißt das: Die Zielseite sieht einen Request vom JPKCom-Server (mit einem browserüblichen User-Agent), nicht deine IP-Adresse. Alles andere — Editor, Erkennung, Formatieren, Konvertieren, Vorschau, Extrahieren — läuft in deinem Browser. Dabei gibt es eine Ausnahme beim Datenschutz: Die HTML-Live-Vorschau lädt externe Stylesheets, Webfonts und Bilder der Seite, die Markdown-Vorschau eingebundene Bilder — beides holt dein Browser direkt von den jeweiligen Servern, die dabei deine IP-Adresse sehen.

Im Hintergrund arbeiten zwei serverseitige Endpunkte: ein Fetch-Proxy, der die Seite per cURL holt und (je nach Modus) roh ausliefert oder als Markdown-Bericht aufbereitet, und ein token-basierter Endpunkt, der dem Tool-JavaScript vor jedem Abruf ein frisches Token-Paar liefert. Beides ist kein öffentliches API, das du selbst aufrufen kannst — die Endpunkte sind ausschließlich für das Tool gedacht und gehärtet:

  • Referer-Prüfung: Anfragen werden nur akzeptiert, wenn sie nachweislich von der Tool-Seite (/tools/source/) kommen; sonst HTTP 403.
  • Token-Authentifizierung: Ein zweistufiges, zeitgestempeltes Token (V2) mit täglich wechselnden Geheimnissen verhindert, dass die Endpunkte ohne das Tool angesprochen werden.

Fehlermeldungen des Proxys (ungültige oder blockierte URL, abgelaufenes Token, zu große Datei) erscheinen als Fehler-Hinweis — sie landen nicht im Editor.

SSRF-Schutz und Grenzen

  • SSRF-/Private-IP-Schutz: Interne, lokale und private IP-Adressen werden blockiert. Als Protokolle sind nur HTTP und HTTPS erlaubt, als Ports nur 80, 443, 3000, 5000, 8000, 8008, 8080 und 8443 — eine URL mit anderem Port lehnt der Proxy als ungültig ab („Invalid URI."). Weiterleitungen (höchstens 5) folgt der Proxy selbst und prüft dabei jedes Ziel erneut. localhost, Intranet und Dev-Instanzen lassen sich daher nicht laden.
  • Größenlimit: Der Abruf ist auf 950 KB begrenzt. Ist die Antwort größer, bricht der Proxy ab und meldet „The file is too large." — der Quelltext wird nicht gekürzt geliefert.
  • Timeout: 15 Sekunden je Abruf (für die Verbindungsanalyse ebenso), höchstens 5 Sekunden für den Verbindungsaufbau und insgesamt 30 Sekunden über alle Weiterleitungen.
  • Rate-Limit im Browser: Die URL-Buttons teilen sich eine Drossel von einer Anfrage pro Sekunde und sind währenddessen kurz gesperrt. Feuerst du schneller, kommt der Hinweis „Please wait … second(s) before the next request.".
  • Rate-Limit am Server: Pro IP-Adresse sind 120 Abrufe pro Minute erlaubt; darüber antwortet der Server mit HTTP 429 und nennt die Wartezeit.

Expert Mode (optional)

Über den Schalter Expert im Kopf der Tool-Seite (Zahnrad für die Einstellungen) lässt sich ein selbst betriebener lokaler Proxy einbinden (localproxy, erreichbar etwa unter http://127.0.0.1:8765, abgesichert mit einem Token). Ist er aktiv, holt er beim Load die Seite statt des JPKCom-Servers — ohne die Browser-Drossel und laut Tool mit Dateien bis 50 MB. SEO und Analyze connection laufen auch dann über den JPKCom-Server, mit dessen Grenzen. Die Einrichtung ist fortgeschritten und für den normalen Betrieb nicht nötig.

Grenzen — kompakt

  • Spracherkennung nur beim Laden. Sie greift beim Öffnen, Drag & Drop und URL-Laden — über Dateiname/URL-Pfad, sonst über wenige Inhaltsmerkmale. Eingefügten Code ordnest du selbst zu; eine URL ohne Endung, die etwa CSS ausliefert, landet als Text, und eine Seite unter ….php im Modus PHP — dort greifen Beautify, Minify und Live-Vorschau erst nach dem Umstellen auf HTML.
  • URL-Laden nur für öffentliche http(s)-Seiten. Kein Login-Bereich, kein localhost/Intranet, nur die Ports 80, 443, 3000, 5000, 8000, 8008, 8080 und 8443, max. 950 KB, 15 s Timeout, eine Anfrage pro Sekunde, 120 pro Minute.
  • Nur das ausgelieferte HTML. Weder Load noch die Live-Vorschau führen JavaScript aus — was eine Seite erst im Browser nachbaut, fehlt.
  • Beautify und Minify sind sprachabhängig. Beautify kennt HTML-, CSS- und JavaScript-Familien, Minify HTML/XML/SVG, CSS/SCSS/LESS, JSON und JavaScript — alles andere wird abgelehnt.
  • Konvertieren und Extrahieren nur für HTML. Die Markdown-/Text-Konvertierung braucht einen HTML-artigen Modus, absolute URLs gibt es nur mit Lade-URL oder <base href>.
  • Vorschau nur für HTML, SVG, Markdown und Text. Bei allen anderen Sprachen ist der Preview-Button deaktiviert; Kopieren/Speichern/Drucken der Vorschau gibt es nur für Markdown und Text.
  • Alles Lokale bleibt im Browser. Autosave, Snapshots (max. 20), Recent URLs (max. 10) und Einstellungen liegen im localStorage dieses Browsers.
  • Keine KI im Tool. Der Source Viewer nutzt selbst keine KI; die HTML-zu-Markdown-Funktion ist lediglich KI-freundlich, weil Markdown rauschärmer ist.

Für den Einstieg und das große Bild siehe die Übersicht, für konkrete Abläufe die Beispiele und für Kniffe die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.