이전
목록
다음
l

javascript mini xhtml parser

letsgolee
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2008-09-04 (목) 14:16:04 · 3335 · 1
약 2년전부터 작업하던 건데 최근 보안 패치 나오길래 조금 손보고 올려 봅니다.

javascript 로 구동되는 미니 xhtml parser입니다.

html 소스를 최대한 xhtml형식으로 변환해 줍니다. 예를 들어 <br> 같은 건 <br />이런 식으로 변환을 해줍니다. 또한 safeMode가 있어 해가 될 만한 태그를 삭제합니다. 최근 제로보드에서 보안패치를 했죠? 그와 마찬가지로 <script>나 <style>이나 <iframe>을 없애줍니다.

첨부된 파일을 보면 xhtml.js와 test-html2xhtml.html 이 있습니다. test-html2xhtml.html 을 실행해 보셔서 소스를 한번 넣고 테스트해보면 이 프로그램이 얼마나 유용한지를 발견할 수 있습니다.

이 프로그램을 개발한 목적도 그렇고 또 가장 많이 쓰일 용도가 위지윅 에디터에서 가장 효과적일 겁니다. 여기서 쓰는 함수는 getXHTML()이거 하나인데요, 가령 에디터에서 폼전송을 하기전에 사용하면 됩니다. 이런식으로요:


var content = getXHTML(document.getElementById('content').contentWindow.document.body.innerHTML);



위의 소스는 에디터 만들어 본 사람들은 금방 무얼 의미하는지 알 겁니다. geditor에 적용하면 먼저 xhtml.js를 등록을 한 후에 geditor.js를 열어 this.update 함수를 찾아 document.getElementById(ge_content).value = ge_code; 이 소스 이전에 다음을 입력합니다.


ge_code = getXHTML(ge_code);

또 mode_change 함수도 변경을 해서 HTML Source를 체크할 때 보게 할 수도 있습니다.



형식은 다음과 같습니다.

getXHTML(data, safeMode, useRGB);

- data는 xhtml형식으로 변환할 데이터
- safeMode는 해로운 코드를 제거할 것인지 옵션이고 기본 값은 true입니다.
- useRGB는 기본 값은 false이고 true로 놓으면 rgb()함수를 그대로 둡니다. 기본값인 false로 하면 rgb()함수를 헥사 형태로 변환해 줍니다. 예를 들어 <img style="color:rgb(22,33,22);"> 이것을 테스트하면 <img style="color:#162116;" /> 으로 변환됩니다.


주의할 점은 이 프로그램은 <html>에서 </html>에 이르기까지 모든 tag를 xhtml형식으로 바꾸는 것이 아니라 미니 형태라는 점입니다. <body>에서 </body>까지를 생각하시면 됩니다.


다음의 코드를 넣어서 테스트 해보세요. safeMode로 해보고 일반 모드로도 테스트해보시면 금방 이해합니다.


<SCRIPT type=javascript>alert('start!')</SCRIPT>
<STYLE>body {FONT-FAMILY:<? echo $fonts; ?>; FONT-SIZE: 12px;}</STYLE>

<BR style="<? echo $style; ?>">
<TABLE style="color:rgb(234,0,23);"><TR><TD onmouseover=go()>hehe</TD><TD>hello <?php echo $name; ?></TD></TR></TABLE><a href=javascript:mousefreeze()>clickme</a><DIV onclick="alert('do not click')">do not click</DIV><SCRIPT>for (i=0;i<10000;i++) {alert('.');}</SCRIPT><<? echo $tagname; ?>>nice to meet to you</<? echo $tagname; ?>> Mr. <a href=<? echo $url; ?>>Lee</a><FONT name=<? echo 'v'; ?>erdana>bye</FONT>
<FORM>
<TEXTAREA wrap<? print 'ed'; ?>>This is the test. good <?=$morning?></TEXTAREA>
<STRONG <? echo $strong_style; ?>>strong words</STRONG><A href=http://<? echo $url2; ?>>visit</A> <B style="boarder:<? print $bdrtype; ?>;">homepage</B>
<!-- This is a comment. <? echo 'and this is a server script hidden in the comment'; ?>-->
</FORM>
<a href=javascript:go_url(...)><img src="javascript:go_url('...')"></a>
<img src="register.php?id=letsgolee&act=make_admin">
<object type='application/x-shockwave-flash' width='402px' height='324px' align='middle' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'>
<param name='movie' value='http://flvs.daum.net/flvPlayer.swf?vid=syTwqjJ2dFQ$'>
<param name='allowScriptAccess' value='always'>
<param name='allowFullScreen' value='true'>
<embed src='http://flvs.daum.net/flvPlayer.swf?vid=syTwqjJ2dFQ$' width='402px' height='324px' allowScriptAccess='always' type='application/x-shockwave-flash' allowFullScreen='true'></embed>
</object>
<object type='application/x-shockwave-flash'>
<param name='movie' value='http://flvs.daum.net/flvPlayer.swf?vid=syTwqjJ2dFQ$'>
<param name="tester" src="http://gnu/register.php?id=letsgolee">
<embed src='http://flvs.daum.net/flvPlayer.swf?vid=syTwqjJ2dFQ$'></embed>
</object>
<img src='http://gnu/register.php?id=letsgolee'>
<img src='http://gnu/register.jpg'>
<a href=http://www.color123.co.kr>color123.co.kr</a>




마지막으로 copyright가 걸려있지만 아무도 소스를 수정할 일은 없을거라 생각합니다. 문제가 발생하면 저한테 연락하시면 되고 또 상업용이든 비상업용이든 자유롭게 쓸 수 있도록 명기해 놓았습니다.

앞으로 xhtml형식이 중요해지고 또 에디터 관련 보안이 중요하기에 필요한 분들이 있을거라 생각됩니다.

[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
#개발자팁 #개발자 #팁자료실 #flash

첨부파일

html2xhtml.zip (4.2 KB) 38회 2008-09-04 14:16
|

댓글 1개

lletsgolee
프로필 보기이 회원 글보기이 회원의 댓글보기
 2008-09-04 (목) 14:18:14
script라는 말이 들어가면 자동으로 끝머리에 -x를 붙이네요... 소스 넣으실 때 빼고 넣으세요.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
08-09-05 조회 4,568
08-09-05 조회 3,506
08-09-05 조회 5,089
08-09-05 조회 2,971
08-09-05 조회 3,564
08-09-05 조회 3,477
08-09-05 조회 2,921
08-09-05 조회 3,444
08-09-04 조회 3,336
08-09-04 조회 3,253
08-09-03 조회 4,414
08-09-03 조회 3,394
08-09-03 조회 2,667
08-09-03 조회 2,678
08-09-03 조회 3,388
08-09-01 조회 4,500
08-08-29 조회 3,506
08-08-28 조회 2,758
08-08-28 조회 5,545
08-08-27 조회 3,266
08-08-21 조회 4,794
08-08-18 조회 7,399
08-08-18 조회 2,873
08-08-18 조회 2,843
08-08-18 조회 2,442
08-08-17 조회 2,585
08-08-16 조회 4,389
08-08-15 조회 3,257
08-08-15 조회 3,863
08-08-14 조회 2,476
08-08-14 조회 4,465
08-08-13 조회 3,360
08-08-12 조회 3,857
08-08-11 조회 2,627
08-08-10 조회 2,991
08-08-09 조회 2,336
08-08-08 조회 2,444
08-08-08 조회 3,020
08-08-08 조회 2,387
08-08-08 조회 5,491
08-08-07 조회 2,749
08-08-05 조회 3,175
08-08-03 조회 8,381
08-08-03 조회 2,529
08-08-02 조회 3,102
08-08-01 조회 4,450
08-07-31 조회 2,422
08-07-31 조회 3,150
08-07-31 조회 2,297
08-07-31 조회 3,001
08-07-30 조회 3,428
08-07-28 조회 4,309
08-07-25 조회 2,421
08-07-23 조회 2,504
08-07-23 조회 2,766
08-07-22 조회 2,393
08-07-22 조회 5,540
08-07-22 조회 5,133
08-07-22 조회 4,028
08-07-20 조회 2,741
08-07-19 조회 2,506
08-07-18 조회 2,790
08-07-18 조회 3,756
08-07-17 조회 2,884
08-07-15 조회 3,271
08-07-15 조회 2,464
08-07-11 조회 2,213
08-07-11 조회 2,292
08-07-10 조회 4,235
08-07-10 조회 3,697
08-07-10 조회 3,249
08-07-10 조회 3,270
08-07-10 조회 2,984
08-07-10 조회 3,438
08-07-10 조회 3,272
08-07-10 조회 3,127
08-07-08 조회 3,061
08-07-08 조회 2,326
08-07-06 조회 3,002
08-07-06 조회 3,535
08-07-05 조회 3,552
08-07-04 조회 2,919
08-07-03 조회 2,710
08-07-03 조회 2,583
08-07-02 조회 3,745
08-06-30 조회 3,819
08-06-30 조회 3,302
08-06-30 조회 3,608
08-06-28 조회 3,927
08-06-27 조회 2,476
08-06-27 조회 2,288
08-06-27 조회 7,572
08-06-27 조회 2,345
08-06-25 조회 2,782
08-06-24 조회 2,983
08-06-24 조회 2,244
08-06-23 조회 2,315
08-06-19 조회 3,100
08-06-19 조회 2,693
08-06-19 조회 4,861
글쓰기