[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

2016년 2월 5일 금요일

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

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

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

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

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

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

Html

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

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

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

Js

// 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를 사용하는 상황에서 이걸 사용안할 이유는 없었다.

Js

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

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

참고로 HTML태그를 벗겨내고 내용만 가져오는 stripTags()도 있다.

댓글 없음:

댓글 쓰기