웹 페이지에서 자바 스크립트 코드를 숨기려면 어떻게해야합니까?

94

브라우저의 소스보기 기능을 통해 소스 코드를 볼 때 웹 페이지의 HTML에서 Javascript 코드를 숨길 수 있습니까?

코드를 난독화할 수 있다는 것을 알고 있지만 소스보기 기능에서 숨겨 지는 것을 선호합니다 .

— Arun Nair
소스

1

그것은 클라이언트 측과 모든 클라이언트 (브라우저)에 상주 할 수 있도록

— 나빈

8

Javascript를 숨기려는 이유는 무엇입니까? 사용자가 찾길 원하지 않는 민감한 데이터를 넣지 않은 것과는 다릅니다 ... 맞죠?!

— Paul

1

브라우저는 실행할 Javascript를 어떻게 알 수 있습니까?

— Wylie

1

@PaulPRO는 좋은 점을 가지고 있습니다-왜 JavaScript를 숨기고 싶습니까? 당신이 무엇을하는지 알고 싶은 사람은 언제나 몇 번의 키 입력으로 스크립트를 얻을 수 있습니다. 그들은 View-Source에만 의존하지 않을 것입니다. 스크립트를 얻는 방법을 모르는 사람은 어쨌든 그것에 관심이 없을 것입니다.

— 스티븐 정

1

@UdayHiwarale 클라이언트가 수행 한 GET 및 기타 HTTP 쿼리가 무엇인지 확인하는 것은 매우 쉽습니다 (개발 콘솔을 열고 네트워크 탭으로 이동). 웹 사이트를 개발할 때 서버에서 모든 요청이 공격자에 의해 위조되었다고 가정해야합니다. 따라서 모든 데이터의 유효성을 검사하고 SQL 또는 기타 코드로 연결하는 모든 문자열을 조심스럽게 이스케이프해야합니다.

— Suzanne Dupéron

129

다른 사람이 실제로 브라우저의 소스보기 명령에서보고있는 코드 인 귀하의 질문을 직접 해결했는지 잘 모르겠습니다.

다른 사람들이 말했듯이 결정된 뷰어로부터 브라우저에서 실행되도록 의도 된 자바 스크립트를 보호 할 방법이 없습니다. 브라우저가 그것을 실행할 수 있다면, 결정된 사람은 또한 그것을 보거나 실행할 수 있습니다.

그러나 다음과 함께 포함 된 외부 자바 스크립트 파일에 자바 스크립트를 넣는 경우 :

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

태그를 사용하면 소스보기 명령으로 자바 스크립트 코드가 즉시 표시되지 않습니다. 스크립트 태그 자체 만 그런 식으로 표시됩니다. 이는 누군가가 외부 자바 스크립트 파일을로드하여 볼 수 없다는 것을 의미하지는 않지만, 브라우저의 소스보기 명령에서이 파일을 유지하는 방법을 물어 보았습니다.

소스를보기 위해 더 많은 작업을 수행하려면 다음을 모두 수행합니다.

외부 .js 파일에 넣으십시오.
대부분의 기본 변수 이름이 짧은 버전으로 대체되도록 파일을 난독 화하여 불필요한 모든 공백을 제거하여 추가 처리 없이는 읽을 수 없도록합니다.
Google Analytics처럼 스크립트 태그를 프로그래밍 방식으로 추가하여 .js 파일을 동적으로 포함합니다. 클릭 할 수있는 쉬운 링크가 없기 때문에 소스보기 명령에서 소스 코드를 얻는 것이 훨씬 더 어려워집니다.
로컬 처리를 수행하는 대신 ajax 호출을 통해 검색하는 서버에 보호하려는 많은 흥미로운 로직을 넣으십시오.

모든 말과 함께 성능, 안정성 및 앱을 훌륭하게 만드는 데 집중해야한다고 생각합니다. 어떤 알고리즘을 반드시 보호해야한다면 서버에 올려 놓으십시오. 그 외에는 비밀이 아닌 최선을 다해 경쟁하십시오. 이것이 궁극적으로 성공이 웹에서 작동하는 방식입니다.

— jfriend00
소스

2

질문을 직접 해결하는 좋은 방법입니다. JavaScript를 사용하여를 생성 하면 <script>View Source에서 더 잘 유지됩니다 (라이브 DOM 아래에 여전히 표시됨). 즉, 소스보기에서 "마우스 오른쪽 단추를 클릭"할 수 없습니다. 그것은 말했다 가능 수 있습니다 <script>요소는 자바 스크립트를 일단 제거 할 물론 인터넷 트래픽이 방화범 또는 유사한 매우 쉽게 표시됩니다의 ... 원래 코드를 얻을하기가 약간 더 복잡 (그러나 불가능하지 않음)하고 실행한다 ;-)

3

@Quentin-보기 소스 URL이 어리 석습니다. 여기에서 요청하거나 제안한 내용이 아닙니다. 누구나 코드를 볼 수 있습니다. 나는 다른 누구만큼이나 그렇게 말했습니다. 질문은 그것이 얼마나 쉬운 지, 그리고 특정 질문에 따라 누군가가 소스보기를 할 때 그것이 얼마나 눈에 띄는가하는 것입니다. 내 제안은 소스보기에서 한 단계 제거 된 것입니다. 그게 다이지만 유효한 추가 단계입니다.

— 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 2019-04-08

38

아니요, 불가능합니다.

브라우저에 제공하지 않으면 브라우저에없는 것입니다.

그렇게한다면, 그것은 (또는 쉽게 따라갈 수있는 참조) 소스의 일부를 형성합니다.

— 쿠엔틴
소스

4

이 답변이 질문에 실제로 답변했는지는 모르겠습니다 (15 분 동안 10 개의 찬성 투표를 받았음에도 불구하고). 그들은 브라우저의 소스보기 명령에서 코드를 제거하는 방법을 물었습니다. 가능합니다. 아래 내 대답을 참조하십시오. 그들은 단호한 해커가 코드를 보지 못하도록하는 방법을 묻지 않았습니다.

— jfriend00 jul.

8

HTML 문서의 소스보기 에서 링크 를 클릭 하여 스크립트의 소스보기 로 이동하는 것은 결정하는 데 많은 시간이 걸리지 않습니다 .

— Quentin

내 견해로는 질문이 올바르게 해석되지 않았습니다. 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는 제거되었고 자바 스크립트에 의해 생성 되었기 때문에 소스 코드에 없었기 때문에 콘솔에 나타나지 않습니다.

invisible_debut.js와 관련하여 나는 그것을 난독 화했습니다. 즉, invisible.js의 URL을 찾는 것이 매우 복잡하다는 것을 의미합니다. 완벽하지는 않지만 일반 해커에게는 충분히 어렵습니다.

— 아르망 아라 피안
소스

3

이상한 점은 정확히 단계를 따랐고 invisible.js소스 에서 찾을 수 있다는 것입니다. 크롬 버전 34.0.1847.131 분

— 보양

1

@Boyang, 콘솔에 나타나지 않지만 경로를 알고 있으면 여전히 찾을 수 있습니다.

— Panadol Chong

뿐만 아니라 대부분의 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 ENCRYPTER 참고 : 페이지에 자바 스크립트가있는 경우 .js 파일로 내보내고 위의 예와 같이 만드십시오.

또한이 암호화 기는 웹 사이트를 엉망으로 만드는 일부 코드에서 항상 작동하지 않습니다. 예를 들어 숨길 가장 좋은 부분을 선택하십시오. <form> </form>

이것은 고급 사용자가 되돌릴 수 있지만 나와 같은 모든 멍청이가 그것을 아는 것은 아닙니다.

이것이 도움이되기를 바랍니다.

— 히나 유 팍스
소스

3

제공된 링크가 열려 있지 않습니다. 404 코드 오류가 발생했습니다.

— Akash Limbani

이와 동일한 접근 방식은 사이트 해커가 웹 사이트에 악성 코드를 주입하는 방법입니다. 고급 보안 웹 크롤러 도구 중 일부는 이와 같은 코드를 찾아 페이지 소스에서 삭제합니다.

— GoldBishop

8

그 정보를 숨길 방법이 있는지 모르겠습니다. 자바 스크립트에서 무엇을하든 난독 화하거나 숨기려고하더라도 브라우저가 그것을 사용하기 위해로드해야한다는 사실은 여전히 존재합니다. 최신 브라우저에는 스크립트를 쉽게 추출하고 볼 수있는 웹 디버깅 / 분석 도구가 있습니다.F12 예 : Chrome에서 ).

어떤 종류의 영업 비밀이나 알고리즘을 노출하는 것이 걱정된다면 웹 서비스 호출에 해당 로직을 캡슐화하고 페이지가 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

아주 좋은 대답입니다. 실제로 자바 스크립트 사용을 숨기지 만 Element Inspector / Developer Tools를 사용할 때만 View Source를 통해 볼 수 있습니다. (적어도 크롬에서는)

— Patrick Bard 2014

여기서 "head"변수가 중복됩니까? 아니면 중요한 기능을 수행합니까?

— 마스터 제임스

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

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

가능하지 않습니다!

유일한 방법은 자바 스크립트를 난독 화하거나 자바 스크립트를 축소하여 최종 사용자가 리버스 엔지니어링을 어렵게 만드는 것입니다. 그러나 리버스 엔지니어링이 불가능하지는 않습니다.

— 가브리엘 브루노 리
소스

1

몇 년 전에 사용한 접근 방식-

jsp 파일, 서블릿 자바 파일 및 필터 자바 파일이 필요합니다.

사용자에게 jsp 파일에 대한 액세스 권한을 부여하십시오. jsp 파일의 사용자 유형 URL입니다.

사례 1 -

Jsp 파일은 사용자를 Servlet으로 리디렉션합니다.
Servlet은 xxxxx.js 파일에 포함 된 핵심 스크립트 부분을 실행하고
Printwriter를 사용하여 사용자에게 응답을 렌더링합니다.
한편 Servlet은 키 파일을 생성합니다.
서블릿이 그 안에있는 xxxx.js 파일을 실행하려고하면 필터
가 활성화되고 키 파일이 존재하는 것을 감지하여 키 파일을 삭제
합니다.

따라서 한 사이클이 끝났습니다.

간단히 말해서, 키 파일은 서버에 의해 생성되고 필터에 의해 즉시 삭제됩니다.

이것은 모든 히트시 발생합니다.

사례 2-

사용자가 페이지 소스를 얻고 xxxxxxx.js 파일을 직접 클릭하면 필터는 키 파일이 존재하지 않음을 감지합니다.
이는 요청이 서블릿에서 오지 않았 음을 의미합니다. 따라서 요청 체인을 차단합니다.

파일 생성 대신 세션 변수의 설정 값을 사용할 수 있습니다.

— 부샨 마하 잔
소스