Comment masquer le code javascript dans une page Web?

94

Est-il possible de masquer le code Javascript du html d'une page Web, lorsque le code source est visualisé via la fonction Afficher la source du navigateur?

Je sais qu'il est possible d'obscurcir le code, mais je préférerais qu'il soit caché de la fonction de source de vue.

arun nair
la source
1
il client et donc il résidera sur tous les clients (navigateurs)
naveen
8
Pourquoi voudriez-vous cacher Javascript? Ce n'est pas comme si vous aviez déjà mis des données sensibles que vous ne voulez pas que l'utilisateur y trouve ... Non?
Paul
1
Comment un navigateur sait-il quel Javascript exécuter?
Wylie
1
@PaulPRO a un bon point - pourquoi voudriez-vous cacher JavaScript? Quiconque veut savoir ce que vous faites sera TOUJOURS en mesure d'obtenir votre script en quelques touches. Ils ne s'appuieront pas uniquement sur View-Source. Quiconque ne sait pas comment obtenir un script ne s'y intéressera probablement pas de toute façon.
Stephen Chung
1
@UdayHiwarale Il est très facile de voir quelles sont les requêtes GET et autres requêtes HTTP effectuées par le client (il suffit d'ouvrir la console de développement et d'aller dans l'onglet réseau). Lors du développement d'un site Web, vous devez supposer sur le serveur que toutes les demandes sont forgées par un attaquant - et par conséquent, vous devez valider toutes les données et échapper soigneusement chaque chaîne que vous épissez en SQL ou autre code.
Suzanne Dupéron

Réponses:

131

Je ne suis pas sûr que quelqu'un d'autre ait répondu directement à votre question, à savoir le code affiché à partir de la commande Afficher la source du navigateur.

Comme d'autres l'ont dit, il n'y a aucun moyen de protéger le javascript destiné à s'exécuter dans un navigateur à partir d'un spectateur déterminé. Si le navigateur peut l'exécuter, toute personne déterminée peut également le visualiser / l'exécuter.

Mais, si vous mettez votre javascript dans un fichier javascript externe qui est inclus avec:

<script type="text/javascript" src="http://mydomain.com/xxxx.js"></script>

balises, alors le code javascript ne sera pas immédiatement visible avec la commande Afficher la source - seule la balise de script elle-même sera visible de cette façon. Cela ne signifie pas que quelqu'un ne peut pas simplement charger ce fichier javascript externe pour le voir, mais vous avez demandé comment le garder hors de la commande Afficher la source du navigateur et cela le fera.

Si vous vouliez vraiment améliorer l'affichage de la source, vous feriez tout ce qui suit:

  1. Mettez-le dans un fichier .js externe.
  2. Masquez le fichier afin que la plupart des noms de variables natives soient remplacés par des versions courtes, de sorte que tous les espaces inutiles soient supprimés, de sorte qu'il ne puisse pas être lu sans traitement supplémentaire, etc.
  3. Incluez dynamiquement le fichier .js en ajoutant par programmation des balises de script (comme le fait Google Analytics). Cela rendra encore plus difficile d'accéder au code source à partir de la commande Afficher la source car il n'y aura pas de lien facile à cliquer.
  4. Mettez autant de logique intéressante que vous souhaitez protéger sur le serveur que vous récupérez via des appels ajax plutôt que de faire un traitement local.

Cela dit, je pense que vous devriez vous concentrer sur les performances, la fiabilité et rendre votre application géniale. Si vous devez absolument protéger un algorithme, placez-le sur le serveur, mais à part cela, rivaliser pour être le meilleur de vous, pas en ayant des secrets. C'est finalement ainsi que fonctionne le succès sur le Web de toute façon.

jfriend00
la source
2
Belle façon de répondre directement à la question. L'utilisation de JavaScript pour générer le <script>permettrait de mieux le garder hors de la vue source (toujours visible sous le DOM en direct) - c'est-à-dire qu'il ne peut pas être simplement "cliqué avec le bouton droit de la souris" dans la vue source. Il est possible que ledit <script>élément soit supprimé une fois que le JavaScript est exécuté, ce qui rend légèrement plus fastidieux (mais pas impossible) l'obtention du code d'origine ... bien sûr, le trafic net apparaîtra très facilement dans Firebug ou similaire ;-)
3
@Quentin - votre URL de source de vue est idiote - ce n'est pas ce qui est demandé ou proposé ici. Toute personne peut consulter le code. Je l'ai dit autant que n'importe qui d'autre. La question est seulement de savoir dans quelle mesure c'est facile et, selon la question spécifique posée, dans quelle mesure est-il visible lorsque quelqu'un fait View Source? Ma suggestion en fait une étape supprimée de View Source - c'est tout, mais c'est une étape supplémentaire valable.
jfriend00
fetch ("SCRIPT TO HIDE URL or DATAURL"). then (function (t) {return t.text () || false;}). then (c => self [atob ("ZXZhbA")] (c))
Zibri
Je pense que nous pouvons également ajouter oncontextmenu = 'return false;' dans la balise html.
falero80s
@ falero80s - Cela tente d'arrêter le menu contextuel, mais n'interrompt pas toutes les autres façons de voir la source de la page.
jfriend00
38

Non, ce n'est pas possible.

Si vous ne le donnez pas au navigateur, alors le navigateur ne l'a pas.

Si vous le faites, alors il (ou une référence facile à suivre) fait partie de la source.

Quentin
la source
4
Je ne suis pas sûr que cette réponse ait vraiment répondu à la question posée (même si elle a obtenu 10 votes positifs en 15 minutes). Ils ont demandé comment garder le code hors de la commande Afficher la source des navigateurs. C'est possible. Voir ma réponse ci-dessous. Ils n'ont pas demandé comment empêcher le code d'être vu par un pirate informatique déterminé.
jfriend00
8
Il ne faut pas beaucoup de détermination pour cliquer sur le lien dans la source d'affichage d'un document HTML pour accéder à la source d'affichage du script.
Quentin
À mon avis, la question n'a pas été interprétée correctement. La création d'un fichier JS est courante, ce que l'utilisateur veut ici (je pense) est de savoir comment masquer toute valeur de variable JS lorsque l'une d'entre elles choisit l'option "Afficher la source de la page". +1 de mon côté.
shaILU
Cette réponse n'a aucun sens. il vaut mieux donner une suggestion ici. Meilleure option pour utiliser un fichier externe.
Lalit Mohan
15

Ma solution est inspirée du dernier commentaire. C'est le code de invisible.html

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="invisible_debut.js" ></script>
<body>
</body>

Le code clair de invisible_debut.js est:

$(document).ready(function () {
var ga = document.createElement("script"); //ga is to remember Google Analytics ;-)
ga.type = 'text/javascript';
ga.src = 'invisible.js';
ga.id = 'invisible';
document.body.appendChild(ga);
$('#invisible').remove();});

Notez qu'à la fin, je supprime le script créé. invisible.js est:

$(document).ready(function(){
    alert('try to find in the source the js script which did this alert!');
    document.write('It disappeared, my dear!');});

invisible.js n'apparaît pas dans la console, car il a été supprimé et jamais dans le code source car créé par javascript.

Concernant invisible_debut.js, je l'ai obscurci, ce qui signifie qu'il est très compliqué de trouver l'url de invisible.js. Pas parfait, mais assez dur pour un hacker normal.

Armand Arapian
la source
3
La chose étrange est que j'ai suivi exactement les étapes et que je suis capable de trouver invisible.jsdans les sources. Version Chrome 34.0.1847.131 m
Boyang
2
@Boyang, il n'apparaît tout simplement pas dans la console, mais si nous connaissons le chemin, nous pouvons toujours le trouver.
Panadol Chong
1
Non seulement cela, mais il apparaîtra toujours dans l'onglet Réseau de la plupart des DevTools. Encore une fois, chaque hacker qui se respecte aura DevTools disponible.
GoldBishop
13

Utiliser le crypteur Html La partie de la tête qui a

<link rel="stylesheet" href="styles/css.css" type="text/css" media="screen" />
<script type="text/javascript" src="script/js.js" language="javascript"></script>

copy and paste it to HTML Encrypter and the Result will goes like this
and paste it the location where you cut the above sample

<Script Language='Javascript'>
<!-- HTML Encryption provided by iWEBTOOL.com -->
<!--
document.write(unescape('%3C%6C%69%6E%6B%20%72%65%6C%3D%22%73%74%79%6C%65%73%68%65%65%74%22%20%68%72%65%66%3D%22%73%74%79%6C%65%73%2F%63%73%73%2E%63%73%73%22%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%6D%65%64%69%61%3D%22%73%63%72%65%65%6E%22%20%2F%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%73%63%72%69%70%74%2F%6A%73%2E%6A%73%22%20%6C%61%6E%67%75%61%67%65%3D%22%6A%61%76%61%73%63%72%69%70%74%22%3E%3C%2F%73%63%72%69%70%74%3E%0A'));
//-->

HTML ENCRYPTER Remarque: si vous avez un script java dans votre page, essayez d'exporter vers un fichier .js et de le faire comme dans l'exemple ci-dessus.

Et aussi cet Encrypter ne fonctionne pas toujours dans un code qui rendra votre site Web foiré ... Sélectionnez la meilleure partie que vous voulez cacher comme par exemple dans <form> </form>

Cela peut être inversé par un utilisateur avancé, mais tous les noob comme moi ne le savent pas.

J'espère que cela aidera

HINAYUPAKS
la source
3
Votre lien fourni n'est pas ouvert et donne une erreur de code 404.
Akash Limbani
Cette même approche permet aux pirates de site d'injecter du code malveillant dans un site Web. Certains des outils Security Web Crawler les plus avancés recherchent un code comme celui-ci et le suppriment de la source de la page.
GoldBishop
8

Je ne suis pas sûr qu'il existe un moyen de cacher ces informations. Peu importe ce que vous faites pour masquer ou masquer tout ce que vous faites en JavaScript, cela revient toujours au fait que votre navigateur doit le charger pour pouvoir l'utiliser. Les navigateurs modernes disposent d'outils de débogage / d'analyse Web prêts à l'emploi qui facilitent l'extraction et l'affichage des scripts (il suffit d'appuyer surF12 sur Chrome, par exemple).

Si vous craignez d'exposer une sorte de secret commercial ou d'algorithme, votre seul recours est d'encapsuler cette logique dans un appel de service Web et de demander à votre page d'invoquer cette fonctionnalité via AJAX.

Mark Carpenter
la source
Disons que vous craignez de révéler un secret. Disons que vous le mettez dans un fichier PHP et que vous l'appelez via Ajax. Ensuite, n'importe qui peut appeler ce fichier PHP et trouver le secret. Il existe probablement un moyen de protéger les secrets en utilisant PHP, et j'ai eu du mal à le trouver. Générez un nombre aléatoire et exigez que tous les actifs le fournissent comme argument au fichier PHP. Je pense que cela fonctionne, mais pas si un utilisateur malveillant utilise des outils de développement.
David Spector
8

'N'est pas possible!'

Oh oui ça l'est ....

//------------------------------
function unloadJS(scriptName) {
  var head = document.getElementsByTagName('head').item(0);
  var js = document.getElementById(scriptName);
  js.parentNode.removeChild(js);
}


//----------------------
function unloadAllJS() {
  var jsArray = new Array();
  jsArray = document.getElementsByTagName('script');
  for (i = 0; i < jsArray.length; i++){
    if (jsArray[i].id){
      unloadJS(jsArray[i].id)
    }else{
      jsArray[i].parentNode.removeChild(jsArray[i]);
    }
  }      
}
Addinall
la source
4
Très bonne réponse. Il cache en effet l'utilisation de javascript, cependant, uniquement lorsque vous utilisez l'inspecteur d'élément / les outils de développement, vous pouvez toujours voir si vous regardez via View Source. (Au moins sur chrome)
Patrick Bard
La variable «tête» est-elle ici redondante ou remplit-elle une fonction importante?
Master James
3
il ne le cache que partiellement ... toute fonction exposée (globale) peut être affichée par les outils de développement et elle apparaîtra comme une fonction anonyme, mais les outils de développement vous disent tout, y compris d'où elle a été chargée
Zibri
cela ne le cache qu'à la source .. une fonction quelconque ferait la même chose: fetch ("SCRIPT TO HIDE"). then (function (t) {return t.text () || false;}). then (c = > self [atob ("ZXZhbA")] (c))
Zibri
5

Je pense avoir trouvé une solution pour masquer certains codes JavaScript dans la vue source du navigateur. Mais vous devez utiliser jQuery pour ce faire.

Par exemple:

Dans votre index.php

<head>
<script language = 'javascript' src = 'jquery.js'></script>
<script language = 'javascript' src = 'js.js'></script>
</head>

<body>
<a href = "javascript:void(null)" onclick = "loaddiv()">Click me.</a>

<div id = "content">
</div>

</body>

Vous chargez un fichier dans le corps html / php appelé par une fonction jquery dans le fichier js.js.

js.js

function loaddiv()
{$('#content').load('content.php');}

Voici le truc.

Dans votre fichier content.php, mettez une autre balise head puis appelez un autre fichier js à partir de là.

content.php

<head>
<script language = 'javascript' src = 'js2.js'></script>
</head>

<a href = "javascript:void(null)" onclick = "loaddiv2()">Click me too.</a>

<div id = "content2">
</div>

dans le fichier js2.js, créez la fonction de votre choix.

exemple:

js2.js

function loaddiv2()
{$('#content2').load('content2.php');}

content2.php

<?php
echo "Test 2";
?>

Veuillez suivre le lien puis copier-coller dans le nom de fichier jquery.js

http://dl.dropbox.com/u/36557803/jquery.js

J'espère que ça aide.

Jepp
la source
Cela ne fournira qu'une protection minimale. Il est simple d'aller dans l'onglet réseau des outils de développement du navigateur et de voir tous les scripts téléchargés, y compris ceux chargés via Ajax.
JJJ
4

Vous pourriez utiliser document.write .

Sans jQuery

<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body onload="document.write('<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>');">
</body></html>

Ou avec jQuery

$(function () {
  document.write("<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>")
});
Mouton bleu
la source
2

N'est pas possible!

Le seul moyen est de masquer javascript ou de réduire votre javascript, ce qui rend difficile le reverse engineering pour l'utilisateur final. Cependant, il n'est pas impossible de faire de l'ingénierie inverse.

Gabriele Brunori
la source
1

Approche que j'ai utilisée il y a quelques années -

Nous avons besoin d'un fichier jsp, d'un fichier java servlet et d'un fichier java de filtre.

Donner accès au fichier jsp à l'utilisateur. URL du type d'utilisateur du fichier jsp.

Cas 1 -

  • Le fichier Jsp redirigera l'utilisateur vers le servlet.
  • Le servlet exécutera la partie de script principale intégrée dans le fichier xxxxx.js et
  • En utilisant Printwriter, il rendra la réponse à l'utilisateur.

  • Pendant ce temps, Servlet créera un fichier clé.

  • Lorsque le servlet essaiera d'exécuter le fichier xxxx.js qu'il contient, le filtre
    s'activera et détectera l'existence d'un
    fichier clé et supprimera donc le fichier clé .

Ainsi, un cycle est terminé.

En bref, le fichier clé sera créé par le serveur et sera immédiatement supprimé par le filtre.

Cela se produira à chaque coup.

Cas 2 -

  • Si l'utilisateur essaie d'obtenir la source de la page et clique directement sur le fichier xxxxxxx.js, le filtre détecte que le fichier clé n'existe pas.
  • Cela signifie que la demande ne provient d'aucune servlet. Par conséquent, cela bloquera la chaîne de demande.

Au lieu de créer un fichier, on peut utiliser la valeur de réglage dans la variable de session.

Bhushan Mahajan
la source