Was ist ein Binäreditor?

Ein Binäreditor ist ein Werkzeug, mit dem sich Dateien direkt in hexadezimaler oder ASCII-Notation bearbeiten lassen. Während ein normaler Texteditor „Zeichenketten“ als Einheit behandelt, greift ein Binäreditor auf die rohen Bytefolgen einer Datei zu und erlaubt es, Bits oder Bytes an beliebiger Position zu ändern.

In der Softwareanalyse, bei Datenrettung oder Protokollforschung sind solche Tools unverzichtbar. Als GUI-Anwendungen sind etwa HxD oder Binary Ninja bekannt. Mein Ziel war diesmal jedoch ein Binäreditor, der komplett im Browser läuft und in einer einzigen Datei steckt.

Umsetzungsstrategie

  • Vollständig clientseitig (keine Übertragung nach außen)
  • Lokale Dateien über die FileReader-API laden
  • Links Hexadezimalwerte (Hex), rechts ASCII anzeigen
  • Klick startet den Bearbeitungsmodus, Werte lassen sich direkt überschreiben
  • Geänderte Zellen rot hervorheben
  • Zwischen Hex- und ASCII-Bearbeitung umschalten
  • Das Ergebnis wieder als Datei herunterladen können

Stolpersteine und wie ich sie behoben habe

1. Verschobener Bearbeitungsrahmen

In der ersten Version war der gelbe Rahmen der aktiven Zelle minimal verrutscht und wirkte schief. Schuld waren line-height und das flex-Layout in CSS: die Basislinie des Glyphen und die des Rahmens lagen nicht exakt übereinander. Obwohl ich auf eine Monospace-Schrift setzte, kann die Browser-Renderpipeline je nach Font den Baseline-Offset variieren – der Rahmen wanderte sichtbar nach oben oder unten.

Die Lösung war, vertical-align: middle zu erzwingen und die Zelle als inline-block auszugeben, sodass die Höhen übereinstimmen.

.hex-cell.editing {
  outline: 2px solid yellow;
  vertical-align: middle;
}

2. ESC schreibt plötzlich Zeichen in die Zelle

In der frühen Fassung fügte ein Druck auf ESC im Bearbeitungsmodus Zeichen wie „EE“ ein.

Der Grund: Ich fing das keydown-Event nicht ab, sodass der Browser den Tastencode direkt an die Eingabelogik durchreichte. Meine Routine erwartete nur 0–9 sowie A–F. Doch auch Escape hat einen Tastencode (keyCode = 27 bzw. key = "Escape"). Ohne Schutz interpretierte der Handler das als Zeichen "E", also landete "EE" in der Zelle.

Die Korrektur ist simpel: Das keydown-Event auf Escape prüfen, die Bearbeitung abbrechen und den Standard-Flow blockieren.

document.addEventListener("keydown", e => {
  if (e.key === "Escape") {
    cancelEdit();
    e.preventDefault(); // nicht in den generischen Eingabepfad fallen lassen
  }
});

Seitdem beendet ESC ausschließlich den Editiermodus und schreibt nichts mehr.

3. Rote Markierungen bleiben nach dem Neuladen

Nach dem Bearbeiten einer Datei und dem Laden einer anderen blieben die roten Highlights sichtbar.

Die Ursache: Das Array bzw. der State für geänderte Zellen wurde beim Laden einer neuen Datei nicht zurückgesetzt. Nur die Ansicht zu leeren reichte nicht; die „modifiziert“-Flags blieben bestehen und ließen die neue Datei bearbeitet wirken.

Direkt nach dem Laden clearModifiedState() aufzurufen, löscht die Flags und stellt das neutrale Styling wieder her.

4. Wechsel zwischen HEX- und ASCII-Modus

Anfangs konnten Hex- und ASCII-Werte parallel editiert werden. Das machte unklar, welche Eingabe Vorrang hat, und führte dazu, dass derselbe Bytewert über zwei Routen konkurrierend überschrieben wurde. ASCII-Eingaben aktualisierten sofort die Hex-Darstellung, aber während der Eingabe entstand kurzzeitig ein inkonsistentes Bild.

Um das zu vermeiden, gibt es jetzt einen expliziten Selektor für den Modus, Standard ist Hex. So ist immer klar: „Ich tippe gerade Hex-Werte“, und die Synchronisation bleibt simpel.

Ein Blick in den Kerncode

Die Bearbeitungsroutine sieht am Ende so aus:

function applyEdit(offset, newValue) {
  if (mode === "hex") {
    buffer[offset] = parseInt(newValue, 16);
  } else {
    buffer[offset] = newValue.charCodeAt(0);
  }
  markModified(offset);
  render();
}

markModified(offset) kümmert sich um die rote Hervorhebung. Die Funktion prüft schlicht, ob sich der Wert verändert hat, und vergibt bei Bedarf eine CSS-Klasse.

Fazit

Der Browser-Binäreditor läuft offline und verarbeitet alles clientseitig – ein sicheres reines Client-Tool.

  • Ideal für kleine Binärfixes ohne zusätzliche Installation
  • Geeignet für Analysen in abgeschotteten Umgebungen, wo keine nativen Apps installiert werden dürfen
  • Nützlich im Unterricht, wenn Bytefolgen greifbar werden sollen

Für diese Szenarien spielt der Editor seine Stärken aus.