一. post和get方式提交數據的區別
- 安全性:get提交的數據url可以看得到,post看不到,并且get提交的數據會在瀏覽器的記錄中,安全性不好
- 提交原理:get是以key=value的形式拼接到url中,post講數據放入http請求體中
- 數據量:get提交的數據受瀏覽器限制,url不可能拼接無限長,post理論上無限制,受服務器限制
- 使用場景:get 重在 "要"數據,get得到的數據可以暫時緩存起來, post 重在"給"數據
二.form表單中的常用標簽及其屬性
1.form標簽
<form action="" method="" target="_target" enctype=""></form>
說明:
action:表單提交的地址
method:提交表單的方法,常見的有post,get,(不支持put,patch,delete)
target:在何處打開url,例如_target為在新頁面打開提交的地址
enctype:加密類型,有application/x-www-form-urlencoded ,text/plain ,multipart/form-data
2.input標簽-text類型
<label for="username">用戶名:</label>
<input type="text" placeholder="username" name="username" value="林克">
說明:
<label>標簽的作用:擴大選擇范圍,鼠標點擊用戶名三個字也可以將輸入框變成focus狀態
placeholder:在輸入框中顯示一個提示,沒有其他作用
name: 提交數據時,標識該文本框的key
value:提交數據時,標識該文本框的默認value,修改后value會變成輸入的數據
3.input標簽-submit類型
<input type="submit" value="提交">
說明:
該標簽會顯示一個按鈕,點擊會提交該標簽所在form表單下的數據,value為該按鈕上顯示的字
注: <button>提交</button>和該標簽效果一樣,點擊會提交;而<input type="button" value="提交">點擊不會有提交效果
4.input標簽-radio(單選框),checkbox(復選框)類型
<input type="radio" name="sex" value="boy" checked>
<input type="radio" name="sex" value="girl">
<input type="checkbox" name="hobby" value="籃球" checked>
<input type="checkbox" name="hobby" value="足球">
說明:
name相同的radio即為一組,一組內的單選框只能選擇一個
checked:表示默認選擇的單選框
5.其他input標簽類型
<input type="date"> <!--日歷-->
<input type="file" accept="img/png"> <!--選擇文件,accept設置只能接受該文件類型-->
<input type="number"> <!--只能輸入數字-->
<input type="search"> <!--輸入完內容,回車即可提交-->
<input type="email"> <!--只有輸入的文本為email形式才能提交-->
<input type="url"> <!--只有輸入的文本為url形式才能提交-->
<input type="range"> <!--范圍選擇條-->
<input type="color"> <!--選擇顏色-->
<input type="reset" value="重置"> <!--重置表單中的所有內容為初始默認值-->
<input type="hidden" name="csrf" value="66666"> <!--為了解決CSRF安全問題,詳見三.補充-->
6.select標簽
<select name="addr">
<option value="shanghai">上海</option>
<option value="shanghai">北京</option>
<option value="shanghai" selected>南京</option>
</select>
說明:
name:選擇列表的提交的key,value:選擇列表提交的value
option:代表選擇列表的每一項
上海,北京,南京:選擇列表每一項顯示的內容
selected:默認選中的選擇列表項
7.textare標簽
<textare name="comment">
此處可以輸入多行內容
</textare>
三.補充
1.語義化HTML5標簽
選擇合適的標簽、使用合理的代碼結構,便于開發者和視覺障礙人士閱讀,同時讓瀏覽器的爬蟲和機器很好地解析。
- <header>:頁頭
- <nav>:導航欄
- <main>:主內容 ,后面一般接 <article>,<section>,<div>
- <aside>:側邊欄
- <footer>:頁尾
2.CSRF 攻擊是什么?如何防范?
中文名:跨站請求偽造。其原理是攻擊者構造網站后臺某個功能接口的請求地址,誘導用戶去點擊或者用特殊方法讓該請求地址自動加載。用戶在登錄狀態下這個請求被服務端接收后會被誤以為是用戶合法的操作。對于 GET 形式的接口地址可輕易被攻擊,對于 POST 形式的接口地址也不是百分百安全,攻擊者可誘導用戶進入帶 Form 表單可用POST方式提交參數的頁面。
防范:
服務端在收到路由請求時,生成一個隨機數,在渲染請求頁面時把隨機數埋入頁面(一般埋入 form 表單內,)
1.服務端設置setCookie,把該隨機數作為cookie或者session種入用戶瀏覽器
2.當用戶發送 GET 或者 POST 請求時帶上_csrf_token參數(對于 Form 表單直接提交即可,因為會自動把當3.前表單內所有的 input 提交給后臺,包括_csrf_token)
4.后臺在接受到請求后解析請求的cookie獲取_csrf_token的值,然后和用戶請求提交的_csrf_token做個比較,如果相等表示請求是合法的。