Quellcode verschleiern/unleserlich machen und komprimieren

humanduck (47)in #deutsch • 7 years ago (edited)

Quellcodeverschlüsselung

Wenn du Angst davor hast, dass dein HTML , Javascript, oder CSS Quellcode geklaut wird oder du einfach nicht jedem Zugriff auf ihn ermöglichen willst, bist du hier GENAU richtig!!!

Als Beispiel möchte ich eine von mir extra für dieses Tutorial erstellte Website nutzen. Unverschlüsselt sieht sie so aus :

und der dazugehörige Quellcode so :

<!DOCTYPE html>
 <html lang="de">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tutorial</title>

   </head>
   <body>
        <h1>WILLKOMMEN AUF MEINER SEITE</h1>
                <table style="font-size: 2em; border="2"; border align="center">
            <tr><th colspan="3"><h2>Steckbrief</h2></th></tr>
            <tr>
                <td>ergqerg :</td>
                <td colspan="2">asdsad</td>
            </tr>
            <tr>
                <td>Familienname :</td>
                <td colspan="2">asd</td>
            </tr>
            <tr>
                <td>QERGQERG :</td>
                <td colspan="2">QERGERQG</td>
            </tr>
            <tr>
                <td>QEGQEG :</td>
                <td colspan="2"><img src="https://i.imgur.com/0t5ZJ94.jpg" width="500px"></img></td>
            </tr>
            <tr>
                <td>QERGERQG :</td>
                <td colspan="2">DFGWRTG</td>
            </tr>
            <tr>
                <td>QERGQERG :</td>
                <td colspan="2">QREGQRG <img src="https://html-online.com/editor/tinymce4_6_5/plugins/emoticons/img/smiley-cool.gif" alt="cool" /></td>
            </tr>
            <tr>
                <td>QERG :</td>
                <td colspan="2">QREGQRG</td>
            </tr>
            <tr>
                <td>EGEQHH :</td>
                <td colspan="2">QERG</td>
            </tr>
            <tr>
                <td>REQQREG</td>
                <td colspan="2">hgDBF</td>
            </tr>
            <tr>
                <td>gdfgag</td>
                <td>asd</td>
                <td>sad</td>
            </tr>
            <tr>
                <td>Lieblingsfach :</td>
                <td colspan="2">asd</td>
            </tr>
            <tr>
                <td>Traumberuf :</td>
                <td colspan="2">asasd</td>
            </tr>   
            <tr>
                <td><a href="Geschichte1.html">Geschichte 1</a></td>
                <td><a href="Geschichte2.html">Geschichte 2</a></td>
                <td><a href="Geschichte3.html">Geschichte 3</a></td>
            </tr>   
        </table>
   </body>
 </html>

Der Code ist gut für jeden sichtbar und bereits von mir sehr schön formatiert, also optimal kopierbar und erneut einsetzbar.
Um dies zu verhindern nutzen wir Javascript. Wir wollen nämlich den gesamten Code zwischen den tags mit Javascript verschlüsseln und dann wieder in einsetzen. Falls wir es noch nicht gemacht haben, weisen wir jetzt dem tag eine Id zu, indem wir den tag umschreiben zu

Dann erstellen wir mit den tags Platz für unser Javascript welches wir zwischen die <head></head> tags setzen, was dann wie folgt aussieht : Doch bevor wir mit dem Script weitermachen, formatieren wir unseren Code so, dass wir ihn verschlüsseln können.

Dazu benutzen wir ein "Suchen und Einsetzen"-Tool unserer Wahl und suchen in unserem Code nach einem Anführungszeichen" und ersetzen dieses durch /" . Dadurch stören wir unseren Javascript Code später nicht.

Nun möchte ich zurück zu dem Script kommen und eine Website vorstellen, die wir zum Verschlüsseln nutzen werden .
Hier erst einmal der Link zur webpage : https://nur.gratis/online-tools/jsPacker.htm

Wenn man diese öffnet, sollte sie so aussehen :

Bevor wir unseren Code in das Feld

hinein kopieren, schreiben wir window.onload = function what(){ document.getElementById("beliebige_Id").InnerHTML = " hinein, dann den Code und dann ";};. Dieses Stück extra Code bewirkt, dass wir mit unserem Script den Code auch in den einsetzen!

Danach haben wir verschiedene Verschlüsselungsmöglichkeiten :

Dort wählen wir eine beliebige Möglichkeit aus und klicken auf das darunter liegende Feld "UND LOS...!" .

Unseren verschlüsselten Code finden wir jetzt in dem untersten Textfeld :

Der Code sieht in meinem Fall jetzt so aus :

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('P.M=L K(){J.I(\'H\').G=\'<n>F E D B</n><c r=\\"A-z: y; m=\\"2\\"; m x=\\"w\\"><4><k 5=\\"3\\"><l>v</l></k></4><4><0>t :</0><0 5=\\"2\\">s</0></4><4><0>N :</0><0 5=\\"2\\">9</0></4><4><0>h :</0><0 5=\\"2\\">g</0></4><4><0>O :</0><0 5=\\"2\\"><6 p=\\"f://i.Q.e/1b.1a\\" 19=\\"18\\"></6></0></4><4><0>g :</0><0 5=\\"2\\">16</0></4><4><0>h :</0><0 5=\\"2\\">o <6 p=\\"f://7-13.e/11/10/Z/Y/6/W-d.V\\" U=\\"d\\" /></0></4><4><0>j :</0><0 5=\\"2\\">o</0></4><4><0>R :</0><0 5=\\"2\\">j</0></4><4><0>q</0><0 5=\\"2\\">C</0></4><4><0>S</0><0>9</0><0>T</0></4><4><0>X :</0><0 5=\\"2\\">9</0></4><4><0>12 :</0><0 5=\\"2\\">14</0></4><4><0><a b=\\"15.7\\">8 1</a></0><0><a b=\\"17.7\\">8 2</a></0><0><a b=\\"u.7\\">8 3</a></0></4></c>\'};',62,74,'td||||tr|colspan|img|html|Geschichte|asd||href|table|cool|com|https|QERGERQG|QERGQERG||QERG|th|h2|border|h1|QREGQRG|src|REQQREG|style|asdsad|ergqerg|Geschichte3|Steckbrief|center|align|2em|size|font|SEITE|hgDBF|MEINER|AUF|WILLKOMMEN|innerHTML|beliebige_Id|getElementById|document|what|function|onload|Familienname|QEGQEG|window|imgur|EGEQHH|gdfgag|sad|alt|gif|smiley|Lieblingsfach|emoticons|plugins|tinymce4_6_5|editor|Traumberuf|online|asasd|Geschichte1|DFGWRTG|Geschichte2|500px|width|jpg|0t5ZJ94'.split('|'),0,{}))

Abschließend kopieren wir den Code zwischen unsere tags und können dann unser Programm erneut starten.

Unsere Websites werden identisch aussehen, aber der Quellcode hat sich verändert!

Neuer Quellcode :

<!DOCTYPE html>
 <html lang="de">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tutorial</title>
    <script>eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('P.M=L K(){J.I(\'H\').G=\'<n>F E D B</n><c r=\\"A-z: y; m=\\"2\\"; m x=\\"w\\"><4><k 5=\\"3\\"><l>v</l></k></4><4><0>t :</0><0 5=\\"2\\">s</0></4><4><0>N :</0><0 5=\\"2\\">9</0></4><4><0>h :</0><0 5=\\"2\\">g</0></4><4><0>O :</0><0 5=\\"2\\"><6 p=\\"f://i.Q.e/1b.1a\\" 19=\\"18\\"></6></0></4><4><0>g :</0><0 5=\\"2\\">16</0></4><4><0>h :</0><0 5=\\"2\\">o <6 p=\\"f://7-13.e/11/10/Z/Y/6/W-d.V\\" U=\\"d\\" /></0></4><4><0>j :</0><0 5=\\"2\\">o</0></4><4><0>R :</0><0 5=\\"2\\">j</0></4><4><0>q</0><0 5=\\"2\\">C</0></4><4><0>S</0><0>9</0><0>T</0></4><4><0>X :</0><0 5=\\"2\\">9</0></4><4><0>12 :</0><0 5=\\"2\\">14</0></4><4><0><a b=\\"15.7\\">8 1</a></0><0><a b=\\"17.7\\">8 2</a></0><0><a b=\\"u.7\\">8 3</a></0></4></c>\'};',62,74,'td||||tr|colspan|img|html|Geschichte|asd||href|table|cool|com|https|QERGERQG|QERGQERG||QERG|th|h2|border|h1|QREGQRG|src|REQQREG|style|asdsad|ergqerg|Geschichte3|Steckbrief|center|align|2em|size|font|SEITE|hgDBF|MEINER|AUF|WILLKOMMEN|innerHTML|beliebige_Id|getElementById|document|what|function|onload|Familienname|QEGQEG|window|imgur|EGEQHH|gdfgag|sad|alt|gif|smiley|Lieblingsfach|emoticons|plugins|tinymce4_6_5|editor|Traumberuf|online|asasd|Geschichte1|DFGWRTG|Geschichte2|500px|width|jpg|0t5ZJ94'.split('|'),0,{}))
</script>
   </head>
   <body Id="beliebige_Id">
   </body>
 </html>

Zugehörige Website :

Wie wir sehen, ist dieser Code quasi nicht lesbar oder zumindest für Fremde absolut unbrauchbar !
Aber Achtung dieses Verfahren schützt nicht komplett da man in dem Chrome und jedem anderen Browser auch unter "Untersuchen" sich den Code angucken kann da gegen sind wir machtlos wir können aber probieren dem Angreifer seinen Angriff zu erschweren indem wir beispielsweise die "rechte Maustaste" zu blockieren.
Hier bei muss man aber aufpassen das man keine anderen wichtigen Funktionen unterdrückt oder Nutzer verschreckt. Daher sind solche Scripts mit Vorsicht zu genießen!

Dennoch hier eine Anleitung zu der Blockierung der rechten Maustaste, das folgende Script können wir genauso verschlüsseln wie oben beschrieben nur das wir dieses nicht mehr formatieren müssen!
Das Script zur Verhinderung der rechten Maustaste sieht so aus :

function DoFalse(){alert('Nicht möglich!'); return(false)}

       
if(document.layers)
{
 document.captureEvents(Event.MOUSEDOWN);
 document.onmousedown=DoFalse();
}

oder verschlüsselt so :

eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('e 1(){d(\'c böa!\');9(8)}7(0.6){0.5(4.3);0.2=1()}',15,15,'document|DoFalse|onmousedown|MOUSEDOWN|Event|captureEvents|layers|if|false|return|glich|m|Nicht|alert|function'.split('|'),0,{}))

Es gilt zu beachten das wir unseren <body> tag der im Moment so aussehen sollte <body Id="beliebige_Id"> noch onMouseDown="return DoFalse();" hinzufügen müssen so dass er dann so aussieht <body Id="beliebige_Id" onMouseDown="return DoFalse();"> .

Als kleines Fazit möchte ich noch sagen das ein totaler und sicherer Schutz nicht möglich ist, aber das man es dem Angreifer durchaus schwerer machen kann!

Abschließend möchte ich mich bedanken, dass Du es bis hierhin geschafft hast und würde mich sehr über konstruktive Kritik in den Kommentaren und/oder upvotes freuen.

Hier noch ein wenig Werbung für meinen dtube Kanal, auf dem ich auch das gleiche Thema bearbeitet habe :

#de-stem

7 years ago in #deutsch by humanduck (47)

$8.98

Sort:

Trending

[-]

targodan (51) 7 years ago (edited)

Hallo, schöner Post. Allerdings muss ich doch anmerken, dass das ja kein echtes Sicherheitsfeature ist.

Schauen wir uns das mal auf JSFiddle an: Einfach hier klicken
Wenn man jetzt per Rechtsklick auf die anzeige unten rechts klickt und dann "Untersuchen" im Chrome oder "Element untersuchen" im Firefox klickt sieht man den ganzen HTML-Code im Klartext.

Unterm strich ist es leider nicht möglich Webseitencode un-klaubar zu machen. Man kann es höchstens mit mehr und mehr Schichten "schützen" bis dem der den Code will, die Lust vergeht.

Letzten Endes muss der Browser es ja entschlüsseln um die Seite überhaupt anzeigen zu können. Und wenn der Browser den Code kennt, dann kann auch der User dran kommen.

$2.05

6 votes

[-]

targodan (51) 7 years ago

Nachdem @humanduck den Artikel etwas überarbeitet hat. Bin ich der Meinung inklusive Rechtsklick-Schutz sollte es relativ sicher sein. Das sollte vor Anfängern schützen, die sich mal eben was klauen können. Die Leute wiederum, die wissen wie man das umgeht würden sich wahrscheinlich nicht die Mühe machen, sondern den Code selber schreiben.

:thumbsup:

$0.00

2 votes

[-]

alexzeigt (41) 7 years ago

Man sollte auch bedenken, wenn man es verschlüsseln muss und es gewisse Performance braucht verbraucht das auch Performance im Webbrowser beim entschlüsseln.
Und ich muss ganz ehrlich sagen, dass es mir wichtiger ist dass der User das beste empfinden auf der Homepage hat.
Glaube nicht dass es irgendeine Webseite gibt die wirklich es braucht, dass man den Quellcode schützt. Finde solche Taktiken zeugen eher von dämlichen Admins die denken, dass ihr Quellcode jetzt total sicher vor Diebstahl wäre.
Und durch normalen Javascript Quellcode durch zu steigen ist schon die Hölle :P

$0.00

1 vote

[-]

humanduck (47) 7 years ago

Jo nochmal danke für den Hinweis

$0.00

1 vote

[-]

humanduck (47) 7 years ago

Hat er recht :)

$0.00

1 vote

[-]

steemstem-bot (57) 7 years ago

This is a test comment, notify @kryzsec on discord if there are any errors please.

		Guidelines	Project Update

Being A SteemStem Member

$1.06

1 vote

[-]

stero (25) 7 years ago

Wo und wie hättest du HTML gelernt, wenn alle ihren HTML-Quelltext verschlüsseln würden. Ist deiner wirklich so einzigartig? Sei doch einfach stolz darauf, wenn sich jemand von deinem Quellcode inspirieren lässt :)

$0.00

STEEM 0.17

TRX 0.16

JST 0.029

BTC 62134.47

ETH 2417.18

USDT 1.00

SBD 2.54

Quellcode verschleiern/unleserlich machen und komprimieren

Quellcodeverschlüsselung

Coin Marketplace