Bagaimana cara menyembunyikan kode javascript di halaman web?

95

Apakah mungkin untuk menyembunyikan kode Javascript dari html halaman web, ketika kode sumber dilihat melalui fitur browser View Source?

Saya tahu itu mungkin untuk mengaburkan kode, tetapi saya lebih suka disembunyikan dari fitur sumber tampilan.

arun nair
sumber
1
itu di sisi klien dan karenanya akan berada di setiap klien (browser)
naveen
8
Mengapa Anda ingin menyembunyikan Javascript? Ini tidak seperti Anda pernah memasukkan data sensitif yang Anda tidak ingin pengguna temukan di dalamnya ... Benar ?!
Paul
1
Bagaimana browser mengetahui Javascript yang harus dijalankan?
Wylie
1
@PaulPRO ada benarnya - mengapa Anda ingin menyembunyikan JavaScript? Siapa pun yang ingin tahu apa yang Anda lakukan SELALU bisa mendapatkan skrip Anda dengan beberapa penekanan tombol. Mereka tidak hanya mengandalkan View-Source. Siapa pun yang tidak tahu cara mendapatkan skrip kemungkinan besar tidak akan tertarik.
Stephen Chung
1
@UdayHiwarale Hal ini sangat mudah untuk melihat apa adalah GET dan permintaan HTTP lainnya yang dilakukan oleh klien (hanya membuka konsol dev dan pergi ke tab jaringan). Saat mengembangkan situs web, Anda harus berasumsi di server bahwa semua permintaan dipalsukan oleh penyerang - dan oleh karena itu Anda harus memvalidasi semua data, dan dengan hati-hati melepaskan setiap string yang Anda bagi ke SQL atau kode lain.
Suzanne Dupéron

Jawaban:

133

Saya tidak yakin ada orang lain yang benar-benar menjawab pertanyaan Anda secara langsung yang merupakan kode yang dilihat dari perintah Sumber Tampilan browser.

Seperti yang dikatakan orang lain, tidak ada cara untuk melindungi javascript yang dimaksudkan untuk berjalan di browser dari penampil yang ditentukan. Jika browser dapat menjalankannya, maka setiap orang yang ditentukan dapat melihat / menjalankannya juga.

Tapi, jika Anda meletakkan javascript Anda di file javascript eksternal yang disertakan dengan:

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

tag, maka kode javascript tidak akan langsung terlihat dengan perintah Lihat Sumber - hanya tag skrip itu sendiri yang akan terlihat seperti itu. Itu tidak berarti bahwa seseorang tidak bisa begitu saja memuat file javascript eksternal untuk melihatnya, tetapi Anda memang bertanya bagaimana cara menyimpannya dari perintah View Source browser dan ini akan melakukannya.

Jika Anda benar-benar ingin membuatnya lebih bekerja untuk melihat sumber, Anda akan melakukan semua hal berikut:

  1. Taruh di file .js eksternal.
  2. Obfuscate file tersebut sehingga sebagian besar nama variabel native diganti dengan versi pendek, sehingga semua whitespace yang tidak diperlukan dihapus, sehingga tidak dapat dibaca tanpa pemrosesan lebih lanjut, dll ...
  3. Sertakan file .js secara dinamis dengan menambahkan tag skrip secara terprogram (seperti yang dilakukan Google Analytics). Ini akan membuat lebih sulit untuk mendapatkan kode sumber dari perintah View Source karena tidak akan ada tautan yang mudah untuk diklik di sana.
  4. Letakkan sebanyak mungkin logika menarik yang ingin Anda lindungi di server yang Anda ambil melalui panggilan ajax daripada melakukan pemrosesan lokal.

Dengan semua itu, saya pikir Anda harus fokus pada kinerja, keandalan, dan membuat aplikasi Anda hebat. Jika Anda benar-benar harus melindungi beberapa algoritme, letakkan di server, tetapi selain itu, bersainglah untuk menjadi yang terbaik yang Anda lakukan, bukan dengan memiliki rahasia. Pada akhirnya, itulah cara sukses bekerja di web.

jfriend00
sumber
2
Cara yang bagus untuk menjawab pertanyaan secara langsung. Menggunakan JavaScript untuk menghasilkan yang <script>akan tetap keluar dari View Source yang lebih baik (masih terlihat di bawah DOM hidup) - yaitu, tidak bisa hanya menjadi "mengklik kanan pada" di Sumber View. Mungkin saja <script>elemen tersebut dihapus setelah JavaScript dijalankan sehingga sedikit lebih rumit (tetapi bukan tidak mungkin) untuk mendapatkan kode asli ... tentu saja lalu lintas bersih akan muncul dengan sangat mudah di Firebug atau yang serupa ;-)
3
@Quentin - URL sumber tampilan Anda konyol - bukan itu yang ditanyakan atau diusulkan di sini. Setiap orang dapat melihat kode tersebut. Saya sudah mengatakan itu sama seperti orang lain. Pertanyaannya hanya seberapa mudah dan, per pertanyaan spesifik yang diajukan, seberapa terlihat ketika seseorang melakukan View Source? Saran saya membuatnya satu langkah dihapus dari Sumber Tampilan - itu saja, tetapi ini adalah langkah tambahan yang valid.
jfriend00
fetch ("SCRIPT TO HIDE URL or DATAURL"). lalu (function (t) {return t.text () || false;}). lalu (c => self [atob ("ZXZhbA")] (c))
Zibri
Saya pikir kita juga bisa menambahkan oncontextmenu = 'return false;' dalam tag html.
falero80s
@ falero80s - Itu mencoba menghentikan menu klik kanan, tetapi tidak menghentikan semua cara lain yang dapat dilakukan seseorang untuk melihat sumber laman.
jfriend00
38

Tidak, itu tidak mungkin.

Jika Anda tidak memberikannya ke browser, maka browser tidak memilikinya.

Jika Anda melakukannya, maka itu (atau referensi yang mudah diikuti) merupakan bagian dari sumber.

Quentin
sumber
4
Saya tidak yakin jawaban ini benar-benar menjawab pertanyaan yang diajukan (meskipun mendapat 10 suara positif dalam 15 menit). Mereka bertanya bagaimana cara menyimpan kode dari perintah browser View Source. Itu mungkin. Lihat jawaban saya di bawah. Mereka tidak bertanya bagaimana menjaga kode agar tidak dilihat oleh peretas yang gigih.
jfriend00
8
Tidak perlu banyak tekad untuk mengklik link di View Source untuk dokumen HTML untuk sampai ke View Source untuk skrip.
Quentin
Dalam pandangan saya, pertanyaan belum ditafsirkan dengan benar. Membuat file JS adalah hal biasa, apa yang diinginkan pengguna di sini (menurut saya) adalah bagaimana menyembunyikan nilai variabel JS ketika salah satu memilih opsi "lihat sumber halaman". +1 dari sisi saya.
shaILU
Jawaban ini tidak masuk akal. lebih baik memberi saran di sini. Pilihan yang lebih baik untuk menggunakan file eksternal.
Lalit Mohan
15

Solusi saya terinspirasi dari komentar terakhir. Ini adalah kode 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>

Kode yang jelas dari invisible_debut.js adalah:

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

Perhatikan bahwa pada akhirnya saya menghapus skrip yang dibuat. invisible.js adalah:

$(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 tidak muncul di konsol, karena telah dihapus dan tidak pernah ada di kode sumber karena dibuat oleh javascript.

Soal invisible_debut.js, saya melakukan obfuscate, yang artinya sangat rumit mencari url invisible.js. Tidak sempurna, tapi cukup sulit untuk peretas biasa.

Armand Arapian
sumber
3
Hal yang aneh adalah saya mengikuti persis langkah-langkahnya dan saya dapat menemukannya invisible.jsdi sumber. Versi Chrome 34.0.1847.131 m
Boyang
2
@Boyang, hanya saja tidak muncul di konsol, tetapi jika kita tahu jalannya, kita masih bisa menemukannya.
Panadol Chong
1
Tidak hanya itu, tetapi juga akan selalu muncul di tab Jaringan di sebagian besar DevTools. Sekali lagi, setiap peretas yang menghargai diri sendiri akan memiliki DevTools.
GoldBishop
13

Gunakan Html Encrypter Bagian dari Head yang memiliki

<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'));
//-->

ENCRYPTER HTML Catatan: jika Anda memiliki java script di halaman Anda coba ekspor ke file .js dan buat seperti contoh di atas.

Dan Juga Encrypter ini tidak selalu berfungsi dalam beberapa kode yang akan membuat situs web Anda kacau ... Pilih bagian terbaik yang ingin Anda sembunyikan seperti misalnya di <form> </form>

Ini bisa dibalik oleh pengguna advance tetapi tidak semua noob seperti saya mengetahuinya.

Semoga ini bisa membantu

HINAYUPAKS
sumber
3
Tautan yang Anda berikan tidak terbuka memberikan kesalahan kode 404.
Akash Limbani
Pendekatan yang sama ini adalah bagaimana Peretas Situs menyuntikkan kode berbahaya ke situs web. Beberapa alat Web Crawler Keamanan yang lebih canggih mencari kode seperti ini dan membersihkannya dari sumber halaman.
GoldBishop
8

Saya tidak yakin ada cara untuk menyembunyikan informasi itu. Tidak peduli apa yang Anda lakukan untuk mengaburkan atau menyembunyikan apa pun yang Anda lakukan di JavaScript, itu tetap pada fakta bahwa browser Anda perlu memuatnya untuk menggunakannya. Peramban modern memiliki alat debugging / analisis web di luar kotak yang membuat mengekstrak dan melihat skrip menjadi sepele (cukup tekan F12di Chrome, misalnya).

Jika Anda khawatir tentang mengungkap beberapa jenis rahasia dagang atau algoritme, maka satu-satunya jalan Anda adalah merangkum logika itu dalam panggilan layanan web dan meminta laman Anda mengaktifkan fungsi itu melalui AJAX.

Mark Carpenter
sumber
Katakanlah Anda khawatir tentang membuka rahasia. Katakanlah Anda memasukkannya ke dalam file PHP dan menyebutnya melalui Ajax. Lalu siapa pun dapat memanggil file PHP itu dan menemukan rahasianya. Mungkin ada cara untuk melindungi rahasia menggunakan PHP, dan saya telah berjuang keras untuk menemukannya. Hasilkan nomor acak dan minta semua aset menyediakannya sebagai argumen ke file PHP. Saya pikir ini berfungsi, tetapi tidak jika pengguna jahat menggunakan alat pengembang.
David Spector
8

'Itu tidak mungkin!'

Oh ya itu ....

//------------------------------
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
sumber
4
Jawaban yang sangat bagus. Ini memang menyembunyikan penggunaan javascript, namun, hanya ketika Anda menggunakan Element Inspector / Developer Tools, Anda masih dapat melihat apakah Anda melihat melalui View Source. (Setidaknya di chrome)
Patrick Bard
apakah variabel "head" redundan di sini atau melayani beberapa fungsi penting?
Tuan James
3
itu menyembunyikannya hanya sebagian ... fungsi apa pun yang terbuka (global) dapat ditampilkan oleh alat dev dan itu akan muncul sebagai fungsi anonim tetapi alat dev memberi tahu Anda segalanya termasuk dari mana ia dimuat
Zibri
ini hanya menyembunyikannya dari sumber .. fungsi anynomous akan melakukan hal yang sama: fetch ("SCRIPT TO HIDE"). lalu (function (t) {return t.text () || false;}). then (c = > diri [atob ("ZXZhbA")] (c))
Zibri
5

Saya rasa saya menemukan solusi untuk menyembunyikan kode JavaScript tertentu di sumber tampilan browser. Tetapi Anda harus menggunakan jQuery untuk melakukan ini.

Sebagai contoh:

Di index.php Anda

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

Anda memuat file di badan html / php yang dipanggil oleh fungsi jquery di file js.js.

js.js

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

Inilah triknya.

Di file content.php Anda, masukkan tag head lain lalu panggil file js lain dari sana.

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>

di file js2.js buat fungsi apa pun yang Anda inginkan.

contoh:

js2.js

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

content2.php

<?php
echo "Test 2";
?>

Silakan ikuti link lalu copy paste di nama file jquery.js

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

Saya harap ini membantu.

Jepp
sumber
Ini hanya akan memberikan perlindungan minimal. Sangat mudah untuk pergi ke tab jaringan alat dev browser dan melihat semua skrip yang diunduh, termasuk yang dimuat melalui Ajax.
JJJ
4

Anda bisa menggunakan document.write.

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

Atau dengan 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>")
});
Domba Biru
sumber
2

Tidak mungkin!

Satu-satunya cara adalah dengan mengaburkan javascript atau mengecilkan javascript Anda yang akan menyulitkan pengguna akhir untuk merekayasa balik. Namun bukan tidak mungkin untuk merekayasa balik.

gabriele brunori
sumber
1

Pendekatan yang saya gunakan beberapa tahun lalu -

Kami membutuhkan file jsp, file java servlet dan file java filter.

Berikan akses file jsp kepada pengguna. Jenis pengguna url dari file jsp.

Kasus 1 -

  • File jsp akan mengarahkan pengguna ke Servlet.
  • Servlet akan mengeksekusi bagian skrip inti yang disematkan dalam file xxxxx.js dan
  • Menggunakan Printwriter, ini akan memberikan respon kepada pengguna.

  • Sementara itu, Servlet akan membuat file kunci.

  • Ketika servlet mencoba mengeksekusi file xxxx.js di dalamnya, Filter
    akan aktif dan akan mendeteksi file kunci yang ada dan karenanya menghapus
    file kunci .

Jadi satu siklus telah berakhir.

Singkatnya, file kunci akan dibuat oleh server dan akan segera dihapus oleh filter.

Ini akan terjadi pada setiap pukulan.

Kasus 2 -

  • Jika pengguna mencoba untuk mendapatkan sumber halaman dan langsung mengklik file xxxxxxx.js, Filter akan mendeteksi bahwa file kunci tidak ada.
  • Artinya permintaan tersebut tidak datang dari servlet manapun. Karenanya, Ini akan memblokir rantai permintaan.

Alih-alih pembuatan File, seseorang dapat menggunakan nilai pengaturan dalam variabel sesi.

Bhushan Mahajan
sumber