Une image peut dire mille mots et cacher les compétences du didacticiel code_html5 de votre programme

J'ai récemment développé mon premier jeu web : un puzzle vidéo HTML5. Le processus de développement était intéressant. J'aime la programmation, mais après avoir implémenté la logique du jeu, j'ai eu une idée intéressante : pourquoi ne pas trouver un moyen de cacher le code ? Au début, j'ai pensé à quelque chose de très simple, comme désactiver le menu contextuel pour que le code source de la page puisse être visualisé lors d'un clic droit. Mais cela n'a aucun sens, le menu contextuel ne fonctionne pas et les utilisateurs peuvent toujours afficher le code source via des raccourcis clavier ou "Afficher la source" dans la barre de menu.

Une image peut dire mille mots

Cela dépend de la taille de l'image. Mais j'ai décidé de chiffrer le code source et de le stocker dans une image. Le composant HTML5 Canvas est très adapté à ce genre de choses car il prend en charge les opérations sur les pixels de l'image. Un pixel est représenté par quatre valeurs (canaux) : rouge, vert, bleu et canal alpha. Leurs valeurs sont distribuées de 0 à 255. Mon code Javascript est un caractère et chaque caractère a une valeur correspondante ASCII. La plage des valeurs ASCII est également comprise entre 0 et 255, donc ce que je veux faire est de parcourir chaque pixel sur le canevas et de définir la valeur ASCII de 3 caractères de code pour chaque pixel comme valeur RVB. Vous pouvez facilement le faire via. la fonction charCodeAt. Supprimez ces caractères.

Copier le code

Le code est le suivant :

.charCodeAt(0)

Ce qui est généré est une petite image colorée. C'est mon code de programme. Jetez un oeil :

Lors du décodage, il me suffit de dessiner cette image sur la toile et de parcourir Pixel. points, retirez les caractères représentés par les valeurs r, g, b :

Copiez le code

Le code est le suivant :

String.fromCharCode(code)

Concaténez-les en une grande chaîne, et voici votre code - code exécutable.

Est-ce que cela protège votre code source ?

En fait non - un programmeur expérimenté (ou même inexpérimenté) peut toujours comprendre comment décoder l'image et extraire le code à l'intérieur, mais je pense que c'est pour empêcher ceux qui ont de mauvaises intentions commerciales La première étape pour que quelqu'un vole votre code - et les programmeurs qui savent comment le décoder (pour la plupart) ne sont pas là pour voler

Le principal défaut de cette méthode
Cette technologie peut ne sera appliqué que dans les navigateurs modernes prenant en charge la technologie de canevas HTML5. Cela ne fonctionnera certainement pas dans IE6 et IE8. Même certains navigateurs modernes ont des problèmes avec l'encodage du canal alpha des images, vous ne pouvez donc mettre que 3 caractères par pixel - une image 100×100 peut stocker 30 000 caractères de texte.

Avez-vous d'autres moyens simples d'empêcher les autres de copier votre code ? Bien sûr, nous pouvons chiffrer les caractères, mais comment garantir que vos étapes de décryptage ne peuvent pas être facilement déchiffrées ? Dites-moi ce que vous en pensez !