Mikä on binäärimuokkain?

Binäärimuokkain on työkalu, jolla tiedostoa voi muokata suoraan heksadesimaalisessa tai ASCII-esityksessä. Siinä missä tavallinen tekstieditori käsittelee “merkkijonoja”, binäärimuokkain antaa pääsyn tiedoston raakaan tavujonoon ja mahdollistaa bittien ja tavujen muuttamisen mielivaltaisesta kohdasta.

Binäärimuokkaimet ovat korvaamattomia ohjelmistoanalyysissa, tietojen palautuksessa ja protokollien tutkimisessa. Graafisista sovelluksista HxD ja Binary Ninja ovat tunnettuja nimiä. Tällä kertaa tavoitteeni oli kuitenkin selainpohjainen, yhteen tiedostoon pakattu binäärimuokkain.

Toteutuslinjaukset

  • Täysin asiakaspuolella (ei verkkosiirtoja)
  • Paikallisen tiedoston lukeminen FileReader-rajapinnalla
  • Vasemmalla heksadesimaali (Hex), oikealla ASCII
  • Klikkaus avaa muokkaustilan ja arvot voi kirjoittaa suoraan päälle
  • Muokatut solut korostetaan punaisella
  • Vaihdettavissa HEX- ja ASCII-muokkaustilojen välillä
  • Muokattu sisältö voidaan ladata uudelleen tiedostona

Kompastukset ja korjaukset

1. Muokkauskehyksen vinoutuminen

Ensimmäisessä versiossa aktiivista solua ympäröivä keltainen kehys oli hieman sivussa ja näytti oudolta. Syynä olivat CSS:n line-height ja flex-asettelu: kirjaimen perusviiva ja kehyksen referenssipiste eivät osuneet yhteen. Vaikka käytin monospace-fonttia, selainten renderöinti asettaa fonttien perusviivan hieman eri kohtiin, mikä johti kehyksen siirtymään ylös- tai alaspäin.

Ratkaisin ongelman pakottamalla vertical-align: middle -asetuksen ja muuttamalla solun inline-block-elementiksi, jolloin korkeudet täsmäsivät.

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

2. ESC-näppäin kirjoitti merkkejä

Alkuperäisessä toteutuksessa ESC:n painaminen muokkaustilan aikana syötti soluun merkkejä, kuten “EE”.

Taustalla oli se, etten kuunnellut keydown-tapahtumaa. Selain välitti painetun näppäimen koodin suoraan syöterutiinille, joka hyväksyi oletusarvoisesti 0–9 ja A–F. Escape-näppäimellä on kuitenkin oma koodinsa (vanhassa toteutuksessa keyCode=27, nykyisin key="Escape"), ja se tulkittiin merkiksi "E", jolloin soluun ilmestyi "EE".

Ratkaisuna otin ESC:n kiinni keydown-tapahtumassa ja kutsuin solun muokkauksen peruutusta.

document.addEventListener("keydown", e => {
  if (e.key === "Escape") {
    cancelEdit();
    e.preventDefault(); // estetään syötteen päätyminen varsinaiseen käsittelijään
  }
});

Näin ESC toimii pelkkänä “poistu muokkauksesta” -komentona eikä kirjoita merkkejä.

3. Punainen korostus jäi päälle uudessa tiedostossa

Kun tiedoston luki, muokkasi ja sen jälkeen avasi toisen tiedoston, edelliset punaiset korostukset jäivät näkyviin.

Syynä oli, etten alustanut muokattuja soluja seuraavaa tiedostoa varten. Taulukko ja tilamuuttujat, jotka seurasivat muutettuja soluja, eivät nollaantuneet latauksen yhteydessä, joten uusi tiedosto periytyi punaisen korostuksen.

Lisäsin tiedoston luvun jälkeen kutsun clearModifiedState()-funktioon, joka resetoi kaikki muutostilamerkinnät.

4. HEX- ja ASCII-tilojen sekavuus

Ensimmäisessä versiossa HEX- ja ASCII-syötöt olivat samanaikaisesti käytettävissä, mikä hämäsi käyttäjää siitä, mikä arvo oli “voimassa”. Koska samaa tavua käsiteltiin kahden lomake-elementin kautta, sama solu saattoi päivittyä kahdesta eri reitistä. ASCII-syöte kirjasi uuden arvon ja korvasi heksan, mutta keskeneräinen syöte näkyi tilapäisesti ristiriitaisena tilana.

Selkeytin toimintaa lisäämällä erillisen tilanvalitsimen ja asetin oletustilaksi HEX-muokkauksen. Näin käyttäjä tietää tarkalleen, kumpaa formaattia hän kirjoittaa, ja synkronointi pysyy suoraviivaisena.

Pätkä koodia

Varsinainen muokkauslogiikka näyttää tältä:

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

markModified(offset) huolehtii punaisesta korostuksesta vertaamalla arvoa alkuperäiseen ja lisäämällä luokan, jos arvo muuttuu.

Yhteenveto

Selainpohjainen binäärimuokkain toimii offline-tilassa ja on turvallinen, koska kaikki tapahtuu asiakkaan laitteessa.

  • Nopeisiin binäärimuutoksiin
  • Kun työympäristö ei salli erillisten sovellusten asennusta
  • Kun opetuksessa tai oppimisessa halutaan havainnollistaa tavujonoja

Näissä tilanteissa työkalu pääsee oikeuksiinsa.