整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
東IT優就業
有時候，為了讓用戶有更好的體驗，需要禁用掉文本選中功能
比如：使用a標簽模擬按鈕，如果不禁用掉文本選中功能，那么雙擊時會選中文字，用起來很不爽。
多數情況下，只需要使用CSS樣式就可以實現這個功能啦：
user-select有四個值：
none：文本不能被選擇
text：可以選擇文本
all：當所有內容作為一個整體時可以被選擇。如果雙擊或者在上下文上點擊子元素，那么被選擇的部分將是以該子元素向上回溯的最高祖先元素。
element：可以選擇文本，但選擇范圍受元素邊界的約束
值得注意的是：IE6-9目前需要通過JavaScript來實現。
更多IT精彩內容推薦：http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338
為大家介紹使用 CSS 來制作按鈕。
基本按鈕樣式
默認按鈕 CSS 按鈕
CSS 實例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
按鈕顏色
GreenBlueRedGrayBlack
我們可以使用 background-color 屬性來設置按鈕顏色:
CSS 實例
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
嘗試一下 ?
按鈕大小
10px12px16px20px24px
我們可以使用 font-size 屬性來設置按鈕大小:
CSS 實例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
圓角按鈕
2px4px8px12px50%
我們可以使用 border-radius 屬性來設置圓角按鈕:
CSS 實例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
嘗試一下 ?
按鈕邊框顏色
綠藍紅灰黑
我們可以使用 border 屬性設置按鈕邊框顏色:
CSS 實例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
嘗試一下 ?
鼠標懸停按鈕
綠藍紅灰黑
綠藍紅灰黑
我們可以使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。
提示: 我們可以使用 transition-duration 屬性來設置 "hover" 效果的速度:
CSS 實例
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
按鈕陰影
陰影按鈕鼠標懸停后顯示陰影
我們可以使用 box-shadow 屬性來為按鈕添加陰影:
CSS 實例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
嘗試一下 ?
禁用按鈕
正常按鈕禁用按鈕
我們可以使用 opacity 屬性為按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。
提示: 我么可以添加 cursor 屬性并設置為 "not-allowed" 來設置一個禁用的圖片:
CSS 實例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
嘗試一下 ?
按鈕寬度
250px
50%100%
默認情況下，按鈕的大小有按鈕上的文本內容決定( 根據文本內容匹配長度 )。 我們可以使用 width 屬性來設置按鈕的寬度:
提示: 如果要設置固定寬度可以使用像素 (px) 為單位，如果要設置響應式的按鈕可以設置為百分比。
CSS 實例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
嘗試一下 ?
按鈕組
ButtonButtonButtonButton
移除外邊距并添加 float:left 來設置按鈕組:
CSS 實例
.button {
float: left;
}
嘗試一下 ?
帶邊框按鈕組
ButtonButtonButtonButton
我們可以使用 border 屬性來設置帶邊框的按鈕組:
CSS 實例
.button {
float: left;
border: 1px solid green
}
嘗試一下 ?
按鈕動畫
CSS 實例
鼠標移動到按鈕上后添加箭頭標記:
Hover
嘗試一下 ?
CSS 實例
點擊時添加 "波紋" 效果:
Click
CSS 實例
點擊時添加 "壓下" 效果:
Click
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
況
01
賽門鐵克(Symantec)在2019年的《互聯網安全威脅報告》中稱：Formjacking 攻擊飆升，已有取代勒索和挖礦成為互聯網安全最大威脅之勢。Formjacking 從技術角度看，主要是將惡意 javascript 代碼嵌入到合法網站中，用于獲取敏感信息，而這種攻擊手法本質上屬于界面劫持中的 clickjacking（點擊劫持）。本文將結合界面劫持的發展歷程，以實例講解點擊劫持的原理并介紹目前針對此類攻擊的防御思路。
界面劫持發展過程
02
界面操作劫持攻擊實際上是一種基于視覺欺騙的 web 會話劫持攻擊，核心在于使用了<iframe>標簽中的透明屬性，他通過在網頁的可見輸入控件上覆蓋一個不可見的框，使得用戶誤以為在操作可見控件，而實際上用戶的操作行為被其不可見的框所劫持，執行不可見框中的惡意代碼，達到竊取信息，控制會話，植入木馬等目的。從發展歷程看，主要有三類：
點擊劫持
點擊劫持又稱UI-覆蓋攻擊，是2008年由互聯網安全專家羅伯特·漢森和耶利米·格勞斯曼提出點擊劫持的概念。因為首先劫持的是用戶的鼠標點擊操作，所以命名叫點擊劫持。主要劫持目標是含有重要會話交互的頁面，如銀行交易頁面、后臺管理頁面等。曾經 Twitter 和 Facebook 等著名站點的用戶都遭受過點擊劫持的攻擊。
拖放劫持
在2010的 Black Hat Europe 大會上，Paul Stone 提出了點擊劫持的技術演進版本：拖放劫持。由于用戶需要用鼠標拖放完成的操作越來越多（如復制粘貼、小游戲等等），拖放劫持大大提高了點擊劫持的攻擊范圍，將劫持模式從單純的鼠標點擊拓展到了鼠標拖放行為。最主要的是，由于拖放操作不受瀏覽器“同源策略“影響，用戶可以把一個域的內容拖放到另一個不同的域，由此攻擊者可能通過劫持某個頁面的拖放操作實現對其他頁面鏈接的竊取，從而獲得 session key,token,password 等敏感信息，甚至能將瀏覽器中的頁面內容拖進文本編輯器，查看源代碼。2011年出現的 Cookiejacking 攻擊就是拖放攻擊的代表，此攻擊的成因是由于本地 Cookie 可以用<iframe>標簽嵌入，進而就可以利用拖放劫持來盜取用戶的 Cookie。
觸屏劫持
隨著觸屏技術的發展，clickjacking 的攻擊方式也更進一步，2010年斯坦福公布觸屏劫持攻擊。通過將一個不可見的 iframe 覆蓋到當前網頁上就可以劫持用戶的觸屏操作。由于手機屏幕范圍有限，手機瀏覽器為了節省空間把地址欄隱藏起來，因此在手機上的視覺欺騙更容易實施。
點擊劫持技術原理
03
透明層+iframe
透明層使用了 CSS 中的透明屬性，在（Chrome，FireFox,Safari,Opera瀏覽器）中
opacity：0.5；數值從0到1，數值越小透明度越高，反之越明顯。
z-index：1；數值越高越靠近用戶，高數值控件在低數值控件前。
使用 iframe 嵌入被劫持的頁面 <iframe id=”victim” src=”http://www.victime.com”>
opacity：1
opacity：0
目標網頁隱藏技術
目標網頁隱藏技術原理是攻擊者在惡意網站上通過 iframe 載入目標網頁，然后隱藏目標網頁，欺騙用戶點擊隱藏的惡意鏈接。目前主要的網頁隱藏技術有兩種：CSS 隱藏技術和雙 iframe 隱藏技術。（雙 iframe 隱藏技術使用內聯框架和外聯框架。內聯框架的主要功能是載入目標網頁，并將目標網頁定位到特定按鈕或者鏈接。外聯框架的主要功能是篩選，只顯示內聯框架中特定的按鈕。）
點擊操作劫持技術
在成功隱藏目標網頁后，攻擊者下一個目標是欺騙用戶點擊特定的按鈕，最簡單實用的方法是使用社會工程學。例如，將攻擊按鈕外觀設計成類似QQ消息的提示按鈕，誘使用戶點擊從而觸發攻擊行為。另外一種思路是使用腳本代碼以及其他技術增加用戶點擊特定按鈕的概率。主要方法如 JavaScript 實現鼠標跟隨技術、按鍵劫持 (Stroke jacking) 技術等。
點擊劫持技術簡單實現
04
1、Index.html 是一個用戶可見的偽裝頁面，在其頁面中設置 iframe 所在層為透明層，并在 iframe 中嵌套了 inner.html 頁面
2、在 index.html 頁面中設計的“Click me”按鈕的位置與 inner.html 頁面中“Login”按鈕的位置重合
3、當用戶以為在點擊 index.html 頁面上的“Click me”按鈕時，實際是觸發了 inner.html 頁面上的“Login”按鈕的onclick方法
點擊 Click me 卻觸發了上層 iframe 標簽的 inner.html 中 Login 的 onclick（）
點擊劫持漏洞的防御技術
05
01
服務器端防御
服務器端防御點擊劫持漏洞的思想是結合瀏覽器的安全機制進行防御，主要的防御方法介紹如下。
1、X-FRAME-OPTIONS 機制
在微軟發布新一代的瀏覽器 Internet Explorer 8.0中首次提出全新的安全機制：
X-FRAME-OPTIONS。該機制有兩個選項：DENY 和 SAMEORIGIN。DENY 表示任何網頁都不能使用 iframe 載入該網頁，SAMEORIGIN 表示符合同源策略的網頁可以使用 iframe 載入該網頁。除了 Chrome 和 safari 以外，還支持第三個參數 Allow-From（白名單限制）。如果瀏覽器使用了這個安全機制，在網站發現可疑行為時，會提示用戶正在瀏覽 網頁存在安全隱患，并建議用戶在新窗口中打開。這樣攻擊者就無法通過 iframe 隱藏目標的網頁。
2、使用 FrameBusting 代碼
點擊劫持攻擊需要首先將目標網站載入到惡意網站中，使用 iframe 載入網頁是最有效的方法。Web 安全研究人員針對 iframe 特性提出 Frame Busting 代碼，使用 JavaScript 腳本阻止惡意網站載入網頁。如果檢測到網頁被非法網頁載入，就執行自動跳轉功能。Frame Busting 代碼是一種有效防御網站被攻擊者惡意載入的方法，網站開發人員使用 Frame Busting 代碼阻止頁面被非法載入。需要指出的情況是，如果用戶瀏覽器禁用 JavaScript 腳本，那么 FrameBusting 代碼也無法正常運行。所以，該類代碼只能提供部分保障功能。
（禁止iframe的嵌套）
3、使用認證碼認證用戶
點擊劫持漏洞通過偽造網站界面進行攻擊，網站開發人員可以通過認證碼識別用戶，確定是用戶發出的點擊命令才執行相應操作。識別用戶的方法中最有效的方法是認證碼認證。例如，在網站上廣泛存在的發帖認證碼，要求用戶輸入圖形中的字符，輸入某些圖形的特征等。
02
客戶端防御
由于點擊劫持攻擊的代碼在客戶端執行，因此客戶端有很多機制可以防御此漏洞。
1、升級瀏覽器
最新版本的瀏覽器提供很多防御點擊劫持漏洞的安全機制，對于普通的互聯網用戶，經常更新修復瀏覽器的安全漏洞，能夠最有效的防止惡意攻擊。
2、NoScript 擴展
對于 Firefox 的用戶，使用 NoScript 擴展能夠在一定程度上檢測和阻止點擊劫持攻擊。利用 NoScript 中 ClearClick 組件能夠檢測和警告潛在的點擊劫持攻擊，自動檢測頁面中可能不安全的頁面。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
