본문 바로가기

C.E

HTML 암호화

설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 이라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다.. ^^

 //글쓴이) 상당히 오래 된 자료이긴 하나 참고되는 부분이 있어 재포스팅 합니다.
//위의 호빵홈페이지도 꽤나 오래된 홈페이지나 있을 자료들은 많습니다. (아직 유지되고 있습니다.) 참고하실 분은 참고하세요. 




▶ 예제 보기

<body>

<script language="JavaScript">
function generate(what) {
code = document.pad.textcode;
if (code.value.length>0) code.value = "<script language=Javascript>m='"+escape(code.value)+"';d=unescape(m);document.write(d);<\/script>";
else if (code.value.length == "") {
alert('내용을 넣으세요');
document.pad.textcode.focus();
}
}

function unlock(){
if (document.pad.textcode.value.length == "") {
alert('내용이 있어야 합니다');
document.pad.textcode.focus();
}
else {
code = document.pad.textcode.value;
pass = "";
pass = code.replace(/m=\'(.*)\';d=/g, "[[$1[[");
ut = pass.split("[[");
document.pad.textcode.value = unescape(ut[1]);
}
}
</script>




실행화면에서 스크립트나 태그 소스를 넣은 후 각 버튼을 차례로 눌러보세요.
Encoding은 내용을 암호화하는 것이고 Decoding은 암호화된 내용을 원래대로 바꿔주는 것입니다.



▶ 자바스크립트 소스 보기

자바스크립트 소스의 내용은 특별히 수정할 것이 없습니다..
특별히 수정하고 싶다면 폼의 모양이나 크기 등을 스타일 등으로 이쁘게 꾸며주는 정도만 하면 되구요..
각 폼 태그의 객체(form, textarea, input 버튼) 들의 name은 수정하지 마세요..
자바스크립트 소스는 아래의 파란 내용 부분이 소스이니 보고 분석하기 바랍니다..


<script language="JavaScript">
function generate(what) {
code = document.pad.text;
if (code.value.length>0) code.value = "<script language=Javascript>m='"+escape(code.value)+"';d=unescape(m);document.write(d);<\/script>";
else if (code.value.length == "") {
alert('내용을 넣으세요');
document.pad.text.focus();
}
}

function unlock(){
if (document.pad.text.value.length == "") {
alert('내용이 있어야 합니다');
document.pad.text.focus();
}
else {
code = document.pad.text.value;
pass = "";
pass = code.replace(/m=\'(.*)\';d=/g, "[[$1[[");
ut = pass.split("[[");
document.pad.text.value = unescape(ut[1]);
}
}
</script>





▶ HTML 태그 소스 보기

아래 박스 안의 내용이 HTML 태그 소스입니다..

스크립트 소스는 이곳에 써줍니다

method="post" name="pad">
<textarea class="box" rows="11" name="text" cols="51" wrap></textarea><br>
<input type="button" value="Encoding" name="compileIt" ="generate()">
<input type="button" value="Decoding" name="retur" ="unlock()">
</





▶ HTML 태그 소스 설명

스크립트를 .js 파일로 만들지 않고 HTML 문서에서 <script> 태그로 직접 쓰는 경우에는 위의 HTML 태그 소스 중 "스크립트 소스는 이곳에 써줍니다" 라는 문장을 지우고 그 곳에 자바스크립트 소스를 반드시 써줘야 합니다..

자바스크립트 소스를 .js 파일로 만들지 않고 <script> 태그로 불러와 사용하려면 다음과 같이 씁니다..


<script language="javascript">
위에서 복사한 자바스크립트 소스 내용
</script>



스크립트를 .js 파일로 따로 만들어서 사용하고 HTML 문서에서는 <script src="js파일주소">로 사용할 경우에는 아래처럼 합니다.

자바스크립트 소스를 .js 파일로 만들어서 사용할 경우에는 .js 파일은 자신의 홈에 파일 올리기나 FTP 기능으로 올린 후에 <script> 태그로 불러와 사용합니다..


<script language="javascript" src=".js파일의주소"></script>




HTML 태그의 실제적인 소스 설명 부분입니다.

form 태그에 있는 method="post"라는 부분은 주소에서 http://hobbang.co.kr/js.html?id=%23%32 처럼 문서이르 뒤에 지저분하게 붙는 것을 안보이게 숨겨주는 것입니다.. 다 보이게 하는 경우에는 method="get"을 사용하지만 중요 정보를 넘기는 경우도 있고 내용이 지저분해 보일 수도 있으므로 보통은 "post"로 사용합니다.


<textarea> 태그는 글을 입력할 수 있는 입력박스입니다.. 크기를 가로로 51칼럼, 세로로 11줄을 지정한 것입니다. <textarea>는 </textarea>로 반드시 닫아주어야 하고 기본적인 내용을 입력해 두려면 <textarea>와 <.textarea> 사이에 내용을 입력하면 됩니다.. 기본적으로 들어가는 내용에는 태그나 스크립트가 들어 있어도 그냥 글씨로 표시되므로 줄 넘김을 위해서 내용에 일부러 <br> 태그 등을 쓰지 않아도 됩니다..


두 개의 <input> 태그는 "Encoding"과 "Decoding"이라는 버튼에 대한 것입니다. 각 버튼을 클릭할 때 스크립트에 있는 generate() 함수와 unlock() 함수를 각각 실행하게 됩니다. generate()는 textarea 안의 내용을 인코딩 해주는 함수 부분이고 unlock()는 인코딩 된 내용을 다시 디코딩 해주는 함수입니다..



참고)
위의 소스는 HTML 태그 내용이 길거나 스크립트 내용이 긴 경우에 사용을 합니다..
암호화(Encode)를 해주는 자바스크립트 매소드는 escape()라는 것이고 암호화를 해재(Decode)하는 것은 unescape()라는 것입니다..

간단한 내용이라면 암호화는
<script language="JavaScript">
document.write(escape("내용"))
</script>

암호화 해제는
<script language="JavaScript">
document.write(unescape("내용"))
</script>

처럼 하면 됩니다..



참고)
경우에 따라서는 소스를 escape()한 것을 한 번 더 escape()로 암호화를 시켜서 unescape()를 했을 때에도 내용을 못보게 하거나 escape()를 했을 때 원래의 소스 내용이 안보이게 하는 경우에도 있습니다..
그런 경우에는
document.write(unescape("암호화한 내용"));
처럼 된 것을
alert(unescape("암호화한 내용"));
처럼 하면 메시지창에 소스 내용이 나타납니다.. 그 소스를 분석하면 되겠죠..
자바스크립트에서 자주 쓰는 명령을 조금만 알고 있다면 쉽게 응용을 할 수 있답니다..
아니면 이렇게 해도 되겠죠.. textarea 태그로 텍스트상자를 하나 만들고 그 안에 unescape() 한 내용이 나타나게 직접 스크립트 태그를 만들어도 되겠죠..

프로그램 예)
method="post" name="pad">
<textarea class="box" rows="11" name="text" cols="100" wrap></textarea>
</
<script language="javascript">
document.pad.text.value = unescape("암화화된 내용");
</script> 

'C.E' 카테고리의 다른 글

스토리보드 만들기, 기획  (0) 2013.11.02
모니터 고장(오류) 관련  (0) 2013.11.02
블루스크린에 관한 (거의)모든 것  (0) 2013.11.02
CMD 명령어  (0) 2013.10.19
microprocessor  (0) 2013.10.19