前端日拱一卒D5——web安全基礎

DerekZ95發表於2018-07-23
前端Web

前言

餘為前端菜鳥，感姿勢水平匱乏，難觀前端之大局。遂決定循前端知識之脈絡，以興趣為引，輔以幾分堅持，望於己能解惑致知、於同道能助力一二，豈不美哉。

本系列程式碼及文件均在 此處

三大攻擊

XSS(cross site script, 跨站指令碼攻擊)，SQL隱碼攻擊和CSRF(cross-site request forgery, 跨站請求偽造)是最常見的幾種web攻擊行為

XSS

由帶有頁面可解析內容的資料未經處理直接插入到頁面解析導致

  • 儲存型XSS

    後臺從資料庫中讀取資料返回，在前端頁面模板中直接渲染

    <div>{{ content }}</div>
<!-- content ---> <script>alert(1)<script> -->
<!-- 渲染後 -->
<div><script>alert(1)<script></div>
複製程式碼

  • MXSS(Dom XSS)

    將指令碼插入Dom屬性中被解析導致

    <div class="abcd {{ content }}"></div>
<!-- content ---> "><script>alert(2)</script><div class="efgh -->
<!-- 渲染後 -->
<div class="abcd"><script>alert(2)</script><div class="efgh"></div>
複製程式碼

  • 反射性XSS

    在url中注入了可解析內容，頁面渲染時用到了這些引數導致

    // 例如node伺服器處理頁面請求時
let name = req.query['name']
// name=<script>alert(3)<script>
this.body = `<div>${name}</div>`
// 渲染後
<div><script>alert(3)<script></div>
複製程式碼

一般處理方式：

  • HTML編碼：將特殊字元如<, >等進行轉換，轉換為HTML字元實體
  • js編碼：使用Unicode碼位替換特殊字元
  • Url編碼：%加ASCII碼

具體的東西有點多啊，暫時先放放，以後對安全競賽感興趣了再補充

CSRF

偽站點從源站點獲取了使用者資訊後直接呼叫服務介面。 一般的處理的方式是通過服務下發加密過的token，並在後續請求中由前端帶上到服務端進行token驗證。但這樣也不一定安全。

SQL隱碼攻擊

一個例子：

// 請求url GET /xxx/xxx?id=100 or name=derek
// server
sql = `select * from user where id =${req.query.id}`
exec(sql)
// 得到了意料之外、預謀已久的資訊
複製程式碼

一般處理方式是服務端對於引數進行校驗

請求劫持

DNS劫持

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

HTTP劫持

前端日拱一卒D5——web安全基礎

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

瀏覽器安全控制

  • X-XSS-Protection

    防止反射型XSS

  • Strict-Transport-Security

    強制使用HTTPS通訊

  • Content-Secure-Policy

    指定瀏覽器只可以載入指定可信域名來源的內容，可以在響應頭中返回，也可在頁面meta標籤內指定

    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
複製程式碼

  • Access-Control-Allow-Origin

    設定可訪問該伺服器資源的域

雖發表於此，卻畢竟為一人之言，又是每日學有所得之筆記，內容未必詳實，看官老爺們還望海涵。

相關文章