常見的web安全問題總結

we安全對於web前端從事人員也是一個特別重要的一個知識點，也是面試的時候，面試官常常問的安全前端問題。掌握一些web安全知識，提供安全防範意識，今天就會從幾個方面提及前端web攻擊和防護的經常使用手段

常見的web攻擊方式　　

　　1.XSS

　　　　XSS（Cross Site Scripting）跨站腳本攻擊，由於縮寫和css重疊，因此能叫XSS，跨腳本攻擊是指經過存在安全漏洞的web網站註冊用戶的瀏覽器內非法的非本站點HTML標籤或javascript進行一種攻擊。

 　　　跨站腳本攻擊有可能形成如下影響

　　　　　　1.利用虛假輸入表單騙取用戶我的信息

　　　　　　2.利用腳本竊取用戶的cookie值，被害者在不知狀況的下，幫助攻擊者發送惡意請求

　　　　　　 3.顯示僞造的文章活圖片

　　　　XSS攻擊分類：

　　　　　　反射型 -url參數直接注入　　　

普通 http://localhost:3000/?form-china

 alert嘗試

  http://localhost:3000/?form=<scrupt>slert(1)</script>  若是有彈出，說明網站有漏洞，黑客就能夠對網站發送攻擊

　　　　　 獲取cookie　　　　　

 　　　　　　　經過訪問你的網址，在url參數攻擊，獲取到cookie域名僞造  https://dwz.cn/    用盜取的網址，修改一個簡易的網址，發送攻擊，也能訪問，信息也能保存，又稱假裝型網站 僞造cookie入侵，

　　　　　存儲型 存儲到DB後讀取注入

　　　　　　跨腳本注入，經過腳本注入代碼。用戶好比發送評論，用戶的信息都會在黑客網站顯示，就能夠拿到你所須要的數據

　　　XSS攻擊的危害-Scripting能幹啥就能幹啥　　

　　　　　　1.獲取頁面數據

                      2.獲取Cookies

                      3.劫持前端邏輯

                      4.發送請求

                      5.偷取網站的任意數據

                      6.偷取用戶的資料

                      7.偷取用戶的祕鑰和登陸轉態

                      8.欺騙用戶

　 　　防範手段

　　　　HEAD ctx.set('X-XSS-Protection',0) //禁止XSS過濾

　　　　　　0：禁止XSS過濾 　　　　

　　　　　　1： 啓用XSS過濾(一般瀏覽器是默認的)，若是檢測到跨腳本攻擊，瀏覽器將清除頁面(刪除不安全的部分) mode=block 啓用XSS過濾，若是檢測到攻擊，瀏覽器將再也不會清除頁面，而是阻止頁面加載report=<reporting-URL>(Chromium only)=啓用XSS過濾，若是檢測到跨站腳攻擊，瀏覽器將清除並使用、

　　　　CSP

　　　　　　內容安全策略(CSP,Content Security Policy)是一個附加的安全層，用於幫助檢測和緩解那些類型的攻擊，包括跨站腳本(XSS)和數據注入等攻擊，這些攻擊可用於實現從數據竊取到網站破壞或做爲惡意軟件分發版本等用途

　　　　　　CSP本質就是創建白名單，開發者明確告訴瀏覽器那些外部資源能夠加載和執行，咱們只須要配置規則，如何攔截是由瀏覽器本身實現的，咱們能夠經過這種方式來儘可能減小XSS攻擊　

　　

 Content-Security-Policy: default-src 'self'   只容許加載本站資源
 Content-security-Policy: img-src https://   只容許加載https協議圖片
  Content-security-Policy:child-src 'none'  不容許加載任何來源框架
   例如 ctx.set('Content-security-Policy','default-src')

　　　　黑名單

　　　　　　用戶輸入永遠不可信任的，最廣泛的作法就是轉義輸入的內容，對於引號，尖括號，斜槓進行轉義

　　　　　　　　　　　　　　　　　　　　　　　　　　function escape(str) {
                                                    str = str.replace(/&/g, '&');
                                                    str = str.replace(/</g, '<');
                                                    str = str.replace(/>/g, '>');
                                                    str = str.replace(/"/g, '&quto;');
                                                    str = str.replace(/'/g, "'");
                                                    str = str.replace(/`/g, '`');
                                                    str = str.replace(/\//g, '/');
                                                     str = str.replace(/<\/script>/,'')       
                                             return str
                                         }

　　　　　　富文原本說，顯然不能經過上面的辦法來轉義全部字符，由於這樣會把須要的格式過濾掉，對於這種狀況，一般採用白名單的辦法，固然也能夠經過黑名單過濾，可是考慮須要過濾的標籤和標籤屬性是在太多，更加推薦使用白名單的方式

　　　 白名單      

　　　　　　　　　　　　　const xss = require('xss')
                      let html = xss('<h1 id="title">XSS demo</h1> <script>alert('xss')</script>') 
                      轉義成  <h1>XSS deom</h1>$lt;script$gt;alert('xss');</script$gt

　　　HttpOnly Cookie

　　　　這是防止XSS攻擊竊取用戶cookie最有效的防護手段，web應用程序設置cookie時，將其屬性設置爲HttpOnly 就能夠防止網頁的cookie客戶端惡意JavaScript竊取，保護用戶cookie信息

 設置方法：response.addHeader('Set-Cookie','uid=12;path=/; HttpOnly')

　　  2.CSRF

　　　　CSRF(Cross Site Request Forgery)，既跨站請求僞造，是一種常見的web攻擊，他利用用戶以登陸的身份，在用戶不知情的狀況下，以用戶的名字完成非法操做

　　　　　1.用戶登陸了站點A，並在本地記錄了cookie

　　　　　 2.在用戶沒有登陸除站點A的狀況下(也就是cookie生效的狀況下)，訪問了惡意攻擊者提供引誘危險站點B(B站點需求訪問站點A)。

　　　　　 3.站點A沒有作任何CSRF防護

　　　　　 CSRF危害

　　　　　　　　1.利用用戶登陸狀態　　

　　　　　　　　2.用戶不知情

　　　　　　　　3.完成業務請求

　　　　　　　　4.盜取用戶資金(轉帳，消費)

　　　　　　　　5.冒充用戶發帖背鍋　　

　　　　　　　　6.損害網站聲譽

　　　　　CSRF防護

　　　　　　　　 禁止第三方網站帶cookie ----有兼容性問題

Referer Check ----Https不發送referer
                   app.use(async(ctx,next)=>{  koa中間件實現
                          await next()
                          const referer = ctx.request.header.referer
                           console.log('Referer:',referer)
                     })
                   對登陸註冊設置驗證碼校驗 

　　 3.點擊劫持--clickjacking

　　　　 點擊劫持是一種視覺欺騙的攻擊手段，攻擊者將須要攻擊的網站經過iframe嵌套方式嵌入本身的網頁中，並將iframe設置爲透明的，在頁面中透露出一個按鈕誘導用戶點擊  經過用於各類網站，使用iframe技術，圖片點幾進入一個其餘網址，致使用戶信息泄密

　　　　點擊劫持防護

　　　　　　 X-FRAME-OPTIONS  是一個HTTP響應頭，在現代瀏覽器有一個很好的支持，這個HTTP響應頭就是爲了防護iframe嵌套的點擊劫持攻擊

　　　　　　該響應頭有三個值可選，分別是

　　　　　　　　 DENY:表示頁面不容許經過iframe的方式展現

　　　　　　　　SAMEORIGIN:表示頁面能夠在相同域名下經過iframe的方式展現

　　　　　　　　ALLOW-FRO:表示頁面能夠在指定來源的iframe中展現

<style id="click-jack"> 
                                      html{
                                              display: none;
                                       }
                                  </style>
                               
<script>
    if(self == top) {
        var style = document.getElementById('click-jack')
        document.body.removeChild(style)
    } else {
        top.location = self.location
    }
</script>
              如今實現方式： ctx.set('X-FRAME-OPTIONS','DENY')
     以上代碼的做用就是當經過iframe的方式加載頁面時，攻擊者的網頁直接不顯示全部內容了

　　4.SQL注入

　　　　　攻擊者成功的向服務器提交惡意的SQL查詢代碼，程序在接收後錯誤的將攻擊者的輸入做爲查詢語句的一部分執行，致使原始的查詢邏輯被改變，額外的執行了攻擊者精心構造的惡意代碼。　　　

　　　　　例如： 'or'1 '=' 1  填寫特殊密碼

         　　　拼接後的sql

　　　　　　SELECT *

          FROM test.user

          WHERE username = 'xiaozhou'

           AND password= '1' or  '1' = '1'

         老的後臺數據庫登陸，黑客嘗試使用1' or  '1' = '1相等於密碼，去登陸

　　　　　防護 

　　　　　　全部的查詢語句建議使用數據庫提供的參數查詢接口**。參數化的語句使用參數而不是將用戶輸入變量嵌入到SQL語句中，既不要直接拼接SQL語句，例如node.js中的mysqlis庫query方法中的？佔位符參數

錯誤的寫法
              cosnt sql = `
                        SELECT *
                        FROM test.user
                        WHERE username = '${ctx.reuqueset.body.username}'
                        AND password= '${ctx.reuqueset.body.password}' `
              console.log('sql',sql)
              res = await query(sql)
         正確的寫法
              const sql = `
                         SELECT *
                         FROM test.user
                         WHERE username = ?
                         AND password= ?  `
              console.log('sql',sql)
         res = await query(sql.[ctx.request.body.username，ctx.reuqueset.body.password])　　　　

 　　　　　　1.嚴格限制web應用的數據庫的操做權限**，給此用戶提供僅僅可以知足其工做的最低權限，從而最大限度減小注入攻擊對數據庫的危害

         　　　　2.後端代碼檢查輸入的數據是否符合預期**，嚴格限制變量的類型，例如使用正則表達式進行一些匹配處理

        　　　　 3.對進行數據庫的特殊字符串(',",\,>,<,&,%,等等)進行轉義處理，後者編碼轉換。基本全部的後端語言都有對字符串進行轉義處理的方法，比例，loads的lodaash_escapehtmlchar等

　　5.OS命令注入

　　　　os命令注入和sql注入差很少，只不過SQL注入是針對數據庫的，而OS命令注入是針對操做系統的，OS命令注入攻擊者指經過web應用,執行非法的操做系統命令達到攻擊的目的，只要在你讓那個調用Shell函數的地方就有存在被攻擊的風險，假若 調用shell時存在疏漏，就能夠執行插入非法命令

　　　　　　

            以node.js爲例，假如在接口中須要從github下載用戶指定的repo
              const exec = require('mz/child_process').exec;
              let params = {/*用戶輸入的參數*/}
              exec(`git clone ${params.repo} /some/path`)
              若是傳入參數是會怎麼樣
              https://github.com/xx/xx.git && rm -fr /* &&                

 

　　6.請求劫持

　　　　DNS劫持

　　　　　　顧名思義，DNS服務器(DNS解析各個步驟)被篡改，修改了域名解析的結果，使得訪問的不是預期的ip

　　　　 HTTPS劫持

　　　　　　運營商劫持，此時大概就只能升級爲HTTPS了

　　7.DDOS　　　　

                    

　　　 http://www.ruanyifeng.com/blog/2018/06/ddos.html 阮一峯文檔說

　　　　DDOS不是一種攻擊，而是一大類攻擊的總稱，它有幾十張類型，新的攻擊方法還不斷髮明出來，網站運行各個環節，均可以是攻擊目標，只要把一個環節攻破，使得整個流程、跑不起來，就獲得癱瘓服務的目的

　　　　其中，比較常見的是一種攻擊是cc攻擊，他就是簡單粗暴地送來大量的正常請求，超出服務器的最大承受量，致使死機，

　　　　好比遭遇cc攻擊，最多的時候全世界大概20多個ip地址輪流發出請求，每一個地址請求量在每秒200次-300次，我看訪問日誌的時候，就以爲請求像洪水同樣涌來，一眨眼就是一大堆，幾分鐘的時候，日誌文件的體積就大了100MB,

　　　　 常見的攻擊方式

　　　　　　SYN Flood

　　　　　　　　此攻擊經過目標發送具備欺騙性源ip地址的大量TCP 初始連接請求SYN數據包來利用TCP握手，目標機器相應每一個鏈請求，而後等待握手中的最後一步，這一步從未發生過，耗盡了過程當中的目標資源

　　　　　　HTTP Flood

　　　　　　　　 此攻擊相似於同時在多個不一樣計算機上反覆按web瀏覽器中的刷新，大量HTTP請求氾濫服務器，致使拒接服務 

　　　　 防護手段

　　　　　　備份網站

　　　　　　　　備份網站不必定是全功能的，若是能作到全靜態瀏覽，就能知足需求，最低限度應該能夠顯示公告，告訴用戶，網站出看問題，正在全力搶修

　　　　　　HTTP請求攔截

　　　　　　　　　硬件，服務器，防火牆 　 帶寬擴容     + CDN  提升犯罪成本 

防範方法

　　1.密碼安全　　

　　　　泄露渠道

　　　　　　數據庫被偷   服務器被入侵   通訊被竊聽      內部人員泄露     其餘網站

　　　　　防護密文-明文沒法反推　　

　　　　　　嚴禁明文存儲　　 單向變換　　變換複雜度要求　　密碼複雜度要求　　加鹽（仿拆解）　　雪崩效應-明文小幅度　　 密文劇烈變化　　密文固定長度 md5 sha1

　　　　　 密碼傳輸安全

　　　　　　https傳輸　　頻次限制　　前端加密意義有限-傳輸層加密，不會泄露，但不表明不能登陸

　　　　　摘要加密的複雜度

　　　　　　　　 md5反查,用node啓動了一個本地服務，使用node提供的crypto對密碼加密

　　　　　

 　　　　雖然對密碼加密了，可是咱們設置的過於簡單，經過md5反查，不到1秒就能查到密碼

　　　　

 　　　　 https://cmd5.com/ 密碼設置太過簡單，就可直接經過這個地址查詢到本身的密碼，密碼設置數字加英文就不會當場查詢出來，須要付費就能夠查詢出來了 若是設置數字，英文，字符串，就查詢不到

 

　　2.人機驗證 與 驗證碼

　　　　增強登陸驗證，防止黑客盜刷，致使服務器奔潰

　　　　

 

 

　　　　　　滑動驗證碼實現原理 　

　　　　　　　　　　1.服務端隨機生成摳圖和帶有摳圖陰影的背景圖片，服務端保存隨機摳圖位置座標

　　　　　　　　　　 2.前端實現滑動交互，將摳圖拼在摳圖陰影之上，獲取用戶滑動距離值。

　　　　　　　　　　 3.前端將用戶滑動距離值傳入服務端，服務端校驗偏差是否在容許範圍以內

　　　3.HTTPS配置    

　　　　　　HTTP弱點

　　　　　　 危害　　　　

 　　　　　　　竊聽---密碼 敏感信息

　　　　　　　 篡改--- 插入廣告 重定向其餘網站

　　　　　　時代趨勢

　　　　　　　目前全球互聯網正在從HTTP向HTTPS的大遷移

　　　　　　　Chrome和火狐瀏覽器將對不採用HTTPS加密的網站提示不安全

　　　　　　   蘋果要求全部APP通訊必須採用HTTP加密     

　　　　　　　小程序強制要求服務器端使用HTTPS請求

　　　　　  特色　

　　　　　　保密性(防泄密)

　　　　　　完整性(防篡改)

　　　　　　真實性(仿假冒)

　　　　   什麼是SSL證書   　

　　　　　　SSL證書由瀏覽器中受信任的根證書頒發機構在驗證服務器身份後頒發，具備網站身份驗證和加密傳輸雙重功能

　　　　　　 密碼學           

　　　　　　　　對稱加密、

　　　　　　　　　　對稱加密的一大缺點是祕鑰的管理和分配，話句話說，如何把祕鑰發送到須要解密你的消息的人的手裏是一個問題，在發送祕鑰的過程當中，祕鑰有很大的風險會被黑客們攔截，實現中一般的作法是將對稱加密的祕鑰進行對稱加密，而後傳送給須要他的人

　　　　　　　　不對稱加密

　　　　　　　　　　 產生一對祕鑰  公鑰負責加密　　私鑰負責解密　　私鑰沒法解開說明公鑰無效---抗抵抗　　計算複雜對性能有影響

　　　　SSH公鑰登陸原理　

　　　　　　

　　　　　　密碼口令登陸

　　　　　　　　　經過密碼進行登陸，主要流程爲

　　　　　　　　　　1.客戶端鏈接上服務器以後，服務器吧本身的公鑰傳給客服端

　　　　　　　　　　2.客服端輸入服務器密碼經過公鑰加密以後傳給服務器　

　　　　　　　　　　 3.服務器根據本身的私鑰解密登陸密碼，若是正確那麼久讓客戶端登陸

　　　　　  公鑰登陸

　　　　　　　　　公鑰登陸是爲了解決每次登陸服務都要輸入密碼的問題，流行使用RSA加密方案，主要流程包括　　

　　　　　　　　　　1.客戶端生成RSA公鑰和私鑰

　　　　　　　　　　2.客戶端將本身的公鑰存放到服務器

　　　　　　　　　　3.客戶端請求鏈接服務器，服務器將一個公鑰加密隨機字符串發送給客戶端

　　　　　　　　　　 4.客戶端根據本身的私鑰加密這個隨機字符串以後再發送給服務器

　　　　　　　　　　5.服務器接收到加密後的字符串以後用公鑰解密，若是正確就讓客戶端登陸，不然拒絕

　　　　　　SSL證書分類

　　　　　　　　1.入門級DCSSL -域名有效，無門檻

　　　　　　　　2.企業級OVSSL-企業資質 我的認證

　　　　　　　　 3.加強型EVSSL-瀏覽器給予綠色地址顯示公司名字

　　4.Session管理　

　　　對於cookie的安全管理，其重要行是不言而喻的。特別是對於動態的wen應用，在如HTTP這樣的無動態協議的之上，他們須要使用cookie來維護狀態

　　　Cookie標識     

　　　　　　secure 這個屬性告訴瀏覽器，僅在請求是經過HTTPS傳輸時，才傳遞cookie

　　　　　　HttpOnly 設置這個屬性將禁止JavaScript腳本獲取到這個cookie，這能夠用來幫助防止跨站腳本攻擊.

　　　　 Cookie域

　　　　　　domain 這個屬性用來比較請求URL中服務端的域名，若是域名匹配成功，或者是其子域名，則繼續檢查path屬性

　　　　　　path 除了域名，cookie可用的url路徑頁能夠被指定，當域名和路徑都匹配時，cookie纔會發送請求

　　　　　　expires 這個屬性用來設置持久化的cookie，當設置了他之後cookie在指定的時間到達以前都不會過時

　　5瀏覽器安全控制

　　　　X-XSS-Protection 防止反射型XSS

　　　　　Strict-Transport-security  強制使用HTTPS通訊

　　　　　CSP

　　　　　HTTP響應頭Content-Security-Policy 容許站點管理者在指定頁面控制用戶代理資源，除了少數例外，這條政策將極大的指定服務源，以及腳本端點，這將防止跨站腳本攻擊

　　　　　<meat http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'nonde'; ">

　　爬蟲技術

　　　使用cheerio與http和https

　　　puppeter 無頭瀏覽器技術

　 反爬蟲技術

　　　 Usre-Agent， Referer ，驗證碼，驗證

　　　　單位時間的訪問次數，訪問量，限制

　　　　關鍵信息用圖片混交

　　　　異步加載技術

　　　　前度技術限制

　　　　　　字體亂序加密技術

　　　　　　將網站的重要字體，將html部分生成圖片

　　　　　　 反爬蟲最高境界就是Canvas的指紋

 

以上都是對前端安全一些總結，歡迎大佬指點一二