프로그램을 개발하던 도중 10진수로 표현된 Unicode, 즉 &#으로 시작하여 10진수 Unicode가 있고 세미콜론(;)으로 끝나는 문자를 출력해야 할 상황이 생겼다. Javascript에서 문자열 변수 안에 있는 문자열은 '並ぶ'와 같았으며, 그냥 단순히 출력할 경우 코드 부분이 변환되지 않고 그대로 출력되는 문제점이 있었다.

10진 Unicode를 코드에 해당하는 실제 문자로 변환하기 위해서는 String.fromCharCode라는 Javascript 함수를 써야 한다. 그러나 이 함수는 문자 코드를 문자로 변환하는 역할만 할 뿐 문자 코드가 섞여 있는 문자열을 변환하는 기능은 없었다.

그래서 다음과 같은 함수를 만들었다.



str에 변환하고자 하는 문자열을 넘기면 정규식을 이용해 십진 유니코드를 파싱한 뒤 이를 실제 문자로 치환하여 리턴한다.


2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry

Runtime시에 실시간으로 자바스크립트로 스타일시트를 변경하기 위해서는 두 가지 방법이 존재한다. 두 개의 스타일시트 클래스를 만들어 놓고 Object의 Class 속성을 변경하는 방법이 가장 많이 쓰이는 방법이나, 이는 변경의 폭이 매우 제한적이다. 또 다른 방법은 스타일시트 자체를 변경해 주는 것이다.
두 방법 모두 브라우저 간에 방법이 다르기 때문에 Cross Browsing 문제에 대해 신경을 써야 한다. 본 포스트에서는 두 번째 방법에 대해서만 설명한다.

개체의 width는 30으로, height은 15로 조절하고 싶을 때

IE의 경우
obj.style.cssText="width:30px; height:15px;";

비 IE 브라우저의 경우
obj.style.width="30px;";
obj.style.height="15px;";


IE가 좀 더 편한 듯 보이나, 위 예제 후 width를 제외한 height만 다시 변경할 경우를 보자.

개체의 height만 25로 조절하고 싶을 때

IE의 경우
obj.style.cssText="width:30px; height:25px;";

비 IE 브라우저의 경우
obj.style.height="25px;";

IE의 경우 height 속성만 적어주면 width 속성이 초기화되기 때문에 두 속성을 모두 적어주어야 하지만 비 IE 브라우저의 경우 속성별로 조절을 해 줄 수 있기 때문에 스타일을 자주 변경할 경우에는 비 IE 브라우저가 더 편하다.




2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
IE와 비IE 브라우저 간 차이를 보이는 Stylesheet 중 하나가 투명도에 관련된 Stylesheet이다. 일반적으로 투명도를 조절할 때 스타일시트를 다음과 같이 써 준다.

opacity:0.80; filter:alpha(opacity=0.80);

사실 이 코드 자체가 브라우저 간 호환성을 고려한 코드이다. 왜냐하면, opacity라는 속성은 비IE 브라우저에서만 작동하고, filter라는 속성은 IE에서만 작동하기 때문이다. 또한 Stylesheet는 정의되지 않는 속성 이름이 있어도 오류를 내지 않고 무시하고 넘어가기 때문에 이와 같이 써 주어도 무방한 것이다.

하지만 자바스크립트로 투명도를 조절해야 할 때에는 어차피 스타일시트를 자바스크립트로 조작하는 방법이 브라우저간 차이가 있기 때문에 각각에 맞는 스타일만 써 주어도 될 것이다. 다음과 같다.

if(IE) obj.style.cssText="filter:alpha(opacity=0.80);";
else obj.style.opacity="0.80;";



2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry

필자는 10월 1일부터 Apec에서 주최하고 대만 교육부에서 주관하는 Apec Cyber Academy(이하 ACA)에 참가한다. 물론 국제대회이고, 상급은 1등상이 대만 교육부장관상일 만큼 꽤 큰 대회이고, 올해가 6회 대회로, 역사가 짧은 대회도 아니다.

이 대회에 참가하기 위해서는 팀을 구성해야 하는데, 올해부터 팀 구성에 한 가지 관문이 생겼다. 바로 Survivor Online이라는 게임을 통과해야 하는 것이다. 게임이라고는 하지만 게임이라기보다는 퀴즈에 가까운 컨텐츠로, 인터넷 개인정보 보호(Safe)와 정보 불법 도용 및 복제 방지(Honest)의 두 가지 주제에 대한 인식 검사 정도로 보면 된다. 쉬워 보일 수 있으나, 퀴즈를 푸는 도중 한 문제라도 틀리면 처음으로 돌아가는데다가 문제마다 플래시 애니메이션이 있어서 시간이 상당히 소요되기 때문에 통과하기가 매우 힘든 것이 사실이다.

그래서 어떻게 편법을 써서 이를 통과할 방법이 없을까를 고민했다. 가장 먼저 생각해 본 것은, 맨 마지막 페이지에서 지금까지 맞은 문제의 개수와 틀린 문제의 개수를 집계하여 이를 이용해 통과 여부를 결정할 테니, 그 중간의 맞은 문제 개수 전달 과정을 잡아 내어 조작하면 될 것이라는 것이었다. 그래서 혹시 Form 내부의 Input을 Hidden으로 해 놓고 이에 숨겨 놓지는 않았나 검사해 보았다. 하지만 소스 코드는 너무나 깨끗했고, 어디에서도 맞은 문제의 개수가 저장되어 있는 Form을 찾을 수는 없었다.

그래서 일단 성실히 문제를 풀어 나가서 맨 마지막 페이지의 주소를 알아내었다. 수고롭게도, 주소 표시줄의 주소를 변경시키지 않고 페이지만 이동하도록 설계된 사이트여서 페이지 이동시 주소는 상태표시줄에 로딩 메시지가 잠깐 뜰 때 이를 캡쳐하여 볼 수밖에 없었다. 알아낸 주소는, /lwf/so/intro_safe_q.asp?t=1&s=20이었다. 그런데, 의외의 수확이 있었다. 바로 주소 뒤에 get 형식으로 인자 두 개가 따라오는 것을 볼 수 있었기 때문이었다.

사용자 삽입 이미지

t는 어떤 역할을 하는지는 전혀 유추가 되지 않았기 때문에 신경 쓰지 않기로 하고 s라는 변수의 기능만 알아내면 될 터였다. 그 때 상황이 필자가 10문제 중 2문제를 맞히고 마지막 페이지에 도착한 상태였고, 이를 이용해 s를 유추해 내면 대략 100점 만점의 점수(score)를 나타내는 변수라고 생각할 수 있었다.

그리하여 즉시 /lwf/so/intro_safe_q.asp?t=1&s=100 이라는 주소로 접속을 해 보았더니 여전히 'Try Again' 메시지가 떴다.
사용자 삽입 이미지

혹시나 하여 t를 0으로 주어 접속을 해 보았다. 그랬더니...
사용자 삽입 이미지

한 문제라도 틀렸을 때 나오던 Try Again 메시지는 없어지고 반가운 Pass 메시지가 떴다.

물론 서버상 정보에도 나는 이 문제를 모두 통과한 것으로 기록되어 있다. 국제 대회에서 이러한 문제가 발생한 이유는 페이지 설계에서 보안을 무시했던 탓이다. POST나 GET이나 그게 그거겠지 하는 생각이나 세션 관리의 허술, 자바스크립트의 지나친 노출 등이 모두 사이트 설계의 헛점이다. 이 사이트의 경우 세션 등으로 처리해야 할 데이터를 GET으로 넘겨줌으로써 이를 사용자가 너무나 쉽게 조작할 수 있게 했다는 것이다. 퀴즈이니까 이런 문제들이 그냥 넘어갈 수 있지, 만약 개인정보가 이러한 방식으로 날아다닌다면 심각한 문제가 될 것이다.

이러한 예를 통해서 자신이 페이지 설계시에는 이러한 점들을 최대한 고려하여 이렇게 '어이없게' 뚫리는 일이 없도록 하자.

(덕분에 우리 팀원들은 문제를 풀지 않고 원터치로 모든 문제를 패스할 수 있게 되었다.)




2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry
평소 웹 서핑을 하다 보면 버튼을 눌렀을 때 글 내용이 펼쳐지며 보이는 것을 본 적이 있을 것이다.
일단 다음 예제를 보자.

글 내용 펼치기

위와 같은 효과를 주기 위해서는 Span태그의 스타일인 Display를 조절하면 된다. 위 예제의 소스코드는 다음과 같다.

(Language : html4strict)
  1. <SPAN id=test1_1><A   href="javascript:Open();">글 내용 펼치기</A></SPAN>
  2. <SPAN id=test1_2 style="DISPLAY: none"><A href="javascript:Close();">글 내용 접기</A><br />글 내용을 펼쳐야 이 부분이 보이게 됩니다. </SPAN>
  3. <script name=javascript>
  4.     function Open()
  5.     {
  6.         document.getElementById('test1_1').style.display='none';
  7.         document.getElementById('test1_2').style.display='';
  8.     }
  9.     function Close()
  10.     {
  11.         document.getElementById('test1_2').style.display='none';
  12.         document.getElementById('test1_1').style.display='';
  13.     }
  14. </script>


원리는 간단하다. '글 내용 펼치기' 링크와 실제 보여줄 내용을 각각 다른 span 안에 넣어둔 후 두 레이어가 서로 번갈아가며 보이면 되는 것이다. 이를 자바스크립트를 이용하여 구현하기 위해서는 getElementById라는 함수를 쓰게 되는데, 이는 span 태그에서 설정한 id를 이용하여 해당 객체를 얻어내는 기능을 한다. 객체를 얻어 낸 후에는 스타일의 디스플레이 속성을 조절하게 된다. 디스플레이 속성에 아무 값도 주지 않았을 경우에는 레이어가 보이며, none 속성을 주면 레이어가 보이지 않게 된다.


2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
Posted by Harry