安全測試2_Web前端知識學習
阿新 • • 發佈：2017-09-09
sha 是否 == 前端 時間 發生 cli 用戶名 class
上次講到安全的簡介，這次就來簡單的講解下基本的前端知識（html、js、css（不作講解），牛逼的請忽略！！！
1、Html簡單概述：
Html和Html DOM
2、Html字符實體（借用別人的，詳細可以百度了解更多字符實體）：
3、了解Html常見事件屬性：
onerror（在錯誤發生時運行的腳本）、onload（頁面結束加載之後觸發）、onclick（元素上發生鼠標點擊時觸發）、onchange（在元素值被改變時運行的腳本）、onfocus（當元素獲得焦點時運行的腳本）、oninput（當元素獲得用戶輸入時運行的腳本）、onmousemove（當鼠標指針移動到元素上時觸發）、onsubmit（在提交表單時觸發）、onkeydown（在用戶按下按鍵時觸發）
詳情請見：http://www.w3school.com.cn/tags/html_ref_eventattributes.asp。
4、JS簡單概述：
5、前端知識要求（下面是簡單的一個頁面）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自己網頁登錄</title> <style type="text/css"> .div-left{ float: left;padding: 150px 60px;border: 100px; } .div-right{ float: right;margin-right: 100px;margin-top: 200px;padding: 200px 80px;box-shadow: 0 0 20px; } .shuru-input{ padding: 0 40px;height: 40px;display: block;width: 70%;border: 1px solid ;border-radius: 2px; }</style> <script language="javascript" type="text/javascript"> function addCookie(name,value,days,path){ /**添加設置cookie**/ var name = escape(name); var value = escape(value); var expires = new Date(); expires.setTime(expires.getTime() + days * 3600000 * 24); //path=/，表示cookie能在整個網站下使用，path=/temp，表示cookie只能在temp目錄下使用 path = path == "" ? "" : ";path=" + path; //GMT(Greenwich Mean Time)是格林尼治平時，現在的標準時間，協調世界時是UTC //參數days只能是數字型 var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString(); document.cookie = name + "=" + value + _expires + path; } function getCookieValue(name){ /**獲取cookie的值，根據cookie的鍵獲取值**/ //用處理字符串的方式查找到key對應value var name = escape(name); //讀cookie屬性，這將返回文檔的所有cookie var allcookies = document.cookie; //查找名為name的cookie的開始位置 name += "="; var pos = allcookies.indexOf(name); //如果找到了具有該名字的cookie，那麽提取並使用它的值 if (pos != -1){ //如果pos值為-1則說明搜索"version="失敗 var start = pos + name.length; //cookie值開始的位置 var end = allcookies.indexOf(";",start); //從cookie值開始的位置起搜索第一個";"的位置,即cookie值結尾的位置 if (end == -1) end = allcookies.length; //如果end值為-1說明cookie列表裏只有一個cookie var value = allcookies.substring(start,end); //提取cookie的值 return (value); //對它解碼 }else{ //搜索失敗，返回空字符串 return ""; } } function deleteCookie(name,path){ /**根據cookie的鍵，刪除cookie，其實就是設置其失效**/ var name = escape(name); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path; } /**實現功能，保存用戶的登錄信息到cookie中。當登錄頁面被打開時，就查詢cookie**/ window.onload = function(){ var userNameValue = getCookieValue("userName"); document.getElementById("txtUserName").value = userNameValue; var userPassValue = getCookieValue("userPass"); document.getElementById("txtUserPass").value = userPassValue; } function userLogin(){ /**用戶登錄，其中需要判斷是否選擇記住密碼**/ //簡單驗證一下 var userName = document.getElementById("txtUserName").value; if(userName == ‘‘){ alert("請輸入用戶名。"); return; } var userPass = document.getElementById("txtUserPass").value; if(userPass == ‘‘){ alert("請輸入密碼。"); return; } var objChk = document.getElementById("chkRememberPass"); if(objChk.checked){ //添加cookie addCookie("userName",userName,7,"/"); addCookie("userPass",userPass,7,"/"); alert("記住了你的密碼登錄。"); window.location.href = "login.php"; }else{ alert("不記密碼登錄。"); window.location.href = "login.php"; } } </script> </head> <body style="background: #0080FF;opacity: 0.8;"> <script type="text/javascript"> document.write(Date()); </script> <div class="div-left"> <img src="login-left-picture.png" alt="左圖"> </div> <div class="div-right"> <h3 style="margin-top: -150px;text-align: center;font-size: 30px;padding-bottom: 30px;margin-bottom: 30px;color: #FFFFFF; border-bottom: 2px solid;font-weight: 500; ">平臺管理</h3> <div> <input class="shuru-input" type="text" id="txtUserName" name="txtUserName" placeholder="請輸入賬號"> <input class="shuru-input" type="password" id="txtUserPass" name="txtUserPass" placeholder="請輸入密碼"> <span style="font-size:12px; color:blue; vertical-align:middle;">是否記住密碼</span> <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" /> </div> <div> <button style="margin-bottom: 0px;margin-top: 30px;width: 100%;font-size: 14px" id="login-in" onclick="userLogin();">登 錄</button> </div> </div> </body> </html>
安全測試2_Web前端知識學習