Ein Bild kann mehr als tausend Worte sagen und Ihre Kenntnisse im Programmcode_html5-Tutorial verbergen

Ich habe kürzlich mein erstes Webspiel entwickelt: ein HTML5-Videopuzzle. Der Entwicklungsprozess war interessant. Ich mag das Programmieren, aber nach der Implementierung der Spiellogik hatte ich eine interessante Idee: Warum nicht einen Weg finden, den Code zu verbergen? Zuerst dachte ich an etwas ganz Einfaches, wie zum Beispiel das Kontextmenü zu deaktivieren, damit der Quellcode der Seite angezeigt werden kann, wenn man mit der rechten Maustaste klickt. Aber das macht keinen Sinn, das Rechtsklick-Menü funktioniert nicht und die Leute können den Quellcode immer noch über Tastaturkürzel oder „Quelle anzeigen“ in der Menüleiste anzeigen.

Ein Bild sagt mehr als tausend Worte

Es kommt auf die Größe des Bildes an. Aber ich habe mich entschieden, den Quellcode zu verschlüsseln und in einem Bild zu speichern. Die HTML5-Canvas-Komponente ist für solche Dinge sehr gut geeignet, da sie Operationen an Bildpixeln unterstützt. Ein Pixel wird durch vier Werte (Kanäle) dargestellt: Rot, Grün, Blau und Alphakanal. Ihre Werte sind von 0 bis 255 verteilt. Mein Javascript-Code ist ein Zeichen und jedes Zeichen hat einen entsprechenden ASCII-Wert. Der Bereich der ASCII-Werte liegt ebenfalls zwischen 0 und 255. Ich möchte also jedes Pixel auf der Leinwand durchlaufen und den ASCII-Wert von 3 Codezeichen für jedes Pixel als RGB-Wert festlegen die charCodeAt-Funktion. Nehmen Sie diese Zeichen heraus.

Code kopieren

Der Code lautet wie folgt:

.charCodeAt(0)

Was erzeugt wird, ist ein buntes und kleines Bild. Es ist mein Programmcode:

Beim Dekodieren muss ich nur dieses Bild auf die Leinwand zeichnen und Pixel durchlaufen Punkte, nehmen Sie die durch die Werte r, g, b dargestellten Zeichen heraus:

Kopieren Sie den Code

Der Code lautet wie folgt :

String.fromCharCode(code)

Verketten Sie sie zu einem großen String, und das ist Ihr Code – ausführbarer Code.

Schützt dies Ihren Quellcode?

Eigentlich nein – ein erfahrener (oder sogar unerfahrener) Programmierer kann immer noch herausfinden, wie man das Bild dekodiert und den darin enthaltenen Code extrahiert, aber ich denke, das dient dazu, diejenigen mit schlechten Geschäftsabsichten zu verhindern. Der erste Schritt damit jemand Ihren Code stiehlt – und die Programmierer, die (meistens) herausfinden können, wie man ihn dekodiert, sind nicht da, um zu stehlen

Der Hauptfehler dieser Methode
Diese Technologie kann kann nur in modernen Browsern angewendet werden, die die HTML5-Canvas-Technologie unterstützen. Es wird definitiv nicht in IE6 und IE8 funktionieren. Sogar einige moderne Browser haben Probleme mit der Kodierung des Alphakanals von Bildern, sodass Sie nur 3 Zeichen pro Pixel eingeben können – ein 100×100-Bild kann 30.000 Textzeichen speichern.

Haben Sie andere einfache Möglichkeiten, um zu verhindern, dass andere Ihren Code kopieren? Natürlich können wir Zeichen verschlüsseln, aber wie stellen wir sicher, dass Ihre Entschlüsselungsschritte nicht einfach geknackt werden können? Sag mir, was du denkst!