昨天和大家简单介绍了微信朋友圈空信息的原因后,不少朋友都在问如果在H5中出现这个问题怎么办,或者如果这样回来带什么问题,于是就有了本篇文章。 注意本篇文章为“硬核”内容,云层一本正经的写代码。 为了方便这里首先先把HTML代码放出 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>WX朋友圈信息BUG原理演示</title> </head> <body> <script> function checkinput() { if(window.name == "") { document.getElementById("message").value=""; window.name="modify"; } var1=document.getElementById("message").value; if(var1.trim().length==0) document.getElementById("button").disabled=true; else document.getElementById("button").disabled=false; } </script> <form id="form1" action="/api" method="POST" > <input type="button" id="button" value="发表" style="font-size: 30px;left: 30px;top: 0;"><br> <textarea cols="40" rows="5" id="message" name="message" onkeypress="checkinput()">这一刻的想法...</textarea> </form> </body> </html> 将这个代码保存为html后缀文件,用浏览器打开即可看到下面的效果 接着试试点击文本框,然后删掉所有内容(发表按钮变灰) 接着添加两个空格,会发现按钮发表还是灰色,如果添加别的内容就能看到按钮正常使用。 接着解释一下代码及工作原理 基于onkeyup的事件触发,调用checkinput函数 <textarea cols="40" rows="5" id="message" name="message" onkeypress="checkinput()">这一刻的想法...</textarea> 点击文本框输入内容先清空默认提示信息,为了避免再次输入的时候继续清空,所以修改了window.name的值。 if(window.name == "") { document.getElementById("message").value=""; window.name="modify"; } 获取文本框的值,然后去空格检查长度是否是零,如果是零则让按钮不可用,否则让按钮可用。 var1=document.getElementById("message").value; if(var1.trim().length==0) document.getElementById("button").disabled=true; else document.getElementById("button").disabled=false; } 好了基本代码这里写完了,这里对关键几个知识点做个说明 //如何确保页面第一次打开,window.name属性第一次打开页面为空 window.name == "" //如何通过js获取一个文本框的值,这里需要文本框有ID属性 document.getElementById("message").value //如何修改一个按钮为灰色不可用 document.getElementById("button").disabled=true //如何判断一个文本框内容是否为空,trim()函数去空格,length拿字符串长度 var1.trim().length==0 代码到这里,是不是就出现了不能提交空内容的情况了! 介绍下常见的浏览器客户端的两个小办法 A.和微信的朋友圈问题类似,不触发checkinput()函数 按F12打开Chrome浏览器开发工具,在下面的Console内输入代码 document.getElementById("message").value="" 然后敲下回车 接着你就会发现文本框的内容为空了,而按钮仍然可以使用。同理还可以通过这个命令模式直接把按钮的灰色改成可用。 B.不管按钮状态直接触发表单提交 大家会说直接发请求是不是就行了,这是一种方法,但是如果涉及到协议加密或者有特殊令牌就麻烦了,所以这里仍然基于表单提交的方式来做。 直接调用表单提交即可。 所以这里再次强调一下所有客户端的内容都是不可靠的哪怕你做了JS混淆也可以通过Eval()函数执行,所以服务器端的校验是非常重要的,当然同样就算是服务器返回的内容也要做校验,避免被注入。 很多注入都是基于客户端及服务器端的校验方式及时序问题,所以小问题虽小,产生的影响会可能很大。 备注 文本没有使用框架,是为了让大家更好的知道原理,如果使用Vue或者Jquery类的框架,道理雷同。 精益流程 赋能技术 |
|