필자는 지식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

IE와 비 IE 브라우저는 이벤트가 발생했을 때 이벤트에 대한 세부정보를 담고 있는 event 객체를 사용하는 방법에 있어서 많은 차이를 보인다. 가장 먼저, 그 전달 방법부터가 다르다. 다음은 브라우저 별 event 객체의 전달 방법을 나타내었다.

obj의 onclick 이벤트에 process() 함수를 할당

IE의 경우function process()
{
        alert(event.srcElement.getAttribute("id"));
}

<div id="obj" onclick="process();"/>

비 IE 브라우저의 경우function process(e)
{
        alert(e.target.getAttribute("id"));
}

<div id="obj" onclick="process(event);"/>

event 객체를 사용하는 방법이 다를 뿐만 아니라 event 객체의 속성 중 이벤트가 발생한 객체를 나타내는 속성의 이름도 각각 srcElementtarget으로 다르다. 이외에도 많은 속성 이름이 호환되지 않기 때문에 주의를 요한다.

따라서 IE와 비 IE 브라우저 모두에서 작동하는 코드를 작성하기 위해서는 다음과 같이 한다.

IE 및 비 IE 브라우저 모두에서 작동하는 소스function process(e)
{
        if(event) alert(event.srcElement.getAttribute("id"));
        else alert(e.target.getAttribute("id"));
}

<div id="obj" onclick="process(event);"/>



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

컴퓨터에서 Cross 라는 말이 붙으면 호환이 된다는 의미이다. Cross-Language라고 하면 언어 간 호환이 되는 패키지나 클래스를 일컫고, Cross-Platform이라고 하면 플랫폼간 호환이 가능한 것을 말한다. 마찬가지로, Cross-Browsing이라는 브라우저간 호환이 되도록 하는 것을 일컫는다.

Apec Cyber Academy의 과제 중 하나로 학교와 고장, 팀원을 소개하는 웹 페이지를 작성하게 되었다. 그런데 여기서 제시한 '잘 만들어진 페이지'의 기준 중 하나가 '모든 브라우저에서 정상적으로 작동한다'이다. 즉, Cross-Browsing이 얼마나 잘 되었느냐가 채점 시 반영된다는 것이었다. 때문에 페이지 하나를 만들면서도 Cross-Browsing 문제에 굉장히 예민해질 수밖에 없었다.

많은 사람들이 아직까지 Cross-Browsing에 대해 많은 지식이나 개념을 갖지 못하고 있는 것이 사실이다. Cross-Browsing은 브라우저를 크게 Microsoft Internet Explorer와 그 이외의 브라우저, 두 개로 나누었을 때 둘 간의 호환이 많은 부분 되지 않기 때문에 이를 해결해 주는 것이다. 역시 문제는 MS IE이다. IE 7로 넘어 오면서 상당 부분 개선된 것은 사실이나 아직 Opera나 Firefox의 표준 준수율을 따라가기에는 그 거리가 굉장히 멀다. 시장 지배력은 가장 큰 브라우저로서 페이지 제작과 이용의 편의를 위해 MS는 각성하고 하루 뻘리 표준 준수율을 높여야 할 것이다.

필자가 페이지를 작성하면서 두 브라우저간 소스를 다르게 작성한 부분은 다음과 같다.

호환성 확보 항목
  • Width & Height의 영역 차이
    • IE는 WidthHeight으로 정해진 범위 내에 Padding이 포함되지만, 이외의 브라우저PaddingWidthHeight의 밖에 있다. 엄밀히 따진다면 IE가 옳지 못한 렌더링이다.
  • 투명도 관련 스타일의 차이
    • IE의 경우 투명도 값을 filter로 조절하지만, 이외의 브라우저의 경우 투명도 값을 opacity로 조절한다.
  • Javascript로 Stylesheet를 조절하는 방법의 차이
    • IE의 경우 object.style.cssText="width:100%;"와 같이 스타일을 변경할 수 있지만, 이외의 브라우저의 경우 object.style.width="100%;"와 같이 한다.
  • Event 객체의 전달 방법의 차이
    • IE의 경우 이벤트가 발생했을 때 호출된 함수에서 자유롭게 브라우저 내장객체인 event를 사용할 수 있지만, 이외의 브라우저의 경우 이벤트 발생 시점에서 함수에 매개변수로 event객체를 넘겨 주어야 함수 내부에서 이를 참조할 수 있다.
  • Class 속성 이름의 차이
    • IE의 경우 className이라는 속성 이름을 통해 객체의 Class 이름에 접근할 수 있지만, 이외의 브라우저class라는 속성 이름으로 접근해야 한다.
  • 동적 이벤트 할당 방법의 차이
    • IE의 경우 onclick 속성값에 함수 인스턴스를 할당하면 되지만, 비 IE 브라우저의 경우 setAttribute 함수를 이용해야 한다.



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