Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

prototype.js로 스크립트 제거하기

prototype.js의 대단함에 또한번 놀랐다. 프레임워크를 쓴다는 것은 프레임워크에서 제공하는 편리함을 이용하고자 함인데 실제로는 별로 못쓰고 있다. 몇천줄짜리 js파일을 불러오고는 기껏 쓰는데 $와 $F가 전부이다. js프레임워크에 관심이 많아서 사용성을 늘리고 싶지만 생각처럼 쉽게 안되더군...

그래서 하나씩 쓸때마다 정리를 하려고 한다. 한번 쓴것은 다시 쓸 가능성이 높다? 정도? ㅋㅋㅋㅋ

스크립트를 날려버릴 필요가 있었다. 정확히는 게시판에 에디터를 달았는데 보통 에디터에서 그렇듯이 HTML모드와 편집모드가 있는데 스크립트를 처리하는 부분이 없어서 HTML모드에서 스크립트를 작성하면 그게 그대로 먹어버린다.

얼마전에 내 홈페이지에서도 제로보드가 처리 안되어 있어서 당했었는데... 단순히는 alert로 당난칠수도 있지만 좀 악의적으로 쓰려면 게시판의 HTML모드에서


<script type="text/javascript">
    window.onload = function() {
        document.location.href="http://www.naver.com";
    }
</script>

이런 소스를 넣어버리면 글을 읽으려고 제목을 누르는 순간 네이버로 바로 가버린다. ㅡ..ㅡ 이렇게 되어버리면 리스트에서 관리자가 글 삭제기능이 있지 않는한은 DB를 직접 만져줘야 한다.

그래서 이런 저런 고민중 script를 전체적으로 날려버리기로 했다. <script></script>가운데는 뭐가 올지 모르기 때문에 정규식으로 이부분을 다 날려버려야 했고 좋은 의도로 스크립트를 쓸일은 없으니 그냥 날리기만 하면 됐다. 난 정규식을 잘 못쓰기 때문에 의례 그렇듯이 검색에 들어갔고 곧 네박사에서 민이님의 블로그에서 내가 필요한 걸 얻었다.


// script부분 정규식으로 없애기
function removeScript()
{
    var re = /\r\n/g
    var strBox1 = document.all.box1.value;
    strBox1 = strBox1.replace(re, "@!-_-!@");
    re = /<\s*script.+?<\/\s*script\s*>/gi
    strBox1 = strBox1.replace(re, "");
    re = /@!-_-!@/g
    strBox1 = strBox1.replace(re, "\r\n");
    re = /^\r\n/g
    document.all.box2.value = strBox1.replace(re, "");
}

내가 짠 소스는 아니지만 소스를 좀 비교하기 위해서 발췌했다.(ㅡ..ㅡ) 딱 봐도 복잡하지만 찬찬히 보면 아주 어렵지는 않다. 줄바꾸기를 이모티콘(??)으로 교체한뒤에 스크립트 부분을 다 날려버리고 다시 이모티콘을 줄바꿈으로 교체해 준 다음에 다시 원래 값에 할당해 준 것이다.

잘 돌아가고 만족하고 있던 가운에 추가로 검색을 하던 가운데 구글링에서 중간에 prototype.js가 나와있는 글의 일부가 보였고 이 역할을 해주는 메서드가 들어있는 걸 알았다 ㅡ..ㅡ

이미 prototype.js를 사용하는 상황에서 이걸 사용안할 이유는 없었다.


$("box2").value = $F("box2").stripScripts();

이렇게 간단히 바뀌었다. ㅡ..ㅡ(이거 돌아가겠지? $F가 신경쓰이네.. ㅡ..ㅡ 실소스에선 에디터라 변수를 사용한 관계로 그냥 보고 적었는데.. ㅎㅎㅎ 어쨌든...) 12줄의 코드가 단 1줄로 바뀌었다. 진짜 prototype.js만 잘 써도... ㅡ..ㅡ
 
참고로 HTML태그를 벗겨내고 내용만 가져오는 stripTags()도 있다.
2007/12/04 01:16 2007/12/04 01:16