# Source Viewer — Manual

> Vollständige Funktionsbeschreibung des Source Viewers: Eingabewege, jede Editor-Funktion, die Proxy-Architektur mit SSRF-Schutz und Limits, das Highlighting.

Source: https://www.jpkc.com/db/tools/source/manual/

Zurück zur Übersicht: [Source Viewer](https://www.jpkc.com/db/tools/source/) · Tool live öffnen: [www.jpkc.com/tools/source/](https://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; das Highlighting greift sofort, sobald die passende Sprache gewählt ist.
2. **Lokale Datei öffnen.** Der Button **Open** (Ordner-Symbol) öffnet über die HTML5 File API einen Dateidialog. Die Datei wird vollständig im Browser gelesen — sie verlässt deinen Rechner nicht.
3. **Von URL laden.** Trag oben im URL-Feld eine absolute http(s)-Adresse ein und klick **Load**. Der Quelltext wird serverseitig geholt (siehe [Proxy-Architektur](#proxy-architektur-serverseitiger-abruf)) und in den Editor geschrieben.

> **Wichtig beim URL-Laden:** Nach dem Abruf setzt das Tool die Editor-Sprache **immer auf HTML**, unabhängig vom tatsächlichen Dateityp. Lädst du etwa eine `.css`- oder `.js`-Datei, stell die Sprache danach von Hand über den Sprachwähler um, damit das Highlighting passt.

Dein Stand wird automatisch im lokalen Browser-Speicher (`localStorage`) gesichert — inklusive der gewählten Sprache und der zuletzt eingegebenen URL. Das Badge **storageStatus** (Festplatten-Symbol) zeigt den Speicher-Status. Beim nächsten Besuch stellt der Editor den Inhalt wieder her (Toast „Content restored from local storage."). **New** beginnt eine leere Datei, **Clear** (Papierkorb) leert den Editor.

## Der Editor und das Syntax-Highlighting

Der Editor basiert auf dem [ACE Editor](https://ace.c9.io/) — derselben Engine, die auch im *Source Code*-Tab des [SEO & GEO Analyzers](https://www.jpkc.com/db/tools/seo/) steckt.

### Sprachen und Highlighting

Über den Sprachwähler (Dropdown oben rechts) 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. Standardmäßig startet der Editor im HTML-Modus.

Das Highlighting selbst liefert ACE über seine Sprachmodi; es gibt **keine** Auto-Erkennung der Sprache aus dem Inhalt — du wählst den Modus aktiv. Zusätzlich aktiv: **Linting** (Syntax-Prüfung über Worker), **Autovervollständigung** (Basis, Snippets und Live-Vorschläge) und Hervorhebung des Worts unter dem Cursor.

### Themes

Im Einstellungs-Dialog (**Settings**) stehen zwei dunkle Themes zur Wahl: **Dracula** (Standard) und **Monokai**. Ein helles Theme gibt es im Editor nicht; die Markdown-/Text-Vorschau rendert dagegen auf hellem Grund.

### Bearbeiten, Navigieren, Suchen

- **Undo/Redo**, **Indent/Outdent**, Schriftgröße **+/−**, **Zeilenumbruch** umschalten und **Vollbild** (Toggle) liegen als Buttons in der Werkzeugleiste.
- Über das **More tools**-Menü (Drei-Punkte) erreichst du **Go to Line** (`Strg+G`), **Find** (`Strg+F`), **Replace** (`Strg+H`) und **Print** sowie die Dialoge **Keyboard Shortcuts** und **Settings**.
- Der Dialog **Keyboard Shortcuts** listet alle Tastenkürzel — Datei, Navigation, Suche, Editing, Auswahl und Code-Faltung. Beispiele: `Strg+D` Zeile duplizieren, `Alt+↑/↓` Zeile verschieben, `Strg+/` Kommentar umschalten, `Strg+Shift+L` alle Vorkommen auswählen, `Alt+0` alles falten.

### Einstellungen

Der **Settings**-Dialog steuert: Schriftgröße (8–32 px), Tab-Größe (2/4/8 Leerzeichen), Theme (Dracula/Monokai), Zeilenumbruch, sichtbare Sonderzeichen, Einrück-Hilfslinien, Zeilennummern (Gutter), Hervorhebung der aktiven Zeile, Autovervollständigung und Linting. **Reset to Defaults** stellt die Standardwerte wieder her.

## Umwandeln und Vorschau

### Beautify

Der Button **Beautify** (Zauberstab) formatiert den Inhalt mit dem [JS Beautifier](https://beautifier.io/). Welche Routine läuft, hängt von der Eingabe ab: Im Modus **CSS** läuft die CSS-Routine; sonst entscheidet der Inhalt — beginnt er mit einem `<`-Tag, greift die **HTML**-Routine, andernfalls die **JavaScript**-Routine (die auch JSON sinnvoll einrückt). Andere Modi wie LESS/SASS/SCSS lösen daher die JavaScript-Routine aus, nicht die CSS-Routine — für echtes SASS/SCSS ist der [Compiler](https://www.jpkc.com/db/tools/compiler/) die bessere Wahl. Der Beautifier bringt die mitgelieferten Unpacker mit und kann so auch verschleierten/minifizierten JavaScript-Code wieder lesbar machen. Bei leerem Editor kommt der Hinweis „Nothing to beautify.".

### HTML → Markdown

Der Button mit dem Markdown-Symbol wandelt **HTML in Markdown** um. Dafür läuft der [html-to-markdown](https://github.com/Goldziher/html-to-markdown)-Konverter als **WebAssembly-Modul** (Rust-Kern) direkt im Browser. Aus den im `<head>` gefundenen Meta-Daten (Titel, Description, Open Graph, Twitter, weitere Meta-Tags und `<link>`-Angaben) baut das Tool zusätzlich ein **YAML-Frontmatter** und stellt es dem Markdown voran. So entsteht aus einer abgerufenen HTML-Seite in einem Schritt eine saubere, frontmatter-versehene Markdown-Datei.

### HTML → Plain Text

Der Button mit dem Text-Symbol wandelt **HTML in reinen Text** um — Formatierung gestrippt, ohne Frontmatter.

### Markdown-/Text-Vorschau

Der Button **Preview** (Auge) ist nur bei den Sprachen **Text** und **Markdown** aktiv. Er öffnet eine Vollbild-Vorschau, in der das Markdown per [markdown-it](https://github.com/markdown-it/markdown-it) (samt Plugins für Fußnoten, Definitionslisten, Sub/Sup, Mark, Ins, Emoji, Abkürzungen und Task-Listen) als HTML gerendert wird; Code-Blöcke darin werden mit [highlight.js](https://highlightjs.org/) hervorgehoben. Ein vorangestelltes YAML-Frontmatter wird in der Vorschau als `yaml`-Codeblock dargestellt. Aus der Vorschau heraus kannst du das Ergebnis **als HTML kopieren**, **als HTML speichern** oder **drucken**.

## 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:

- **SEO** (Balken-Symbol, Button **SEO**) — eine On-Page-Auswertung der Seite: Titel und Länge, alle Meta-Tags, `<link>`-Attribute, Tag-Zähler für `<head>` und `<body>`, Überschriften-Hierarchie, alle Links und Bilder mit Attributen, eine Barrierefreiheits-Übersicht, Keyword-Dichte, eine Plain-Text-Version und konkrete SEO-Empfehlungen mit einem Prozent-Score. Das ist dieselbe Analyse-Familie wie der [SEO & GEO Analyzer](https://www.jpkc.com/db/tools/seo/), hier in den Editor geliefert.
- **Analyze connection** (Schild-Symbol) — eine Verbindungs- und Header-Analyse: finale URL, IP, Protokoll und HTTP-Version, HTTP-Status, Timing (DNS, TCP, SSL-Handshake, Total), SSL-Zertifikat (Subject, Issuer, Gültigkeit, Restlaufzeit, SANs, Chain, Algorithmus), Security-Header, Server-Infos, Caching-Header und die rohen HTTP-Header. Verbindungs- und SSL-Fehler werden als Diagnose ausgegeben statt einfach abzubrechen.

Dazu kommt **Open URL in new tab** (Pfeil-Symbol), das die eingegebene URL einfach im neuen Tab öffnet, sowie ein **Validate**-Menü mit externen Werkzeugen (W3C-Markup-Validator, PageSpeed Insights, Structured-Data-Test, SSL-Server-Test, IP-Geolocation, Redirect-Checker) — diese Einträge öffnen jeweils 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 dessen User-Agent), nicht deine IP-Adresse.

Im Hintergrund arbeiten zwei serverseitige Endpunkte: ein **Fetch-Proxy**, der die Seite per cURL holt und (je nach Modus) roh ausliefert oder als Markdown-Analyse aufbereitet, und ein **token-basierter Endpunkt**, der dem Tool-JavaScript vor jedem Abruf ein frisches, tagesrotierendes 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) verhindert, dass die Endpunkte ohne das Tool angesprochen werden.

### SSRF-Schutz und Grenzen

- **SSRF-/Private-IP-Schutz:** Interne, lokale und private IP-Adressen werden blockiert. Als Protokolle sind nur **HTTP und HTTPS** erlaubt. `localhost`, Intranet und Dev-Instanzen lassen sich daher nicht laden.
- **Größenlimit:** Der Abruf ist auf **rund 950 KB** Antwortgröße begrenzt; größere Inhalte werden abgeschnitten.
- **Timeout:** Der Abruf läuft mit einem **15-Sekunden**-Timeout (für die Header-/Verbindungs-Analyse ebenso).
- **Rate-Limit (clientseitig):** Die URL-Buttons (Load, SEO, Analyze connection) teilen sich eine Drossel von **etwa einer Anfrage pro Sekunde**. Feuerst du schneller, kommt der Hinweis „Please wait … second(s) before the next request.".

### Expert Mode (optional)

Es gibt einen optionalen **Expert Mode** mit einem selbst betriebenen lokalen Proxy (`LocalProxy` auf `http://127.0.0.1:<port>`). Ist er aktiv, holt dieser lokale Proxy die Seite statt des JPKCom-Servers — die clientseitige Rate-Drossel wird dann übersprungen. Die Einrichtung ist fortgeschritten und für den normalen Betrieb nicht nötig.

## Grenzen — kompakt

- **Sprach-Auswahl ist manuell.** Es gibt keine inhaltsbasierte Auto-Erkennung; nach einem URL-Load steht die Sprache immer auf HTML.
- **URL-Laden nur für öffentliche http(s)-Seiten.** Kein Login-Bereich, kein `localhost`/Intranet, nur HTTP/HTTPS, max. ~950 KB, 15 s Timeout, ~1 Anfrage/Sekunde.
- **Beautify ist sprachabhängig.** Es greifen die CSS-, HTML- oder JS-Routinen — andere Sprachen werden nicht „verschönert".
- **Preview nur für Text/Markdown.** Bei allen anderen Sprachen ist der Vorschau-Button deaktiviert.
- **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](https://www.jpkc.com/db/tools/source/), für konkrete Abläufe die [Beispiele](https://www.jpkc.com/db/tools/source/examples/) und für Kniffe die [Tipps & Tricks](https://www.jpkc.com/db/tools/source/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/source/).