常見六大 Web 安全攻防解析 - 技術(shù)頭條

者 | 浪里行舟

責編 | 胡巍巍

在互聯(lián)網(wǎng)時代，數(shù)據(jù)安全與個人隱私受到了前所未有的挑戰(zhàn)，各種新奇的攻擊技術(shù)層出不窮。如何才能更好地保護我們的數(shù)據(jù)？本文主要側(cè)重于分析幾種常見的攻擊的類型以及防御的方法。

XSS

XSS (Cross-Site Scripting)，跨站腳本攻擊，因為縮寫和 CSS重疊，所以只能叫 XSS。跨站腳本攻擊是指通過存在安全漏洞的Web網(wǎng)站注冊用戶的瀏覽器內(nèi)運行非法的HTML標簽或JavaScript進行的一種攻擊。

跨站腳本攻擊有可能造成以下影響:

利用虛假輸入表單騙取用戶個人信息。
利用腳本竊取用戶的Cookie值，被害者在不知情的情況下，幫助攻擊者發(fā)送惡意請求。
顯示偽造的文章或圖片。

XSS 的原理是惡意攻擊者往 Web 頁面里插入惡意可執(zhí)行網(wǎng)頁腳本代碼，當用戶瀏覽該頁之時，嵌入其中 Web 里面的腳本代碼會被執(zhí)行，從而可以達到攻擊者盜取用戶信息或其他侵犯用戶安全隱私的目的。

XSS 的攻擊方式千變?nèi)f化，但還是可以大致細分為幾種類型。

1.非持久型 XSS（反射型 XSS ）

非持久型 XSS 漏洞，一般是通過給別人發(fā)送帶有惡意腳本代碼參數(shù)的 URL，當 URL 地址被打開時，特有的惡意代碼參數(shù)被 HTML 解析、執(zhí)行。

舉一個例子，比如頁面中包含有以下代碼：

 1<select>
 2 <script>
 3 document.write(''
 4 + '<option value=1>'
 5 + location.href.substring(location.href.indexOf('default=') + 8)
 6 + '</option>'
 7 );
 8 document.write('<option value=2>English</option>');
 9 </script>
10</select>

攻擊者可直接通過URL (類似：https://xxx.com/xxx?default=<script>alert(document.cookie)</script>) 注入可執(zhí)行的腳本代碼。不過一些瀏覽器如Chrome其內(nèi)置了一些XSS過濾器，可以防止大部分反射型XSS攻擊。

非持久型 XSS 漏洞攻擊有以下幾點特征：

即時性，不經(jīng)過服務(wù)器存儲，直接通過 HTTP 的 GET 和 POST 請求就能完成一次攻擊，拿到用戶隱私數(shù)據(jù)。
攻擊者需要誘騙點擊,必須要通過用戶點擊鏈接才能發(fā)起
反饋率低，所以較難發(fā)現(xiàn)和響應(yīng)修復
盜取用戶敏感保密信息

為了防止出現(xiàn)非持久型 XSS 漏洞，需要確保這么幾件事情：

Web 頁面渲染的所有內(nèi)容或者渲染的數(shù)據(jù)都必須來自于服務(wù)端。
盡量不要從 URL，document.referrer，document.forms 等這種 DOM API 中獲取數(shù)據(jù)直接渲染。
盡量不要使用eval, new Function()，document.write()，document.writeln()，window.setInterval()，window.setTimeout()，innerHTML，document.createElement() 等可執(zhí)行字符串的方法。
如果做不到以上幾點，也必須對涉及 DOM 渲染的方法傳入的字符串參數(shù)做 escape 轉(zhuǎn)義。
前端渲染的時候?qū)θ魏蔚淖侄味夹枰?escape 轉(zhuǎn)義編碼。

2.持久型 XSS（存儲型 XSS）

持久型 XSS 漏洞，一般存在于 Form 表單提交等交互功能，如文章留言，提交文本信息等，黑客利用的 XSS 漏洞，將內(nèi)容經(jīng)正常功能提交進入數(shù)據(jù)庫持久保存，當前端頁面獲得后端從數(shù)據(jù)庫中讀出的注入代碼時，恰好將其渲染執(zhí)行。

舉個例子，對于評論功能來說，就得防范持久型 XSS 攻擊，因為我可以在評論中輸入以下內(nèi)容

主要注入頁面方式和非持久型 XSS 漏洞類似，只不過持久型的不是來源于 URL，referer，forms 等，而是來源于后端從數(shù)據(jù)庫中讀出來的數(shù)據(jù) 。持久型 XSS 攻擊不需要誘騙點擊，黑客只需要在提交表單的地方完成注入即可，但是這種 XSS 攻擊的成本相對還是很高。

攻擊成功需要同時滿足以下幾個條件：

POST 請求提交表單后端沒做轉(zhuǎn)義直接入庫。
后端從數(shù)據(jù)庫中取出數(shù)據(jù)沒做轉(zhuǎn)義直接輸出給前端。
前端拿到后端數(shù)據(jù)沒做轉(zhuǎn)義直接渲染成 DOM。

持久型 XSS 有以下幾個特點：

持久性，植入在數(shù)據(jù)庫中
盜取用戶敏感私密信息
危害面廣

3.如何防御

對于 XSS 攻擊來說，通常有兩種方式可以用來防御。

1) CSP

CSP 本質(zhì)上就是建立白名單，開發(fā)者明確告訴瀏覽器哪些外部資源可以加載和執(zhí)行。我們只需要配置規(guī)則，如何攔截是由瀏覽器自己實現(xiàn)的。我們可以通過這種方式來盡量減少 XSS 攻擊。

通常可以通過兩種方式來開啟 CSP：

設(shè)置 HTTP Header 中的 Content-Security-Policy
設(shè)置 meta 標簽的方式

這里以設(shè)置 HTTP Header 來舉例：

只允許加載本站資源

1Content-Security-Policy: default-src 'self'

只允許加載 HTTPS 協(xié)議圖片

1Content-Security-Policy: img-src https://*

允許加載任何來源框架

1Content-Security-Policy: child-src 'none'

如需了解更多屬性，請查看Content-Security-Policy文檔

對于這種方式來說，只要開發(fā)者配置了正確的規(guī)則，那么即使網(wǎng)站存在漏洞，攻擊者也不能執(zhí)行它的攻擊代碼，并且 CSP 的兼容性也不錯。

2) 轉(zhuǎn)義字符

用戶的輸入永遠不可信任的，最普遍的做法就是轉(zhuǎn)義輸入輸出的內(nèi)容，對于引號、尖括號、斜杠進行轉(zhuǎn)義

 1function escape(str) {
 2 str = str.replace(/&/g, '&')
 3 str = str.replace(/</g, '<')
 4 str = str.replace(/>/g, '>')
 5 str = str.replace(/"/g, '&quto;')
 6 str = str.replace(/'/g, ''')
 7 str = str.replace(/`/g, '`')
 8 str = str.replace(/\//g, '/')
 9 return str
10}

但是對于顯示富文本來說，顯然不能通過上面的辦法來轉(zhuǎn)義所有字符，因為這樣會把需要的格式也過濾掉。對于這種情況，通常采用白名單過濾的辦法，當然也可以通過黑名單過濾，但是考慮到需要過濾的標簽和標簽屬性實在太多，更加推薦使用白名單的方式。

1const xss = require('xss')
2let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
3// -> <h1>XSS Demo</h1><script>alert("xss");</script>
4console.log(html)

以上示例使用了 js-xss 來實現(xiàn)，可以看到在輸出中保留了 h1 標簽且過濾了 script 標簽。

3) HttpOnly Cookie。

這是預防XSS攻擊竊取用戶cookie最有效的防御手段。Web應(yīng)用程序在設(shè)置cookie時，將其屬性設(shè)為HttpOnly，就可以避免該網(wǎng)頁的cookie被客戶端惡意JavaScript竊取，保護用戶cookie信息。

CSRF

CSRF(Cross Site Request Forgery)，即跨站請求偽造，是一種常見的Web攻擊，它利用用戶已登錄的身份，在用戶毫不知情的情況下，以用戶的名義完成非法操作。

1.CSRF攻擊的原理

下面先介紹一下CSRF攻擊的原理：

完成 CSRF 攻擊必須要有三個條件：

用戶已經(jīng)登錄了站點 A，并在本地記錄了 cookie
在用戶沒有登出站點 A 的情況下（也就是 cookie 生效的情況下），訪問了惡意攻擊者提供的引誘危險站點 B (B 站點要求訪問站點A)。
站點 A 沒有做任何 CSRF 防御

我們來看一個例子：當我們登入轉(zhuǎn)賬頁面后，突然眼前一亮驚現(xiàn)"XXX隱私照片，不看后悔一輩子"的鏈接，耐不住內(nèi)心躁動，立馬點擊了該危險的網(wǎng)站（頁面代碼如下圖所示），但當這頁面一加載，便會執(zhí)行submitForm這個方法來提交轉(zhuǎn)賬請求，從而將10塊轉(zhuǎn)給黑客。

2.如何防御

防范 CSRF 攻擊可以遵循以下幾種規(guī)則：

Get 請求不對數(shù)據(jù)進行修改
不讓第三方網(wǎng)站訪問到用戶 Cookie
阻止第三方網(wǎng)站請求接口
請求時附帶驗證信息，比如驗證碼或者 Token

1) SameSite

可以對 Cookie 設(shè)置 SameSite 屬性。該屬性表示 Cookie 不隨著跨域請求發(fā)送，可以很大程度減少 CSRF 的攻擊，但是該屬性目前并不是所有瀏覽器都兼容。

2) Referer Check

HTTP Referer是header的一部分，當瀏覽器向web服務(wù)器發(fā)送請求時，一般會帶上Referer信息告訴服務(wù)器是從哪個頁面鏈接過來的，服務(wù)器籍此可以獲得一些信息用于處理。可以通過檢查請求的來源來防御CSRF攻擊。正常請求的referer具有一定規(guī)律，如在提交表單的referer必定是在該頁面發(fā)起的請求。所以通過檢查http包頭referer的值是不是這個頁面，來判斷是不是CSRF攻擊。

但在某些情況下如從https跳轉(zhuǎn)到http，瀏覽器處于安全考慮，不會發(fā)送referer，服務(wù)器就無法進行check了。若與該網(wǎng)站同域的其他網(wǎng)站有XSS漏洞，那么攻擊者可以在其他網(wǎng)站注入惡意腳本，受害者進入了此類同域的網(wǎng)址，也會遭受攻擊。出于以上原因，無法完全依賴Referer Check作為防御CSRF的主要手段。但是可以通過Referer Check來監(jiān)控CSRF攻擊的發(fā)生。

3) Anti CSRF Token

目前比較完善的解決方案是加入Anti-CSRF-Token。即發(fā)送請求時在HTTP 請求中以參數(shù)的形式加入一個隨機產(chǎn)生的token，并在服務(wù)器建立一個攔截器來驗證這個token。服務(wù)器讀取瀏覽器當前域cookie中這個token值，會進行校驗該請求當中的token和cookie當中的token值是否都存在且相等，才認為這是合法的請求。否則認為這次請求是違法的，拒絕該次服務(wù)。

這種方法相比Referer檢查要安全很多，token可以在用戶登陸后產(chǎn)生并放于session或cookie中，然后在每次請求時服務(wù)器把token從session或cookie中拿出，與本次請求中的token 進行比對。由于token的存在，攻擊者無法再構(gòu)造出一個完整的URL實施CSRF攻擊。但在處理多個頁面共存問題時，當某個頁面消耗掉token后，其他頁面的表單保存的還是被消耗掉的那個token，其他頁面的表單提交時會出現(xiàn)token錯誤。

4) 驗證碼

應(yīng)用程序和用戶進行交互過程中，特別是賬戶交易這種核心步驟，強制用戶輸入驗證碼，才能完成最終請求。在通常情況下，驗證碼夠很好地遏制CSRF攻擊。但增加驗證碼降低了用戶的體驗，網(wǎng)站不能給所有的操作都加上驗證碼。所以只能將驗證碼作為一種輔助手段，在關(guān)鍵業(yè)務(wù)點設(shè)置驗證碼。

點擊劫持

點擊劫持是一種視覺欺騙的攻擊手段。攻擊者將需要攻擊的網(wǎng)站通過 iframe 嵌套的方式嵌入自己的網(wǎng)頁中，并將 iframe 設(shè)置為透明，在頁面中透出一個按鈕誘導用戶點擊。

1. 特點

隱蔽性較高，騙取用戶操作
"UI-覆蓋攻擊"
利用iframe或者其它標簽的屬性

2. 點擊劫持的原理

用戶在登陸 A 網(wǎng)站的系統(tǒng)后，被攻擊者誘惑打開第三方網(wǎng)站，而第三方網(wǎng)站通過 iframe 引入了 A 網(wǎng)站的頁面內(nèi)容，用戶在第三方網(wǎng)站中點擊某個按鈕（被裝飾的按鈕），實際上是點擊了 A 網(wǎng)站的按鈕。

接下來我們舉個例子：我在優(yōu)酷發(fā)布了很多視頻，想讓更多的人關(guān)注它，就可以通過點擊劫持來實現(xiàn)

 1iframe {
 2width: 1440px;
 3height: 900px;
 4position: absolute;
 5top: -0px;
 6left: -0px;
 7z-index: 2;
 8-moz-opacity: 0;
 9opacity: 0;
10filter: alpha(opacity=0);
11}
12button {
13position: absolute;
14top: 270px;
15left: 1150px;
16z-index: 1;
17width: 90px;
18height:40px;
19}
20</style>
21......
22<button>點擊脫衣</button>
23<img src="http://pic1.win4000.com/wallpaper/2018-03-19/5aaf2bf0122d2.jpg">
24<iframe src="http://i.youku.com/u/UMjA0NTg4Njcy" scrolling="no"></iframe>

從上圖可知，攻擊者通過圖片作為頁面背景，隱藏了用戶操作的真實界面，當你按耐不住好奇點擊按鈕以后，真正的點擊的其實是隱藏的那個頁面的訂閱按鈕，然后就會在你不知情的情況下訂閱了。

3. 如何防御

1）X-FRAME-OPTIONS

X-FRAME-OPTIONS是一個 HTTP 響應(yīng)頭，在現(xiàn)代瀏覽器有一個很好的支持。這個 HTTP 響應(yīng)頭就是為了防御用 iframe 嵌套的點擊劫持攻擊。

該響應(yīng)頭有三個值可選，分別是

DENY，表示頁面不允許通過 iframe 的方式展示
SAMEORIGIN，表示頁面可以在相同域名下通過 iframe 的方式展示
ALLOW-FROM，表示頁面可以在指定來源的 iframe 中展示

2）JavaScript 防御

對于某些遠古瀏覽器來說，并不能支持上面的這種方式，那我們只有通過 JS 的方式來防御點擊劫持了。

 1<head>
 2 <style id="click-jack">
 3 html {
 4 display: none !important;
 5 }
 6 </style>
 7</head>
 8<body>
 9 <script>
10 if (self == top) {
11 var style = document.getElementById('click-jack')
12 document.body.removeChild(style)
13 } else {
14 top.location = self.location
15 }
16 </script>
17</body>
以上代碼的作用就是當通過 iframe 的方式加載頁面時，攻擊者的網(wǎng)頁直接不顯示所有內(nèi)容了。

URL跳轉(zhuǎn)漏洞

定義：借助未驗證的URL跳轉(zhuǎn)，將應(yīng)用程序引導到不安全的第三方區(qū)域，從而導致的安全問題。

1.URL跳轉(zhuǎn)漏洞原理

黑客利用URL跳轉(zhuǎn)漏洞來誘導安全意識低的用戶點擊，導致用戶信息泄露或者資金的流失。其原理是黑客構(gòu)建惡意鏈接(鏈接需要進行偽裝,盡可能迷惑),發(fā)在QQ群或者是瀏覽量多的貼吧/論壇中。

安全意識低的用戶點擊后,經(jīng)過服務(wù)器或者瀏覽器解析后，跳到惡意的網(wǎng)站中。

惡意鏈接需要進行偽裝,經(jīng)常的做法是熟悉的鏈接后面加上一個惡意的網(wǎng)址，這樣才迷惑用戶。

諸如偽裝成像如下的網(wǎng)址，你是否能夠識別出來是惡意網(wǎng)址呢？

1http://gate.baidu.com/index?act=go&url=http://t.cn/RVTatrd
2http://qt.qq.com/safecheck.html?flag=1&url=http://t.cn/RVTatrd
3http://tieba.baidu.com/f/user/passport?jumpUrl=http://t.cn/RVTatrd

2.實現(xiàn)方式：

Header頭跳轉(zhuǎn)
Javascript跳轉(zhuǎn)
META標簽跳轉(zhuǎn)

這里我們舉個Header頭跳轉(zhuǎn)實現(xiàn)方式：

1<?php
2$url=$_GET['jumpto'];
3header("Location: $url");
4?>
1http://www.wooyun.org/login.php?jumpto=http://www.evil.com

這里用戶會認為www.wooyun.org都是可信的，但是點擊上述鏈接將導致用戶最終訪問www.evil.com這個惡意網(wǎng)址。

3.如何防御

1)referer的限制

如果確定傳遞URL參數(shù)進入的來源，我們可以通過該方式實現(xiàn)安全限制，保證該URL的有效性，避免惡意用戶自己生成跳轉(zhuǎn)鏈接

2)加入有效性驗證Token

我們保證所有生成的鏈接都是來自于我們可信域的，通過在生成的鏈接里加入用戶不可控的Token對生成的鏈接進行校驗，可以避免用戶生成自己的惡意鏈接從而被利用，但是如果功能本身要求比較開放，可能導致有一定的限制。

SQL注入

SQL注入是一種常見的Web安全漏洞，攻擊者利用這個漏洞，可以訪問或修改數(shù)據(jù)，或者利用潛在的數(shù)據(jù)庫漏洞進行攻擊。

1.SQL注入的原理

我們先舉一個萬能鑰匙的例子來說明其原理：

1<form action="/login" method="POST">
2 <p>Username: <input type="text" name="username" /></p>
3 <p>Password: <input type="password" name="password" /></p>
4 <p><input type="submit" value="登陸" /></p>
5</form>

后端的 SQL 語句可能是如下這樣的：

1let querySQL = `
2 SELECT *
3 FROM user
4 WHERE username='${username}'
5 AND psw='${password}'
6`;
7// 接下來就是執(zhí)行 sql 語句...
8

這是我們經(jīng)常見到的登錄頁面，但如果有一個惡意攻擊者輸入的用戶名是 admin' --，密碼隨意輸入，就可以直接登入系統(tǒng)了。why! ----這就是SQL注入。

我們之前預想的SQL 語句是:

1SELECT * FROM user WHERE username='admin' AND psw='password'

但是惡意攻擊者用奇怪用戶名將你的 SQL 語句變成了如下形式：

1SELECT * FROM user WHERE username='admin' --' AND psw='xxxx'

在 SQL 中,' --是閉合和注釋的意思，-- 是注釋后面的內(nèi)容的意思，所以查詢語句就變成了：

1SELECT * FROM user WHERE username='admin'

所謂的萬能密碼,本質(zhì)上就是SQL注入的一種利用方式。

一次SQL注入的過程包括以下幾個過程：

獲取用戶請求參數(shù)
拼接到代碼當中
SQL語句按照我們構(gòu)造參數(shù)的語義執(zhí)行成功

SQL注入的必備條件： 1.可以控制輸入的數(shù)據(jù) 2.服務(wù)器要執(zhí)行的代碼拼接了控制的數(shù)據(jù)。

我們會發(fā)現(xiàn)SQL注入流程中與正常請求服務(wù)器類似，只是黑客控制了數(shù)據(jù)，構(gòu)造了SQL查詢，而正常的請求不會SQL查詢這一步，SQL注入的本質(zhì):數(shù)據(jù)和代碼未分離，即數(shù)據(jù)當做了代碼來執(zhí)行。

2.危害

獲取數(shù)據(jù)庫信息
管理員后臺用戶名和密碼
獲取其他數(shù)據(jù)庫敏感信息：用戶名、密碼、手機號碼、身份證、銀行卡信息……
整個數(shù)據(jù)庫：脫褲
獲取服務(wù)器權(quán)限
植入Webshell，獲取服務(wù)器后門
讀取服務(wù)器敏感文件

3.如何防御

嚴格限制Web應(yīng)用的數(shù)據(jù)庫的操作權(quán)限，給此用戶提供僅僅能夠滿足其工作的最低權(quán)限，從而最大限度的減少注入攻擊對數(shù)據(jù)庫的危害
后端代碼檢查輸入的數(shù)據(jù)是否符合預期，嚴格限制變量的類型，例如使用正則表達式進行一些匹配處理。
對進入數(shù)據(jù)庫的特殊字符（'，"，\，<，>，&，*，; 等）進行轉(zhuǎn)義處理，或編碼轉(zhuǎn)換。基本上所有的后端語言都有對字符串進行轉(zhuǎn)義處理的方法，比如 lodash 的 lodash._escapehtmlchar 庫。
所有的查詢語句建議使用數(shù)據(jù)庫提供的參數(shù)化查詢接口，參數(shù)化的語句使用參數(shù)而不是將用戶輸入變量嵌入到 SQL 語句中，即不要直接拼接 SQL 語句。例如 Node.js 中的 mysqljs 庫的 query 方法中的 ? 占位參數(shù)。

OS命令注入攻擊

OS命令注入和SQL注入差不多，只不過SQL注入是針對數(shù)據(jù)庫的，而OS命令注入是針對操作系統(tǒng)的。OS命令注入攻擊指通過Web應(yīng)用，執(zhí)行非法的操作系統(tǒng)命令達到攻擊的目的。只要在能調(diào)用Shell函數(shù)的地方就有存在被攻擊的風險。倘若調(diào)用Shell時存在疏漏，就可以執(zhí)行插入的非法命令。

命令注入攻擊可以向Shell發(fā)送命令，讓Windows或Linux操作系統(tǒng)的命令行啟動程序。也就是說，通過命令注入攻擊可執(zhí)行操作系統(tǒng)上安裝著的各種程序。

1.原理

黑客構(gòu)造命令提交給web應(yīng)用程序，web應(yīng)用程序提取黑客構(gòu)造的命令，拼接到被執(zhí)行的命令中，因黑客注入的命令打破了原有命令結(jié)構(gòu)，導致web應(yīng)用執(zhí)行了額外的命令，最后web應(yīng)用程序?qū)?zhí)行的結(jié)果輸出到響應(yīng)頁面中。

我們通過一個例子來說明其原理，假如需要實現(xiàn)一個需求：用戶提交一些內(nèi)容到服務(wù)器，然后在服務(wù)器執(zhí)行一些系統(tǒng)命令去返回一個結(jié)果給用戶

1// 以 Node.js 為例，假如在接口中需要從 github 下載用戶指定的 repo
2const exec = require('mz/child_process').exec;
3let params = {/* 用戶輸入的參數(shù) */};
4exec(`git clone ${params.repo} /some/path`);
params.repo傳入的是 https://github.com/admin/admin.github.io.git 確實能從指定的 git repo 上下載到想要的代碼。

但是如果 params.repo 傳入的是 https://github.com/xx/xx.git && rm -rf /* && 恰好你的服務(wù)是用 root 權(quán)限起的就糟糕了。

2.如何防御

后端對前端提交內(nèi)容進行規(guī)則限制（比如正則表達式）。
在調(diào)用系統(tǒng)命令前對所有傳入?yún)?shù)進行命令行參數(shù)轉(zhuǎn)義過濾。
不要直接拼接命令語句，借助一些工具做拼接、轉(zhuǎn)義預處理，例如 Node.js 的 shell-escape npm包

參考資料

常見Web 安全攻防總結(jié)
前端面試之道
圖解Http
Web安全知多少
web安全之點擊劫持(clickjacking)
URL重定向/跳轉(zhuǎn)漏洞
網(wǎng)易web白帽子

近，很多朋友反映，很多關(guān)鍵詞在自己的企業(yè)站的排名明顯下降，一些網(wǎng)站也減少了關(guān)鍵詞的收錄，只留下主頁，一些搜索公司找不到自己的品牌詞網(wǎng)站。

遇到這種情況的朋友，說明你的網(wǎng)站或多或少有問題，那么為什么會出現(xiàn)這種情況呢？

今天，搜索引擎優(yōu)化拖拉機將借此機會談?wù)劊簬讉€搜索引擎優(yōu)化的做法，僅供參考：

1、隱藏文本內(nèi)容

為了提高關(guān)鍵詞的密度，頁面上分布了大量的關(guān)鍵詞。將這些關(guān)鍵字的字體顏色設(shè)置為與網(wǎng)頁背景顏色相同的顏色，既不會影響用戶的瀏覽，又能提高關(guān)鍵字的密度，從而提高搜索引擎的排名。這種方法十多年前就用過，現(xiàn)在很少有人用。

2、偷頁

創(chuàng)建優(yōu)化頁面和普通頁面，將優(yōu)化頁面提交給搜索引擎，并在搜索引擎包含優(yōu)化頁面時將其替換為普通頁面。

3、這是不對的

使用不相關(guān)和誤導性的熱門關(guān)鍵詞吸引大量用戶訪問該頁面。這種欺騙行為不僅會影響網(wǎng)站體驗，也會被搜索引擎痛恨，因為它違反了搜索引擎提供的結(jié)果的相關(guān)性和客觀性原則。

4、關(guān)鍵詞堆

利用搜索引擎對網(wǎng)頁標題中的關(guān)鍵詞相關(guān)性高，大量的關(guān)鍵詞被反復堆積。類似的做法還包括在HTML元標記中疊加大量的關(guān)鍵字，使用多個關(guān)鍵字元標記來提高關(guān)鍵字的相關(guān)性，這樣的技術(shù)很容易被搜索引擎發(fā)現(xiàn)，并將受到相應(yīng)的懲罰。

2017年9月底，百度推出了breeze算法，專門針對網(wǎng)站標題的關(guān)鍵詞堆棧。我看了很多最近被降級的網(wǎng)站，其中大部分都有關(guān)鍵字堆棧。這也是很多網(wǎng)站都是k的主要原因，所以在寫關(guān)鍵詞標題的時候千萬不要堆積關(guān)鍵詞，否則百度會懲罰我們的。

百度今年7月底推出的毛毛雨算法主要針對供需B2B網(wǎng)站的黃頁、發(fā)布的供需信息、頁面標題，包括冒充官網(wǎng)、標題堆砌關(guān)鍵詞以及文章中大量的聯(lián)系方式。可以看出，最近很多企業(yè)站點都是K，這與該算法關(guān)系不大。

5、網(wǎng)頁圖像

復制網(wǎng)站和頁面的內(nèi)容，分為不同的域名和服務(wù)器，制作多個鏡像網(wǎng)站，以欺騙搜索引擎多次對同一網(wǎng)站或同一頁面進行索引。如今，幾乎所有的搜索引擎都能過濾掉鏡像網(wǎng)站。一旦找到，源站點和鏡像站點都將從索引數(shù)據(jù)庫中刪除。

6、鏈外

典型的有三種：鏈路工廠、批量鏈路交換程序和交叉鏈路。

鏈接工廠是由多個web鏈接組成的網(wǎng)絡(luò)系統(tǒng)。這些頁面可能來自同一個域或多個不同的域，甚至來自不同的服務(wù)器。加入鏈接工廠后，網(wǎng)站可以從系統(tǒng)中的所有頁面獲取鏈接。同時，作為一個交易所，它需要為自己與外部世界的聯(lián)系作出貢獻。該方法能快速提高鏈接評分。

但是，目前的搜索引擎并不是素食者，所以隱藏的SEO技術(shù)，一樣容易被發(fā)現(xiàn)，并給予相應(yīng)的處罰。

頁，又叫Web，其實就是一個后綴名為.html的文本文件。HTML文件采用超級文本標記語言(HyperText Markup Language)書寫而成，最終由客戶端瀏覽器解釋并呈現(xiàn)給用戶。

Web由HTML內(nèi)容、CSS樣式、JavaScript前端行為三要素組成。開發(fā)一個網(wǎng)頁，就好比設(shè)計一出舞臺劇，首先要決定舞臺上有哪些演員(HTML網(wǎng)頁內(nèi)容)、演員的扮相(CSS網(wǎng)頁樣式)、演員的動作及劇情(JavaScript網(wǎng)頁前端行為)。

1 HTML

HTML使用標記標簽來描述網(wǎng)頁，標記標簽是HTML語言中最基本的單位，是HTML中最重要的組成部分。

標記是HTML文檔中一些有特定意義的符號，這些符號指明網(wǎng)頁內(nèi)容的含義或結(jié)構(gòu)。

標記即標簽，不同的標記能實現(xiàn)不同的功能。HTML標記按功能可大致分為六大類。分別是語義標記、元標記、文本標記、容器標記、嵌入式標記，以及表單和表單元素標記六大類。

(1) 語義標記。又稱結(jié)構(gòu)標記，是指盡量使用有相對應(yīng)結(jié)構(gòu)含義的HTML標記。語義標記的逐漸增加便于開發(fā)者閱讀并寫出優(yōu)雅美麗的代碼，同時讓瀏覽器的“爬蟲”和機器更好地解析檢索。在沒有CSS的情況下，語義標記讓頁面也能呈現(xiàn)出很好的內(nèi)容、代碼結(jié)構(gòu)。簡而言之，語義標記的使用，即是為了網(wǎng)頁“裸奔時也好看”。

(2) 元標記。是指位于HTML文件頭部的一些特殊代碼，是解釋說明的標記。其主要功能就是對文檔進行說明，描述HTML文檔的整體信息。元標記向瀏覽者提供某一頁面的附加信息，告訴我們它是誰。當客戶機找服務(wù)器要東西時，它幫助一些搜索引擎進行頁面分析，使導出的某一頁面檢索信息能正確地放入合適的目錄中。

HTML元標記出現(xiàn)于網(wǎng)頁頭標簽處，主要包括標題標記、關(guān)鍵詞標記、描述標記等，合理運用元標記會使網(wǎng)頁在搜索引擎中表現(xiàn)更為突出。

(3) 文本標記。這是最重要、最基本的標記，一般只能嵌套文本、超鏈接的標簽。為了讓網(wǎng)頁中的文本看上去編排有序、整齊美觀、錯落有致，就要設(shè)置文本的標題、字號大小、字體顏色、字體類型以及換行、換段等。而為實現(xiàn)這一目的所使用的特定的HTML語言，就叫作文本標記。

(4) 容器標記。又稱作內(nèi)容組織標記，可以簡單地理解為它是能嵌套其他所有標簽的標簽，是用來裝東西的容器。容器與容器之間也可以相互嵌套，表現(xiàn)為父級容器和子級容器。

如div標簽中可以鑲嵌span標簽，div可以看作是一個可以裝入其他標簽的大容器，span是一個只能裝文本的小容器，大容器當然可以放得下小容器。

(5) 嵌入式標記。常用于嵌入圖像、音頻、視頻、flash動畫、插件等多媒體元素，使網(wǎng)頁呈現(xiàn)方式更加多樣化，還可以嵌套某些標簽來指定視頻文件的路徑或者網(wǎng)址路徑，決定多媒體元素的屬性和播放方式等。

(6) 表單和表單元素標記。多用于制作網(wǎng)頁和用戶交互的界面、控件，是客戶端與服務(wù)器端進行信息交流的途徑。用戶可以使用諸如文本域、列表框、復選框及單選按鈕之類的表單元素輸入信息，然后單擊某個按鈕提交這些信息。

2 CSS

如果說HTML語言規(guī)定了網(wǎng)頁的具體內(nèi)容，那么CSS(cascading style sheets)就是為了給這些內(nèi)容進行規(guī)整和裝飾而存在的。CSS最初的誕生，就是因為HTML為了滿足頁面設(shè)計者的顯示要求而變得臃腫復雜，因而需要一種樣式表語言達到控制頁面呈現(xiàn)內(nèi)容的效果。CSS讓整個頁面可視化程度更強，可以說是網(wǎng)頁的門面。如果將網(wǎng)頁比作一個舞臺，HTML是舞臺上的演員，那么CSS就是演員的扮相，更完美地將節(jié)目(即頁面內(nèi)容)呈現(xiàn)在觀眾面前。

CSS即層疊樣式表。作為一種用來表現(xiàn)HTML或者XML的計算機語言,CSS可以對網(wǎng)頁元素位置的排版進行像素級別的精確控制,可以靜態(tài)地修飾網(wǎng)頁,也可以配合腳本語言(如后文會提到的JavaScript)動態(tài)地格式化網(wǎng)頁元素。

所謂層疊，是即樣式可以層層疊加。

每個HTML元素都有一組樣式屬性,它們可以通過CSS來設(shè)定。這些屬性涉及背景(background)、字體(fonts)、顏色(color)、鏈接(link)、邊框(border)、列表樣式(url)等。CSS就是一種先選擇HTML元素,然后設(shè)定選中元素屬性的機制。

CSS選擇器和要應(yīng)用的樣式構(gòu)成了一條CSS規(guī)則。

CSS規(guī)則由兩個主要的部分構(gòu)成：選擇器及一條或多條聲明。選擇器(selector)就是想要改變樣式的HTML元素;每條聲明(declaration)由一個屬性(property)和一個值(value)構(gòu)成。屬性是想要設(shè)置的樣式屬性(style attribute),每個屬性有一個值。屬性和值被冒號(:)分開,CSS聲明總是以分號(;)結(jié)束,聲明組以大括號({ })括起來。

3 JavaScript

JavaScript最早是由Netscape Communication(網(wǎng)景)公司開發(fā)出來的一種客戶端腳本語言,將JavaScript代碼直接嵌入在HTML頁面中，能對HTML頁面中的HTML、CSS和JavaScript本身進行增加、刪除、修改、查詢等操作，使得客戶端靜態(tài)頁面變成支持用戶交互并響應(yīng)相應(yīng)事件的動態(tài)頁面(DHTML=HTML+CSS+JavaScript)。它的出現(xiàn)彌補了HTML語言的缺陷，使得開發(fā)客戶端Web應(yīng)用程序成為可能。

HTML Web運行在瀏覽器中，這就是說瀏覽器是Web的實際運行環(huán)境。如果將運行環(huán)境視為一個京劇表演的舞臺，則在這個舞臺上有網(wǎng)頁內(nèi)容HTML(演員)、網(wǎng)頁樣式CSS(演員的扮相)、網(wǎng)頁行為JavaScript(演員的動作)。JavaScript只能在自己的舞臺上表演，能對舞臺上的既有存在(HTML、CSS、JavaScript)進行操作(增、刪、改、查)，而不能跨越到舞臺外面表演(功能受限，JavaScript程序不能操作瀏覽器之外的事物)。

更進一步思考與觀察，會發(fā)現(xiàn)兩個有趣的現(xiàn)象:

① 當網(wǎng)站被服務(wù)器軟件架設(shè)起來時(如同京劇正式開演)，由于遵守網(wǎng)絡(luò)安全協(xié)議，JavaScript這個演員的功能受限于表演的舞臺(也就是瀏覽器客戶區(qū))。也就是說，此時JavaScript是存在功能受限的，能對HTML、CSS、JavaScript進行增刪改查，而不能對瀏覽器客戶區(qū)之外做任何事情，如不能操作硬盤等本地資源等。為了在互聯(lián)網(wǎng)上搭建網(wǎng)站，讓所有人都能看到的，還需要租用域名、空間。

② 當直接雙擊運行本地Web文件時(如同京劇在做排練)，JavaScript的功能相對不受限制。此時JavaScript可以訪問本地資源，如讀取本機IP、操縱本地文件系統(tǒng)等。但這樣架設(shè)的Web不能被他人通過網(wǎng)絡(luò)訪問，也不能被百度檢索。事實上，我們可以在本地放置無數(shù)個網(wǎng)頁，只要我們的硬盤容量足夠大。

JavaScript包含了三個部分的內(nèi)容：JavaScript腳本語言規(guī)范EMCAScript(語言核心)、文檔對象模型DOM(以面向?qū)ο蟮姆绞讲倏v文檔內(nèi)容)、瀏覽器對象模型BOM(以面向?qū)ο蟮姆绞讲倏v瀏覽器窗口元素)。

3.1 語言核心EMCA Script

EMCA 是歐洲計算機制造商協(xié)會(EuropeanComputer Manufacturers Association)的縮寫，EMCAScript就是這個協(xié)會制定的標準化腳本語言。我們知道，JavaScript是一門編程語言，而每一種語言都有它自己的基本語法如數(shù)據(jù)類型等，這些概念必須遵循一定的規(guī)范，瀏覽器開發(fā)者要嚴格依據(jù)這個規(guī)范來開發(fā)編譯器，JavaScript程序員要嚴格依據(jù)這個規(guī)范來調(diào)用API。也就是說，EMCAScript是JavaScript的語法規(guī)范，規(guī)定了JavaScript腳本的核心內(nèi)容。打個比方，新華字典(也算是一種語言規(guī)范)規(guī)定了“血”這個字，而無論在“血液”中的讀“xuè”，還是在“血暈”中的讀“xiě”。新華字典規(guī)范了漢字，EMCAScript規(guī)范了JavaScript。

3.2 文檔對象模型DOM

文檔對象模型(document object model)是針對HTML和XML文檔的應(yīng)用程序編程接口。DOM 把整個頁面規(guī)劃成由多個節(jié)點構(gòu)成的文檔，我們可以用DOM API將頁面內(nèi)容繪制成一個樹狀圖。在這種模型下，頁面中的每個部分都是可用程序操縱的節(jié)點，我們可以通過DOM 來方便地控制頁面的結(jié)構(gòu)和內(nèi)容(增加、刪除、修改、查詢等)，如我們就可以用document.getElementById()通過id號來查詢文檔中的元素。DOM 使得用戶頁面可以動態(tài)地變化，用戶可以和Web文檔內(nèi)容進行交互。

3.3 瀏覽器對象模型

瀏覽器對象模型BOM(browser object model)是針對瀏覽器的應(yīng)用程序編程接口。我們可以通過BOM 對瀏覽器窗口進行訪問和操作，例如彈出新的瀏覽器窗口，移動、關(guān)閉和更改瀏覽器窗口，提供詳細的網(wǎng)絡(luò)瀏覽器信息(navigator object)、詳細的頁面信息(location object)、詳細的用戶屏幕分辨率的信息(screen object)等。BOM 方便我們從瀏覽器上獲得信息，更好地和瀏覽器進行交互。例如，我們可以用window.alert()彈出消息框，用window.prompt()彈出提示框，使得用戶可以和瀏覽器窗口進行交互。

4 案例分析：選項卡控制

點擊沒同選項卡，實現(xiàn)如下切換效果：

代碼：

<html>
<head>
<title>tab control</title></head>
<style type="text/css">
#tab{
	position:relative;/* 定義選項卡的為相對定位，使其子級元素有定位參考對象 */
	width:45%;
	height:400px;
}
#tab h4{
	display:inline;
	background-color:#ccc;
	color:black;
}
#tab div{
	border:1px #666 solid;
	position:absolute; /*tab下的div疊在一起*/
	top:28px;
	left:0px;
	width:100%;
	height:370px;
	display:none;
}
#tab .block{
	display:block;
}
#tab .up{
    color:#999999;
	background-color:black;
}
</style>
<script>
function tabSwitch(tab,ao) {
	var h = document.getElementById(tab).getElementsByTagName("h4");
	var d = document.getElementById(tab).getElementsByTagName("div");
	var n = document.getElementById(tab).getElementsByTagName("div").length;
	for (var i = 0; i < n; i++) {
		if (ao - 1 == i) {
			h[i].className += " up";
			d[i].className += " block";
		} else {
			h[i].className = " ";
			d[i].className = " ";
		}
	}
}
</script>

<body>
<div id="tab">
<h4 onclick="tabSwitch('tab',1)" class="up">道德經(jīng)</h4>
<h4 onclick="tabSwitch('tab',2)" >岳陽樓記</h4>
<h4 onclick="tabSwitch('tab',3)" >中庸</h4>
<div class="block">
	<p>上善若水。</p>
	<p>水善利萬物而不爭，處眾人之所惡，故幾於道。</p>
	<p>居善地，心善淵，與善仁，言善信，正善治，事善能，動善時。</p>
	<p>夫唯不爭，故無尤。</p>
</div>
<div>
	<p>不以物喜，不以己悲</p>
	<p>惟江上之清風，與山間之明月</p>
	<p>耳得之而為聲，目遇之而成色</p>
</div>
<div>
	<p>博學，審問，慎思，明辨，篤行。</p>
	<p>學之要能，問之要知，思之要得，辨之要明，行之要篤。</p>
	<p>雖愚必明，雖柔必強。</p>
</div>
</div>
</body>
</html>

ref：

王小峰《大話Web開發(fā)：基于知識管理角度》

－End－

在線咨詢

上一篇：「基本功」前端安全系列之一：如何防止XSS攻擊？
下一篇：HTML 語法簡要總結(jié)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

常見六大 Web 安全攻防解析 - 技術(shù)頭條

1 HTML

2 CSS

3 JavaScript

4 案例分析：選項卡控制

您的項目需求