WebページでJavaScriptコードを非表示にするにはどうすればよいですか？

94

ブラウザでソースコードを表示するときに、ソースコードがブラウザのソース表示機能で表示されるときに、JavaScriptコードをWebページのHTMLから非表示にすることはできますか？

コードを難読化することは可能ですが、ソースの表示機能から非表示にすることをお勧めします。

javascript  browser  hide  obfuscation 
— アルンネア
ソース
1
クライアント
— サイドな
8
なぜJavaScriptを非表示にするのですか？これは、ユーザーが見つけてほしくない機密データを入れてしまうようなものではありません。
— ポール
1
ブラウザはどのJavascriptを実行するかをどのようにして知るのでしょうか？
— ワイリー、2011
1
@PaulPROには良い点があります-なぜJavaScriptを隠したいのですか？あなたが何をしているのかを知りたい人は、いつでもキーストロークを数回使ってスクリプトを取得できます。それらはView-Sourceに依存するだけではありません。スクリプトを取得する方法を知らない人は、とにかくスクリプトに興味がないでしょう。
— スティーブンチョン
1
@UdayHiwarale クライアントによって実行されたGETおよびその他のHTTPクエリが何であるかを確認するのは非常に簡単です（開発コンソールを開いてネットワークタブに移動するだけです）。Webサイトを開発するときは、サーバー上ですべての要求が攻撃者によって偽造されていると想定する必要があります。したがって、すべてのデータを検証し、SQLまたはその他のコードにスプライスするすべての文字列を慎重にエスケープする必要があります。
— スザンヌデュペロン16

回答:

129

ブラウザーの[ソースの表示]コマンドから表示されているコードである他の誰かが実際に直接あなたの質問に対応したかどうかはわかりません。

他の人が言ったように、ブラウザで実行することを目的としたjavascriptを特定のビューアから保護する方法はありません。ブラウザで実行できる場合は、決定された人なら誰でも閲覧/実行できます。

ただし、次のファイルに含まれている外部JavaScriptファイルにJavaScriptを配置すると、

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

タグを付けると、JavaScriptコードは[ソースの表示]コマンドですぐには表示されません。その方法で表示できるのは、スクリプトタグのみです。それは、誰かがその外部JavaScriptファイルを読み込んでそれを表示することができないという意味ではありませんが、ブラウザの[ソースの表示]コマンドからそれを除外する方法を尋ねたところ、これが実行されました。

ソースを表示するための作業を増やしたい場合は、次のすべてを実行します。

  1. 外部の.jsファイルに入れます。
  2. ほとんどのネイティブ変数名が短いバージョンに置き換えられるようにファイルを難読化し、不要な空白がすべて削除されるようにします。これにより、以降の処理なしにファイルを読み取ることができなくなります。
  3. プログラムでスクリプトタグを追加して、.jsファイルを動的にインクルードします（Google Analyticsのように）。クリックする簡単なリンクがないため、[ソースの表示]コマンドからソースコードにアクセスするのがさらに難しくなります。
  4. 保護したい興味深いロジックを、ローカル処理ではなくajax呼び出しを介して取得するサーバーに配置します。

以上のことを踏まえて、パフォーマンス、信頼性、アプリの優れた点に重点を置く必要があると思います。あるアルゴリズムを絶対に保護する必要がある場合は、それをサーバーに配置しますが、それ以外の場合は、秘密を保持するのではなく、最善を尽くして競争します。とにかく、それがWebで成功する方法です。

— jfriend00
ソース
2
質問に直接取り組むための素晴らしい方法。JavaScriptを使用してを生成する<script>と、それがソースの表示から除外されます（まだライブDOMの下に表示されます）。つまり、ソースビューで単に「右クリック」することはできません。<script>JavaScriptが実行されると、上記の要素が削除され、元のコードを取得するのが少し面倒になります（ただし不可能ではありません）。もちろん、Firebugまたは同様のものではネットトラフィックがすぐに表示されます;-)
3
@Quentin-ビューのソースURLはばかげています-それはここで尋ねられたり提案されたりするものではありません。誰でもコードを見ることができます。私は他の誰と同じくらいそれを言った。問題はそれがどれほど簡単かということだけであり、特定の質問に応じて、誰かがソースを表示したときにどれほど目に見えるかということです。私の提案では、[ソースの表示]から1つのステップを削除しました。それだけですが、これは有効な追加のステップです。
— jfriend00
fetch（ "SCRIPT TO HIDE URL or DATAURL"）。then（function（t）{return t.text（）|| false;}）。then（c => self [atob（ "ZXZhbA"）]（c））
— Zibri、
oncontextmenu = 'return false;'を追加できると思います。htmlタグ内。
— falero80s
@ falero80s-右クリックメニューを停止しようとしますが、ページのソースを表示する他のすべての方法は停止しません。
— jfriend00
38

いいえ、できません。

ブラウザに渡さない場合、ブラウザにはありません。

その場合、それ（または簡単にそれを参照すること）がソースの一部を形成します。

— クエンティン
ソース
4
この回答が質問された質問に実際に回答したかどうかはわかりません（たとえ15分間で10の賛成票を得たとしても）。彼らは、ブラウザの[ソースの表示]コマンドからコードを除外する方法を尋ねました。それは可能です。以下の私の答えを参照してください。彼らは、コードが決定的なハッカーに見られないようにする方法を尋ねませんでした。
— jfriend00
8
スクリプトの[ソースの表示]にアクセスするためにHTMLドキュメントの[ソースの表示]内のリンクをクリックすることは、それほど大きな決断ではありません。
— クエンティン
私の見解では、質問は正しく解釈されていません。JSファイルの作成は一般的です。ユーザーがここで望むのは（私が思うに）、「ページソースの表示」オプションを選択したときにJS変数値を非表示にする方法です。私の側から+1。
— shaILU 2015
この答えは意味がありません。ここで提案する方が良いでしょう。外部ファイルを使用するためのより良いオプション。
— Lalit Mohan
14

私の解決策は、最後のコメントから発想を得ています。これは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>

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

最後に、作成したスクリプトを削除していることに注意してください。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は削除されており、JavaScriptで作成されたためにソースコードに表示されていないため、コンソールには表示されません。

invisible_debut.jsについては、難読化しました。つまり、invisible.jsのURLを見つけるのは非常に複雑です。完璧ではありませんが、通常のハッカーには十分です。

— アルマンアラピアン
ソース
3
奇妙なことに、私は手順を正確に踏襲しinvisible.js、情報源で見つけることができます。クロームバージョン34.0.1847.131メートル
— Boyang
1
@Boyang、コンソールには表示されませんが、パスがわかっていれば、それを見つけることができます。
— パナドールチョン
それだけでなく、ほとんどのDevToolsの[ネットワーク]タブに常に表示されます。繰り返しになりますが、すべての自尊心のあるハッカーはDevToolsを利用できます。
— GoldBishop
13

Html Encrypterを使用する

<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暗号化注 ：ページにJavaスクリプトがある場合は、.jsファイルにエクスポートして、上記の例のようにしてください。

また、この暗号化機能は、Webサイトをめちゃくちゃにするいくつかのコードで常に機能しているわけではありません...たとえば、次のように非表示にする最適な部分を選択してください <form> </form>

これは事前のユーザーによって逆にすることができますが、私のようなすべてのnoobが知っているわけではありません。

これが役に立てば幸い

— ヒナユパックス
ソース
3
提供されたリンクが開いていないため、404コードエラーが発生します。
— Akash Limbani
これと同じアプローチは、サイトハッカーが悪意のあるコードをWebサイトに挿入する方法です。より高度なセキュリティWebクローラーツールのいくつかは、このようなコードを探し、ページのソースからそれをサニタイズします。
— GoldBishop
8

その情報を隠す方法があるかどうかはわかりません。JavaScriptで行っていることを難読化または非表示にするために何をしても、それを使用するにはブラウザーがそれをロードする必要があるという事実に帰着します。最新のブラウザーには、スクリプトの抽出と表示を簡単に行えるようにする、すぐに使えるWebデバッグ/分析ツールがあります（F12たとえば、Chromeで実行するだけです）。

ある種の企業秘密やアルゴリズムの公開が心配な場合は、そのロジックをWebサービス呼び出しにカプセル化し、ページでAJAXを介してその機能を呼び出すことが唯一の手段です。

— マーク・カーペンター
ソース
8

'不可能である！'

ああそうです...

//------------------------------
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
ソース
4
とても良い答えです。実際、JavaScriptの使用法は非表示になっていますが、Element Inspector / Developer Toolsを使用している場合にのみ、View Sourceを介して見ているかどうかを確認できます。（少なくともクロムでは）
— Patrick Bard
変数「ヘッド」はここで冗長ですか、それともいくつかの重要な機能を果たしますか？
— マスタージェームズ
2
それは部分的にのみ非表示にします...公開された関数（グローバル）は開発ツールで表示でき、匿名関数として表示されますが、開発ツールはそれがどこからロードされたかを含むすべてを教えてくれます
— Zibri
これはソースから非表示にするだけです。無名関数は同じことを行います：fetch（ "SCRIPT TO HIDE"）。then（function（t）{return t.text（）|| false;}）。then（c = > self [atob（ "ZXZhbA"）]（c））
— Zibri
5

ブラウザのビューソースで特定のJavaScriptコードを非表示にするソリューションを見つけたと思います。ただし、これを行うにはjQueryを使用する必要があります。

例えば：

あなたの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>

js.jsファイルのjquery関数によって呼び出されるhtml / php本文にファイルをロードします。

js.js

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

ここにトリックがあります。

content.phpファイルに別のヘッドタグを配置し、そこから別のjsファイルを呼び出します。

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>

js2.jsファイルで、必要な関数を作成します。

例：

js2.js

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

content2.php

<?php
echo "Test 2";
?>

リンクをたどって、jquery.jsのファイル名にコピーして貼り付けてください

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

これがお役に立てば幸いです。

— ジェップ
ソース
これは最小限の保護のみを提供します。ブラウザーの開発ツールのネットワークタブに移動して、ダウンロードされたすべてのスクリプト（Ajax経由で読み込まれたスクリプトを含む）を表示するのは簡単です。
— JJJ 2013年
4

使用できますdocument.write。

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>

または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>")
});
— 青い羊
ソース
2

可能ではありません！

唯一の方法は、JavaScriptを難読化するか、JavaScriptを縮小して、エンドユーザーがリバースエンジニアリングするのを困難にすることです。ただし、リバースエンジニアリングすることは不可能ではありません。

— ガブリエレ・ブルノリ
ソース
1

数年前に使ったアプローチ-

jspファイル、サーブレットのjavaファイル、フィルターのjavaファイルが必要です。

ユーザーにjspファイルへのアクセスを許可します。jspファイルのユーザータイプURL。

ケース1 -

  • Jspファイルはユーザーをサーブレットにリダイレクトします。
  • サーブレットは、xxxxx.jsファイルに埋め込まれたコアスクリプト部分を実行し、

  • Printwriterを使用して、ユーザーへの応答をレンダリングします。

  • 一方、サーブレットはキーファイルを作成します。

  • サーブレットがその中でxxxx.jsファイルを実行しようとすると、フィルター
    がアクティブになり、キーファイルが存在することを検出して、キーファイルを削除し
    ます。

したがって、1サイクルが終了します。

つまり、キーファイルはサーバーによって作成され、フィルターによって即座に削除されます。

これはすべてのヒットで発生します。

ケース2-

  • ユーザーがページのソースを取得してxxxxxxx.jsファイルを直接クリックしようとすると、フィルターはキーファイルが存在しないことを検出します。
  • これは、リクエストがどのサーブレットからも送信されていないことを意味します。したがって、リクエストチェーンがブロックされます。

ファイルを作成する代わりに、セッション変数の設定値を使用できます。

— ブシャンマハジャン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.