Come nascondo il codice javascript in una pagina web?

94

È possibile nascondere il codice Javascript dall'html di una pagina web, quando il codice sorgente viene visualizzato tramite la funzione Visualizza sorgente del browser?

So che è possibile offuscare il codice, ma preferirei che fosse nascosto dalla funzione di visualizzazione dell'origine.

— arun nair
fonte

1

— lato

8

Perché dovresti nascondere Javascript? Non è come se avessi mai inserito dati sensibili che non vorresti che l'utente trovasse al suo interno ... giusto ?!

— Paul

1

Come farebbe un browser a sapere quale Javascript eseguire?

— Wylie

1

@PaulPRO ha un buon punto: perché dovresti nascondere JavaScript? Chiunque voglia sapere cosa stai facendo sarà SEMPRE in grado di ottenere il tuo script con pochi tasti. Non si baseranno solo su View-Source. Chiunque non sappia come ottenere una sceneggiatura probabilmente non sarà comunque interessato.

— Stephen Chung

1

@UdayHiwarale È molto facile vedere quali sono le query GET e altre query HTTP eseguite dal client (basta aprire la console di sviluppo e andare alla scheda di rete). Quando si sviluppa un sito Web, è necessario presumere sul server che tutte le richieste siano state contraffatte da un utente malintenzionato e quindi è necessario convalidare tutti i dati ed evitare attentamente ogni stringa che si unisce in SQL o altro codice.

— Suzanne Dupéron,

129

Non sono sicuro che qualcun altro abbia effettivamente risposto direttamente alla tua domanda, ovvero il codice visualizzato dal comando Visualizza sorgente del browser.

Come altri hanno già detto, non c'è modo di proteggere javascript destinato a essere eseguito in un browser da un determinato visualizzatore. Se il browser può eseguirlo, anche qualsiasi persona determinata può visualizzarlo / eseguirlo.

Ma, se metti il tuo javascript in un file javascript esterno che è incluso con:

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

tag, quindi il codice javascript non sarà immediatamente visibile con il comando Visualizza sorgente - solo il tag dello script stesso sarà visibile in questo modo. Ciò non significa che qualcuno non possa semplicemente caricare quel file javascript esterno per vederlo, ma hai chiesto come tenerlo fuori dal comando Visualizza sorgente del browser e questo lo farà.

Se volessi davvero lavorare di più per visualizzare la fonte, dovresti fare tutto quanto segue:

Mettilo in un file .js esterno.
Offuscare il file in modo che la maggior parte dei nomi delle variabili native venga sostituita con versioni brevi, in modo che tutti gli spazi non necessari vengano rimossi, quindi non possa essere letto senza ulteriori elaborazioni, ecc ...
Includi dinamicamente il file .js aggiungendo in modo programmatico tag di script (come fa Google Analytics). Ciò renderà ancora più difficile accedere al codice sorgente dal comando Visualizza sorgente poiché non ci sarà un collegamento facile su cui fare clic lì.
Metti tutta la logica interessante che desideri proteggere sul server che recuperi tramite chiamate ajax piuttosto che eseguire l'elaborazione locale.

Detto questo, penso che dovresti concentrarti su prestazioni, affidabilità e rendere eccezionale la tua app. Se devi assolutamente proteggere un algoritmo, mettilo sul server, ma a parte questo, competi per essere il migliore in te, non per avere segreti. In definitiva è così che funziona il successo sul web.

— jfriend00
fonte

2

Bel modo per rispondere direttamente alla domanda. L'utilizzo di JavaScript per generare il lo <script>terrebbe meglio fuori dalla vista sorgente (ancora visibile sotto il DOM live) - cioè, non può essere semplicemente "cliccato con il tasto destro del mouse" nella vista sorgente. Potrebbe essere possibile che tale <script>elemento venga rimosso una volta eseguito JavaScript, rendendo leggermente più macchinoso (ma non impossibile) ottenere il codice originale ... ovviamente il traffico di rete verrà visualizzato molto facilmente in Firebug o simili ;-)

3

@Quentin - il tuo URL di visualizzazione sorgente è stupido - non è quello che viene chiesto o proposto qui. Chiunque può visualizzare il codice. L'ho detto tanto quanto chiunque altro. La domanda è solo quanto è facile e, per la domanda specifica posta, quanto è visibile quando qualcuno fa View Source? Il mio suggerimento fa sì che venga rimosso un passaggio da Visualizza sorgente: questo è tutto, ma è un passaggio aggiuntivo valido.

— jfriend00

fetch ("SCRIPT TO HIDE URL or DATAURL"). then (function (t) {return t.text () || false;}). then (c => self [atob ("ZXZhbA")] (c))

— Zibri

Penso che possiamo anche aggiungere oncontextmenu = 'return false;' all'interno del tag html.

— falero80s

@ falero80s - Questo tenta di interrompere il menu di scelta rapida, ma non interrompe tutti gli altri modi in cui è possibile visualizzare l'origine della pagina.

— jfriend00

38

No, non è possibile.

Se non lo dai al browser, il browser non ce l'ha.

Se lo fai, allora (o un riferimento facilmente seguito ad esso) fa parte della fonte.

— Quentin
fonte

4

Non sono sicuro che questa risposta abbia davvero risposto alla domanda posta (anche se ha ottenuto 10 voti positivi in 15 minuti). Hanno chiesto come mantenere il codice fuori dal comando Visualizza sorgente del browser. È possibile. Vedi la mia risposta di seguito. Non hanno chiesto come impedire la visualizzazione del codice da parte di un determinato hacker.

— jfriend00

8

Non ci vuole molto in termini di determinazione per fare clic sul collegamento in Visualizza sorgente per un documento HTML per accedere a Visualizza sorgente per lo script.

— Quentin

A mio avviso la domanda non è stata interpretata correttamente. La creazione di un file JS è comune, ciò che l'utente vuole qui (penso) è come nascondere qualsiasi valore della variabile JS quando qualcuno sceglie l'opzione "Visualizza sorgente pagina". +1 da parte mia.

— shaILU

Questa risposta non ha alcun senso. è meglio dare un suggerimento qui. Opzione migliore per utilizzare un file esterno.

— Lalit Mohan

14

La mia soluzione è ispirata dall'ultimo commento. Questo è il codice di 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>

Il codice chiaro di invisible_debut.js è:

$(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();});

Si noti che alla fine rimuovo lo script creato. invisible.js è:

$(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 non compare nella console, perché è stato rimosso e mai nel codice sorgente perché creato da javascript.

Per quanto riguarda invisible_debut.js, l'ho offuscato, il che significa che è molto complicato trovare l'URL di invisible.js. Non perfetto, ma abbastanza difficile per un normale hacker.

— Armand Arapian
fonte

3

La cosa strana è che ho seguito esattamente i passaggi e sono riuscito a trovarli invisible.jsnei sorgenti. Versione Chrome 34.0.1847.131 m

— Boyang

1

@Boyang, semplicemente non appare nella console, ma se conosciamo il percorso, siamo ancora in grado di trovarlo.

— Panadol Chong

Non solo, ma verrà sempre visualizzato nella scheda Network della maggior parte dei DevTools. Anche in questo caso ogni hacker che si rispetti avrà a disposizione DevTools.

— GoldBishop il

13

Usa Html Encrypter La parte della testa che ha

<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 Nota: se hai uno script java nella tua pagina prova ad esportare in un file .js e fallo come nell'esempio sopra.

E anche questo Encrypter non funziona sempre con un codice che renderà il tuo sito incasinato ... Seleziona la parte migliore che vuoi nascondere come ad esempio in <form> </form>

Questo può essere invertito dall'utente avanzato, ma non tutti i noob come me lo sanno.

Spero che questo ti aiuti

— HINAYUPAKS
fonte

3

Il collegamento fornito non è aperto e fornisce un errore di codice 404.

— Akash Limbani

Questo stesso approccio è il modo in cui gli hacker del sito inseriscono codice dannoso in un sito web. Alcuni degli strumenti più avanzati di Security Web Crawler cercano codice come questo e lo eliminano dall'origine della pagina.

— GoldBishop

8

Non sono sicuro che ci sia un modo per nascondere queste informazioni. Qualunque cosa tu faccia per offuscare o nascondere qualunque cosa tu stia facendo in JavaScript, dipende comunque dal fatto che il tuo browser deve caricarlo per poterlo utilizzare. I browser moderni dispongono di strumenti di debug / analisi web predefiniti che rendono l'estrazione e la visualizzazione degli script banali (basta premere F12in Chrome, per esempio).

Se sei preoccupato di esporre qualche tipo di segreto commerciale o algoritmo, la tua unica risorsa è incapsulare quella logica in una chiamata al servizio web e fare in modo che la tua pagina invochi quella funzionalità tramite AJAX.

— Mark Carpenter
fonte

8

'Non è possibile!'

Oh si lo è ....

//------------------------------
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
fonte

4

Risposta molto buona. In effetti nasconde l'utilizzo di javascript, tuttavia, solo quando si utilizza Element Inspector / Strumenti per sviluppatori, è ancora possibile vedere se si guarda tramite Visualizza sorgente. (Almeno su chrome)

— Patrick Bard

la variabile "head" è ridondante qui o ha una funzione importante?

— Master James,

2

lo nasconde solo parzialmente ... qualsiasi funzione esposta (globale) può essere mostrata dagli strumenti di sviluppo e apparirà come una funzione anonima ma gli strumenti di sviluppo ti dicono tutto compreso da dove è stato caricato

— Zibri

questo lo nasconde solo dal sorgente .. una funzione anonima farebbe la stessa cosa: fetch ("SCRIPT TO HIDE"). then (function (t) {return t.text () || false;}). then (c = > self [atob ("ZXZhbA")] (c))

— Zibri

5

Penso di aver trovato una soluzione per nascondere alcuni codici JavaScript nella vista sorgente del browser. Ma devi usare jQuery per farlo.

Per esempio:

Nel tuo file 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>

Si carica un file nel corpo html / php chiamato da una funzione jquery nel file js.js.

js.js

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

Ecco il trucco.

Nel tuo file content.php metti un altro tag head quindi chiama un altro file js da 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>

nel file js2.js crea qualsiasi funzione tu voglia.

esempio:

js2.js

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

content2.php

<?php
echo "Test 2";
?>

Segui il link, quindi copialo e incollalo nel nome del file jquery.js

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

Spero che aiuti.

— Jepp
fonte

Ciò fornirà solo una protezione minima. È banale andare alla scheda di rete degli strumenti di sviluppo del browser e vedere tutti gli script scaricati, inclusi quelli caricati tramite Ajax.

— JJJ

4

Potresti usare document.write.

Senza 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>

O con 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>")
});

— Pecora blu
fonte

2

Non è possbile!

L'unico modo è offuscare javascript o minimizzare il tuo javascript, il che rende difficile per l'utente finale il reverse engineering. tuttavia non è impossibile decodificare.

— gabriele brunori
fonte

1

Approccio che ho usato alcuni anni fa -

Abbiamo bisogno di un file jsp, un file java servlet e un file java filtro.

Dare l'accesso al file jsp all'utente. URL del tipo di utente del file jsp.

Caso 1 -

Il file Jsp reindirizzerà l'utente a Servlet.
Servlet eseguirà la parte dello script principale incorporata nel file xxxxx.js e
Utilizzando Printwriter, renderà la risposta all'utente.
Nel frattempo, Servlet creerà un file chiave.
Quando servlet tenta di eseguire il file xxxx.js al suo interno, Filter
si attiverà e rileverà l'esistenza del file chiave e quindi eliminerà il
file chiave .

Quindi un ciclo è finito.

In breve, il file chiave verrà creato dal server e sarà immediatamente cancellato dal filtro.

Questo accadrà ad ogni colpo.

Caso 2 -

Se l'utente tenta di ottenere l'origine della pagina e fa clic direttamente sul file xxxxxxx.js, Filter rileverà che il file chiave non esiste.
Significa che la richiesta non è arrivata da nessun servlet. Quindi, bloccherà la catena di richieste.

Invece della creazione di file, è possibile utilizzare il valore di impostazione nella variabile di sessione.

— Bhushan Mahajan
fonte