東IT優(yōu)就業(yè)

有時候，為了讓用戶有更好的體驗，需要禁用掉文本選中功能

比如：使用a標簽?zāi)M按鈕，如果不禁用掉文本選中功能，那么雙擊時會選中文字，用起來很不爽。

多數(shù)情況下，只需要使用CSS樣式就可以實現(xiàn)這個功能啦：

user-select有四個值：

none：文本不能被選擇

text：可以選擇文本

all：當所有內(nèi)容作為一個整體時可以被選擇。如果雙擊或者在上下文上點擊子元素，那么被選擇的部分將是以該子元素向上回溯的最高祖先元素。

element：可以選擇文本，但選擇范圍受元素邊界的約束

值得注意的是：IE6-9目前需要通過JavaScript來實現(xiàn)。

更多IT精彩內(nèi)容推薦：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 屬性來設(shè)置按鈕顏色:

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 屬性來設(shè)置按鈕大小:

CSS 實例

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

圓角按鈕

2px4px8px12px50%

我們可以使用 border-radius 屬性來設(shè)置圓角按鈕:

CSS 實例

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

嘗試一下 ?

按鈕邊框顏色

綠藍紅灰黑

我們可以使用 border 屬性設(shè)置按鈕邊框顏色:

CSS 實例

.button1 {

background-color: white;

color: black;

border: 2px solid #4CAF50; /* Green */

}

...

嘗試一下 ?

鼠標懸停按鈕

綠藍紅灰黑

綠藍紅灰黑

我們可以使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。

提示: 我們可以使用 transition-duration 屬性來設(shè)置 "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 屬性并設(shè)置為 "not-allowed" 來設(shè)置一個禁用的圖片:

CSS 實例

.disabled {

opacity: 0.6;

cursor: not-allowed;

}

嘗試一下 ?

按鈕寬度

250px

50%100%

默認情況下，按鈕的大小有按鈕上的文本內(nèi)容決定( 根據(jù)文本內(nèi)容匹配長度 )。 我們可以使用 width 屬性來設(shè)置按鈕的寬度:

提示: 如果要設(shè)置固定寬度可以使用像素 (px) 為單位，如果要設(shè)置響應(yīng)式的按鈕可以設(shè)置為百分比。

CSS 實例

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {width: 100%;}

嘗試一下 ?

按鈕組

ButtonButtonButtonButton

移除外邊距并添加 float:left 來設(shè)置按鈕組:

CSS 實例

.button {

float: left;

}

嘗試一下 ?

帶邊框按鈕組

ButtonButtonButtonButton

我們可以使用 border 屬性來設(shè)置帶邊框的按鈕組:

CSS 實例

.button {

float: left;

border: 1px solid green

}

嘗試一下 ?

按鈕動畫

CSS 實例

鼠標移動到按鈕上后添加箭頭標記:

Hover

嘗試一下 ?

CSS 實例

點擊時添加 "波紋" 效果:

Click

CSS 實例

點擊時添加 "壓下" 效果:

Click

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

況

01

賽門鐵克(Symantec)在2019年的《互聯(lián)網(wǎng)安全威脅報告》中稱：Formjacking 攻擊飆升，已有取代勒索和挖礦成為互聯(lián)網(wǎng)安全最大威脅之勢。Formjacking 從技術(shù)角度看，主要是將惡意 javascript 代碼嵌入到合法網(wǎng)站中，用于獲取敏感信息，而這種攻擊手法本質(zhì)上屬于界面劫持中的 clickjacking（點擊劫持）。本文將結(jié)合界面劫持的發(fā)展歷程，以實例講解點擊劫持的原理并介紹目前針對此類攻擊的防御思路。

界面劫持發(fā)展過程

02

界面操作劫持攻擊實際上是一種基于視覺欺騙的 web 會話劫持攻擊，核心在于使用了<iframe>標簽中的透明屬性，他通過在網(wǎng)頁的可見輸入控件上覆蓋一個不可見的框，使得用戶誤以為在操作可見控件，而實際上用戶的操作行為被其不可見的框所劫持，執(zhí)行不可見框中的惡意代碼，達到竊取信息，控制會話，植入木馬等目的。從發(fā)展歷程看，主要有三類：

點擊劫持

點擊劫持又稱UI-覆蓋攻擊，是2008年由互聯(lián)網(wǎng)安全專家羅伯特·漢森和耶利米·格勞斯曼提出點擊劫持的概念。因為首先劫持的是用戶的鼠標點擊操作，所以命名叫點擊劫持。主要劫持目標是含有重要會話交互的頁面，如銀行交易頁面、后臺管理頁面等。曾經(jīng) Twitter 和 Facebook 等著名站點的用戶都遭受過點擊劫持的攻擊。

拖放劫持

在2010的 Black Hat Europe 大會上，Paul Stone 提出了點擊劫持的技術(shù)演進版本：拖放劫持。由于用戶需要用鼠標拖放完成的操作越來越多（如復(fù)制粘貼、小游戲等等），拖放劫持大大提高了點擊劫持的攻擊范圍，將劫持模式從單純的鼠標點擊拓展到了鼠標拖放行為。最主要的是，由于拖放操作不受瀏覽器“同源策略“影響，用戶可以把一個域的內(nèi)容拖放到另一個不同的域，由此攻擊者可能通過劫持某個頁面的拖放操作實現(xiàn)對其他頁面鏈接的竊取，從而獲得 session key,token,password 等敏感信息，甚至能將瀏覽器中的頁面內(nèi)容拖進文本編輯器，查看源代碼。2011年出現(xiàn)的 Cookiejacking 攻擊就是拖放攻擊的代表，此攻擊的成因是由于本地 Cookie 可以用<iframe>標簽嵌入，進而就可以利用拖放劫持來盜取用戶的 Cookie。

觸屏劫持

隨著觸屏技術(shù)的發(fā)展，clickjacking 的攻擊方式也更進一步，2010年斯坦福公布觸屏劫持攻擊。通過將一個不可見的 iframe 覆蓋到當前網(wǎng)頁上就可以劫持用戶的觸屏操作。由于手機屏幕范圍有限，手機瀏覽器為了節(jié)省空間把地址欄隱藏起來，因此在手機上的視覺欺騙更容易實施。

點擊劫持技術(shù)原理

03

透明層+iframe

透明層使用了 CSS 中的透明屬性，在（Chrome，F(xiàn)ireFox,Safari,Opera瀏覽器）中

opacity：0.5；數(shù)值從0到1，數(shù)值越小透明度越高，反之越明顯。

z-index：1；數(shù)值越高越靠近用戶，高數(shù)值控件在低數(shù)值控件前。

使用 iframe 嵌入被劫持的頁面 <iframe id=”victim” src=”http://www.victime.com”>

opacity：1

opacity：0

目標網(wǎng)頁隱藏技術(shù)

目標網(wǎng)頁隱藏技術(shù)原理是攻擊者在惡意網(wǎng)站上通過 iframe 載入目標網(wǎng)頁，然后隱藏目標網(wǎng)頁，欺騙用戶點擊隱藏的惡意鏈接。目前主要的網(wǎng)頁隱藏技術(shù)有兩種：CSS 隱藏技術(shù)和雙 iframe 隱藏技術(shù)。（雙 iframe 隱藏技術(shù)使用內(nèi)聯(lián)框架和外聯(lián)框架。內(nèi)聯(lián)框架的主要功能是載入目標網(wǎng)頁，并將目標網(wǎng)頁定位到特定按鈕或者鏈接。外聯(lián)框架的主要功能是篩選，只顯示內(nèi)聯(lián)框架中特定的按鈕。）

點擊操作劫持技術(shù)

在成功隱藏目標網(wǎng)頁后，攻擊者下一個目標是欺騙用戶點擊特定的按鈕，最簡單實用的方法是使用社會工程學。例如，將攻擊按鈕外觀設(shè)計成類似QQ消息的提示按鈕，誘使用戶點擊從而觸發(fā)攻擊行為。另外一種思路是使用腳本代碼以及其他技術(shù)增加用戶點擊特定按鈕的概率。主要方法如 JavaScript 實現(xiàn)鼠標跟隨技術(shù)、按鍵劫持 (Stroke jacking) 技術(shù)等。

點擊劫持技術(shù)簡單實現(xiàn)

04

1、Index.html 是一個用戶可見的偽裝頁面，在其頁面中設(shè)置 iframe 所在層為透明層，并在 iframe 中嵌套了 inner.html 頁面

2、在 index.html 頁面中設(shè)計的“Click me”按鈕的位置與 inner.html 頁面中“Login”按鈕的位置重合

3、當用戶以為在點擊 index.html 頁面上的“Click me”按鈕時，實際是觸發(fā)了 inner.html 頁面上的“Login”按鈕的onclick方法

點擊 Click me 卻觸發(fā)了上層 iframe 標簽的 inner.html 中 Login 的 onclick（）

點擊劫持漏洞的防御技術(shù)

05

01

服務(wù)器端防御

服務(wù)器端防御點擊劫持漏洞的思想是結(jié)合瀏覽器的安全機制進行防御，主要的防御方法介紹如下。

1、X-FRAME-OPTIONS 機制

在微軟發(fā)布新一代的瀏覽器 Internet Explorer 8.0中首次提出全新的安全機制：

X-FRAME-OPTIONS。該機制有兩個選項：DENY 和 SAMEORIGIN。DENY 表示任何網(wǎng)頁都不能使用 iframe 載入該網(wǎng)頁，SAMEORIGIN 表示符合同源策略的網(wǎng)頁可以使用 iframe 載入該網(wǎng)頁。除了 Chrome 和 safari 以外，還支持第三個參數(shù) Allow-From（白名單限制）。如果瀏覽器使用了這個安全機制，在網(wǎng)站發(fā)現(xiàn)可疑行為時，會提示用戶正在瀏覽 網(wǎng)頁存在安全隱患，并建議用戶在新窗口中打開。這樣攻擊者就無法通過 iframe 隱藏目標的網(wǎng)頁。

2、使用 FrameBusting 代碼

點擊劫持攻擊需要首先將目標網(wǎng)站載入到惡意網(wǎng)站中，使用 iframe 載入網(wǎng)頁是最有效的方法。Web 安全研究人員針對 iframe 特性提出 Frame Busting 代碼，使用 JavaScript 腳本阻止惡意網(wǎng)站載入網(wǎng)頁。如果檢測到網(wǎng)頁被非法網(wǎng)頁載入，就執(zhí)行自動跳轉(zhuǎn)功能。Frame Busting 代碼是一種有效防御網(wǎng)站被攻擊者惡意載入的方法，網(wǎng)站開發(fā)人員使用 Frame Busting 代碼阻止頁面被非法載入。需要指出的情況是，如果用戶瀏覽器禁用 JavaScript 腳本，那么 FrameBusting 代碼也無法正常運行。所以，該類代碼只能提供部分保障功能。

（禁止iframe的嵌套）

3、使用認證碼認證用戶

點擊劫持漏洞通過偽造網(wǎng)站界面進行攻擊，網(wǎng)站開發(fā)人員可以通過認證碼識別用戶，確定是用戶發(fā)出的點擊命令才執(zhí)行相應(yīng)操作。識別用戶的方法中最有效的方法是認證碼認證。例如，在網(wǎng)站上廣泛存在的發(fā)帖認證碼，要求用戶輸入圖形中的字符，輸入某些圖形的特征等。

02

客戶端防御

由于點擊劫持攻擊的代碼在客戶端執(zhí)行，因此客戶端有很多機制可以防御此漏洞。

1、升級瀏覽器

最新版本的瀏覽器提供很多防御點擊劫持漏洞的安全機制，對于普通的互聯(lián)網(wǎng)用戶，經(jīng)常更新修復(fù)瀏覽器的安全漏洞，能夠最有效的防止惡意攻擊。

2、NoScript 擴展

對于 Firefox 的用戶，使用 NoScript 擴展能夠在一定程度上檢測和阻止點擊劫持攻擊。利用 NoScript 中 ClearClick 組件能夠檢測和警告潛在的點擊劫持攻擊，自動檢測頁面中可能不安全的頁面。