필자는 지식IN에서 지식인 이용규정에 조금이라도 어긋나는 글을 보면 즉각 신고하는 편이다. 오늘도 지식IN을 서핑하다가 파일공유 사이트를 홍보하는 답변을 보고 신고를 하기 위해 '신고' 버튼을 눌렀다. 하지만 볼 수 있었던 것은 신고 창이 아닌, '페이지를 찾을 수 없습니다' 라는 에러 페이지였다. 순간 인터넷이 끊긴 것인가 하고 다른 사이트에 접속해 보았지만 접속은 원활히 잘 되었다. 네이버가 죽었나 싶어서 다른 네이버 페이지에도 접속해보았지만 별 문제를 찾을 수 없었다. 마지막으로 '신고' 버튼의 링크를 확인해 보았더니, 다음과 같은 링크로 연결되었다.

 javascript<x sharpei common_editor kin.naver.com http: target='_blank'>:go_report_answer('ING','1313','2985462','1');

네이버에서 처리하는 과정에 에러가 나서 주소 부분이 잘못 입력된 것이겠지 싶어 직접 자바스크립트를 실행하기로 했다. 주소창에 다음을 입력했다.

javascript:go_report_answer('ING', '1313', '2985462','1');

하지만, 신고 창의 '제목' 란과 '작성자 ID' 란은 공란이었다. 분명 제목과 작성자 ID가 떠야 할 터인데 말이었다. 이상하다 싶어 질문의 작성 날짜를 확인했다. 작성 날짜는 9월 18일로 되어 있었다. 바로 해당 디렉토리의 해결중 질문 DB를 뒤져보았다. 하지만 가장 오래 전에 작성된 질문이 9월 18일의 질문이었고, 더 이전의 글은 이미 '미해결'이나 '완료'로 넘어간 상태였다.

그 때 필자가 발견한 것은 광고 답변은 진짜 답변이 아닌 가짜 답변이었다는 것이다. 순간 섬뜩함을 느꼈다. 즉, 질문 페이지는 다음과 같았다.

사용자 삽입 이미지

'한글오류 긴급패치 다운로드' 부분이 파일공유 사이트로 연결되는 링크이다.


위쪽의 질문과 답변은 조작된 것이었고, 아래쪽에 하나 더 있는 질문부터가 진짜 질문과 답변이었다. 실제로 위쪽의 질문과 답변의 작성자 아이디에는 링크가 걸려 있지 않았으며, 답변 수도 실제 답변 수와 일치하지 않았다.

누가 어떻게 이런 짓을 했을까 하며 소스를 가만히 살펴 보았다. 신기한 것은 분명 광고 내용은 페이지의 가장 위쪽에 있는데, 소스 상에서는 광고 내용이 가장 밑에 있는 것이었다. 가장 밑에 있는 답변을 보았더니 아무 내용도 없었다. 수상한 일이었다.

사용자 삽입 이미지

확실히 어떻게 렌더링이 되는 것인가 하여 Firefox의 부가기능인 Firebug의 Element Inspector를 이용하여 구조를 살펴 보았다.

결과는 정말 이상했다. 소스상에서는 가장 아래쪽에 있는 셀의 내용(가짜 질문 및 답변)이 렌더링이 된 후에는 테이블의 바로 위에 와서 붙는 것이었다.

순간 브라우저의 렌더링 버그라는 생각이 들어 소스를 가만히 분석해 보았더니, 셀 안쪽이 다음과 같았다.

<td> <td> </tr> <div>가짜 질문 및 답변</div> </td>

중간에 <td> </tr>이라는, 구조에 어긋나는 태그가 들어 있었다. 이것이 버그를 유도하는 것일 것이라는 생각이 들어서 간단한 페이지를 작성해서 테스트를 해 보았다. 가로 세로 2개의 셀이 있는 테이블인데, 우측 하단의 셀 안에 <td></tr>의 태그를 넣은 것이었다. 결과는 놀라웠다.

사용자 삽입 이미지

보이는 결과와 같이, 우측 하단의 셀의 내용이 테이블 위쪽으로 나왔다.

결국, 가짜 질문과 답변은 소스만 있는, 그럴듯하게 보이는 것들일 뿐이고, 실제 광고의 작성자는 가장 아래의 답변을 작성한 사람이었던 것이다. 광고를 하는 사람은 가짜 답변의 작성자 ID를 조작하고 신고 링크를 무력화시킴으로써 좀 더 오랫동안 삭제당하지 않고, 진짜 자기 ID를 들키지 않을 수 있었을 것이다.

네이버 측도 이를 알고 있었던 것인지, 필자가 포스팅을 하려고 준비하는 순간 해당 답변을 삭제했다. 다행히도 원래 보고 있던 페이지를 닫지 않아 스크린샷을 찍을 수 있었다.




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