我们从实现最简单、最基本的功能开始。
一、显示源码/显示预览
我们通过btnShowSrc来实现示源码/显示预览功能,根据btnShowSrc.value来判断<iframe>的显示的内容并切换。
<iframe>默认为显示预览,所以btnShowSrc.value值为“显示源码”,点击它后,<iframe>就显示源码,并将按钮的value改为“显示预览” 。代码如下:
function showSrc() { if (btnShowSrc.value=="显示源码") { edRichBody.innerText = edRichBody.innerHTML; btnShowSrc.value = "显示预览"; btnShowSrc.style.background = "cyan"; } else { edRichBody.innerHTML = edRichBody.innerText; btnShowSrc.value = "显示源码"; btnShowSrc.style.background = "yellow"; } }
二、清除格式
我们要处理的公文可能是从word等文字处理程序复制过来的,本身带有一些格式,比如:
SQL注入基础
一、SQL注入分类
(一)什么是SQL注入?
SLQ注入(英文: Sqlinject):当web应用向后台数据库传递SQL语句进行数据库操作时,如果对用户输入的参数没有经过严格的过滤,那么用户可以构造特殊的sq1语句,从而带入到数据库中执行,获取或修改数据库中的数据。
例如很多影视网站泄露VIP会员密码大多就是通过SQL注入漏洞暴露的,这类网站特别容易受到SQL注入攻击。
其源码是这样的:
<p></p><p class="MsoNormal"><p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US" style="font-family:黑体">SQL</span><span style="font-family:黑体">注入基础<span lang="EN-US"><o:p></o:p></span></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span style="font-family:黑体">一、<span lang="EN-US">SQL</span>注入分类<span lang="EN-US"><o:p></o:p></span></span></p>
<p class="MsoNormal" style="text-indent:21.1pt;mso-char-indent-count:2.0"><b style="mso-bidi-font-weight:normal"><span style="font-family:楷体">(一)什么是<span lang="EN-US">SQL</span>注入<span lang="EN-US">?<o:p></o:p></span></span></b></p>
<p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span lang="EN-US">SLQ</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">注入</span><span lang="EN-US">(</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">英文</span><span lang="EN-US">: Sqlinject)</span><span style="font-family:宋体;mso-ascii-font-family:
Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">:当</span><span lang="EN-US">web</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">应用向后台数据库传递</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">语句进行数据库操作时,如果对用户输入的参数没有经过严格的过滤,那么用户可以构造特殊的</span><span lang="EN-US">sq1</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">语句,从而带入到数据库中执行,获取或修改数据库中的数据。</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:
Calibri;mso-hansi-theme-font:minor-latin">例如很多影视网站泄露</span><span lang="EN-US">VIP</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:
Calibri;mso-hansi-theme-font:minor-latin">会员密码大多就是通过</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:
Calibri;mso-hansi-theme-font:minor-latin">注入漏洞暴露的,这类网站特别容易受到</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:
minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">注入攻击。</span><span lang="EN-US"><o:p></o:p></span></p><br></p>
这些格式将影响排版的效果,所以我们用“清除格式”按钮调用自定义函数clearDocFmt()来清除这些格式。
我们需要先保留公文的分段信息,在html代码中分段一般是通过<p></p>这一对标签来定义的,所以我们要保留<P>这个标签的信息,但是<P>中一般还带有属性:
<p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0">
所以我们不能直接使用<p>,而是用“<p”。
先用字符串的split方法按'<p'将公文内容按段分解成一个数组,然后逐段进行处理:
1.用数组shift方法移除公文首部多余的空行
2.用数组的pop方法移除公文尾部多余的空行
3.用自定义函数stripPattribs移除<p>标签的相关属性。
4.用正则表达式为字符串对象构造stripHTML方法去除多余的html代码
5.用正则表达式为字符串对象构造trim方法去除首尾两端的多余空格
6.用replace方法去除 表示的空格
7.再次用数组的pop方法移除公文尾部多余的空行
8.利用数组的join()方法把处理好的各段信息连接起来。
相关代码如下:
function getClearInfoArray() { var s = edRichBody.innerHTML; var t = s.split('<p'); taDbg.value += "\n---getClearInfoArray()\n"; for (var i=0; i < t.length; i++) { taDbg.value += "\nt[" + i + "]=" + t[i]; } while (t[0].length==0 || t[0]=='></p>') { taDbg.value += "\nshift: " + t[0]; t.shift(); } while (t[t.length-1].length==0 || t[t.length-1]=='></p>') { taDbg.value += "\npop: " + t[t.length-1]; t.pop(); } for (var i=0; i < t.length; i++) { t[i] = stripPattribs(t[i]); t[i] = t[i].stripHTML(); t[i] = t[i].trim(); //去除首尾空格 t[i] = t[i].replace(/ /ig, ''); //去除空格代码 } while (t[t.length-1].length==0 || t[t.length-1]=='></p>') { taDbg.value += "\npop: " + t[t.length-1]; t.pop(); } taDbg.value += "\n---\n"; for (var i=0; i < t.length; i++) { taDbg.value += "\nt[" + i + "]=" + t[i]; } return t; } function clearDocFmt() { var s = '<p>' + getClearInfoArray().join('</p><p>'); edRichBody.innerHTML = s; }
代码运行的效果如下图:
完整的代码如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>公文一键排版</title> <meta name="author" content="purpleendurer" > <meta name="description" content="公文一键排版"> <script type="text/javascript"> const aFontName = [ "方正小标宋简体",//0 "黑体",//1 "微软雅黑",//2 "仿宋_GB2312",//3 "仿宋",//4 "楷体_GB2312",//5 "楷体",//6 "宋体",//7 "Arial",//8 "Wingdings 2"//9 ]; //sId:select control id, iDefSel:default selected function showFontNameSel(sId, iDefSel) { document.write('<select id="', sId, '" width="50">'); for (var i = 0; i < aFontName.length; i++) { document.write('<option value="', aFontName[i], '"'); document.write(i==iDefSel ? ' selected>' : '>'); document.write(aFontName[i],'</option>'); } document.write('</select>'); } const aFontSize = [ ['初号', 42],//0 ['小初', 36],//1 ['一号', 26],//2 ['小一', 24],//3 ['二号', 22],//4 ['小二', 18],//5 ['三号', 16],//6 ['小三', 15],//7 ['四号', 14],//8 ['小四', 12],//9 ['五号', 10.5], //10 ['小五', 9],//11 ['六号', 7.5],//12 ['小六', 6.5],//13 ['七号', 5.5],//14 ['八号', 5]//15 ]; //sId:select control id, iDefSel:default selected function showFontSizeSel(sId, iDefSel) { document.write('<select id="', sId, '">'); for (var i = 0; i < aFontSize.length; i++) { document.write('<option value="',aFontSize[i][1], '"'); document.write(i==iDefSel ? ' selected>' : '>'); document.write(aFontSize[i][0],'</option>'); } document.write('</select>'); } const aAlign = [ ["左对齐","left"],//0 ["居中对齐","center"],//1 ["右对齐","right"],//2 ["两端分散对齐","justify"]//3 ]; //sId:select control id, iDefSel:default selected function showAlignSel(sId, iDefSel) { document.write('<select id="', sId, '">'); for (var i = 0; i < aAlign.length; i++) { document.write('<option value="',aAlign[i][1], '"'); document.write(i==iDefSel ? ' selected>' : '>'); document.write(aAlign[i][0],'</option>'); } document.write('</select>'); } function showSrc() { if (btnShowSrc.value=="显示源码") { edRichBody.innerText = edRichBody.innerHTML; btnShowSrc.value = "显示预览"; btnShowSrc.style.background = "cyan"; } else { edRichBody.innerHTML = edRichBody.innerText; btnShowSrc.value = "显示源码"; btnShowSrc.style.background = "yellow"; } } function stripPattribs(s) { var i = s.indexOf('>'); return ((-1 != i) ? s.substr(i+1) : s); } String.prototype.stripHTML = function() { var reTag = /<(?:.|\s)*?>/g; //var reTag = /<[^>]+>/gi; //过滤所有html标签,但不包括html标签内的内容 return this.replace(reTag,""); } String.prototype.trim = function() {//去除首尾空格 return this.replace(/(^\s*)|(\s*$)/g, ""); /*var t = this.replace(/(^\s*)|(\s*$)/g, ""); return t =t.replace(/(^ *)|( *$)/g, ""); */ } function getClearInfoArray() { var s = edRichBody.innerHTML; var t = s.split('<p'); taDbg.value += "\n---getClearInfoArray()\n"; for (var i=0; i < t.length; i++) { taDbg.value += "\nt[" + i + "]=" + t[i]; } while (t[0].length==0 || t[0]=='></p>') { taDbg.value += "\nshift: " + t[0]; t.shift(); } while (t[t.length-1].length==0 || t[t.length-1]=='></p>') { taDbg.value += "\npop: " + t[t.length-1]; t.pop(); } for (var i=0; i < t.length; i++) { t[i] = stripPattribs(t[i]); t[i] = t[i].stripHTML(); t[i] = t[i].trim(); //去除首尾空格 t[i] = t[i].replace(/ /ig, ''); //去除空格代码 } while (t[t.length-1].length==0 || t[t.length-1]=='></p>') { taDbg.value += "\npop: " + t[t.length-1]; t.pop(); } taDbg.value += "\n---\n"; for (var i=0; i < t.length; i++) { taDbg.value += "\nt[" + i + "]=" + t[i]; } return t; } function clearDocFmt() { var s = '<p>' + getClearInfoArray().join('</p><p>'); edRichBody.innerHTML = s; } </script> </head> <body> <fieldset style="width: 1100px;"> <legend>实时编辑区</legend> <!-- <iframe id="editor" width="600px" height="200px" style="border: solid 1px;" src="http://nyncj.hechi.gov.cn"></iframe> //--> <iframe id="editor" width="1200px" height="400px" style="border: solid 1px;"></iframe> </fieldset> <p> <input type="button" id="btnclearDocFmt" value="清除格式" onclick="clearDocFmt()" /> <input type="button" id="btnsetDocFmt" value="一键排版" onclick="setDocFmt()" /> <input type="button" id="btnShowSrc" value="显示源码" onclick="showSrc()" style="background:yellow; border-radius: 25px;" /> <input type="button" id="btnB" value="B" title="加粗/正常" style="font-weight:bolder" onclick="execCmd('bold',false,null)" /> <input type="button" id="btnItalic" value="I" title="斜体/正常" style="font-weight:bolder;font-style:italic" onclick="execCmd('italic',false,null)" /> </p> <fieldset style="width: 1200px;"> <legend>参数设置</legend> <p>文件标题: <script> showFontNameSel("selDocTitleFontName", 0); document.write(' '); showFontSizeSel("selDocTitleFontSize", 4); document.write(' '); showAlignSel("selDocTitleAlign", 1); </script> <p>一级标题: <script> showFontNameSel("selPrimaryTitleFontName", 1); document.write(' '); showFontSizeSel("selPrimaryTitleFontSize", 6); </script> </p> <p>二级标题: <script> showFontNameSel("selSecondaryTitleFontName", 5); document.write(' '); showFontSizeSel("selSecondaryTitleFontSize", 6); </script> <input type="checkbox" checked id="cbSecondaryTitleString">粗体 </p> <p>三级标题: <input type="checkbox" checked id="cbThirdTitleString">粗体 </p> <p>行距(行间距):<input type="text" id="tbRowSp" value="28" size="2"><!-- row spacing//--> 段落首行行首空格数:<input type="text" id="tbLeadSpNum" value="2" size="2"> </P> </fieldset> <p>调试信息</p> <textarea id="taDbg" style="width: 1225px; height: 200px">调试信息</textarea> <script type="text/javascript"> const edRich = document.getElementById("editor"); const taDbg = document.getElementById("taDbg"); const btnShowSrc = document.getElementById("btnShowSrc"); //一级标题字号 font name var pt1fn = document.getElementById('selPrimaryTitleFontName').value; //一级标题字号 font size var pt1fs = document.getElementById('selPrimaryTitleFontSize').value; //alert(fs); //行距 row spacing var rs = document.getElementById('tbRowSp').value; //首行行首空格数 var sn = document.getElementById('tbLeadSpNum').value; // (iframe.contentDocument||iframe.contentWindow.document).body.innerHTML var edRichDoc; var edRichBody; if (typeof(edRich) !="undefined") { edRichDoc = edRich.contentWindow.document; edRichDoc.designMode = "on"; edRichDoc.contentEditable = true; edRichBody = edRichDoc.body; edRichBody.innerHTML = '<p><a href=""></a></p><p></p><p class="MsoNormal"><p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US" style="font-family:黑体">SQL</span><span style="font-family:黑体">注入基础<span lang="EN-US"><o:p></o:p></span></span></p><p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p><p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span style="font-family:黑体">一、<span lang="EN-US">SQL</span>注入分类<span lang="EN-US"><o:p></o:p></span></span></p><p class="MsoNormal" style="text-indent:21.1pt;mso-char-indent-count:2.0"><b style="mso-bidi-font-weight:normal"><span style="font-family:楷体">(一)什么是<span lang="EN-US">SQL</span>注入<span lang="EN-US">?<o:p></o:p></span></span></b></p><p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span lang="EN-US">SLQ</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">注入</span><span lang="EN-US">(</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">英文</span><span lang="EN-US">: Sqlinject)</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">:当</span><span lang="EN-US">web</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">应用向后台数据库传递</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">语句进行数据库操作时,如果对用户输入的参数没有经过严格的过滤,那么用户可以构造特殊的</span><span lang="EN-US">sq1</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">语句,从而带入到数据库中执行,获取或修改数据库中的数据。</span><span lang="EN-US"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">例如很多影视网站泄露</span><span lang="EN-US">VIP</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">会员密码大多就是通过</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">注入漏洞暴露的,这类网站特别容易受到</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">注入攻击。</span><span lang="EN-US"><o:p></o:p></span></p><br></p>'; } else { window.alert("undefined"); } </script> </body> </html>