javascript mini xhtml parser
약 2년전부터 작업하던 건데 최근 보안 패치 나오길래 조금 손보고 올려 봅니다.
javascript 로 구동되는 미니 xhtml parser입니다.
html 소스를 최대한 xhtml형식으로 변환해 줍니다. 예를 들어 <br> 같은 건 <br />이런 식으로 변환을 해줍니다. 또한 safeMode가 있어 해가 될 만한 태그를 삭제합니다. 최근 제로보드에서 보안패치를 했죠? 그와 마찬가지로 <script>나 <style>이나 <iframe>을 없애줍니다.
첨부된 파일을 보면 xhtml.js와 test-html2xhtml.html 이 있습니다. test-html2xhtml.html 을 실행해 보셔서 소스를 한번 넣고 테스트해보면 이 프로그램이 얼마나 유용한지를 발견할 수 있습니다.
이 프로그램을 개발한 목적도 그렇고 또 가장 많이 쓰일 용도가 위지윅 에디터에서 가장 효과적일 겁니다. 여기서 쓰는 함수는 getXHTML()이거 하나인데요, 가령 에디터에서 폼전송을 하기전에 사용하면 됩니다. 이런식으로요:
위의 소스는 에디터 만들어 본 사람들은 금방 무얼 의미하는지 알 겁니다. geditor에 적용하면 먼저 xhtml.js를 등록을 한 후에 geditor.js를 열어 this.update 함수를 찾아 document.getElementById(ge_content).value = 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로 해보고 일반 모드로도 테스트해보시면 금방 이해합니다.
마지막으로 copyright가 걸려있지만 아무도 소스를 수정할 일은 없을거라 생각합니다. 문제가 발생하면 저한테 연락하시면 되고 또 상업용이든 비상업용이든 자유롭게 쓸 수 있도록 명기해 놓았습니다.
앞으로 xhtml형식이 중요해지고 또 에디터 관련 보안이 중요하기에 필요한 분들이 있을거라 생각됩니다.
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>
<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에서 이동 됨]
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 1개