前端安全常識面試題學習筆記

前言

如下總結的爲前端常見的安全常識，也是面試必問的。沒有大的技術含量，但須要知道。咱們在本身的應用開發中，也須要避免這樣的低級問題。

sql注入

描述

就是後端依賴前端返回的參數直接拼接sql進行查詢數據，致使sql不正常的拼接，形成的安全問題。

解決方案

對前端傳遞的信息進行層層校驗，不直接使用。

備註：由此延伸到，其實任何前端的傳遞數據均可能是有風險的、不嚴謹的，所以後端的任何接口針對傳遞參數都要進行非法校驗，業務校驗，而後才能實際使用。

XSS（Cross Site Scripting，跨站腳本攻擊）

描述

簡單來說就是經過某種方式向你的代碼中注入js代碼，最多見的是經過表單的提交。而後由於這些代碼與你的代碼具備同等的權限，所以能夠訪問到你的數據信息，也能夠進行一些數據的上報。所以，危害是很大的。

解決方案

針對一些輸入的內容進行替換：

& 替換爲：&

< 替換爲：<

替換爲：>

」 替換爲："

‘ 替換爲：'

/ 替換爲：/

另外針對性的對cookie增強控制，設置http-only,這樣js就獲取不到cookie的內容。

可是，針對富文本內容，簡單的文本替換並不能解決問題，能夠經過csp的方式解決，也就是創建白名單。

1. 設置 HTTP Header 中的 Content-Security-Policy
2. 設置 meta 標籤的方式 <meta http-equiv="Content-Security-Policy">

若是是http,header的話，設置能夠是這樣:Content-Security-Policy: default-src ‘self’,這樣就是隻容許本網站的資源了。

CSRF（Cross-site request forgery，跨站請求僞造）

描述

CSRF 是借用了當前操做者的權限來偷偷地完成某個操做，而不是拿到用戶的信息。

其藉助的原理是：cookie的同源策略，只要登陸以後，同域名的請求都不須要進行用戶的驗證。

解決方案

• 針對須要進行校驗的操做，設置額外的驗證，好比驗證碼、密碼、指紋等；
• get請求改成post請求，更加安全；讓get請求更多的只負責讀操做；
• 驗證document.referer,判斷網頁的上一個頁面來源，微信支付就有這個驗證的機制；
• token時效性機制，在進行某操做時，發送一個時效性的token，在進行某操做後續操做時，驗證token是否相同；
• 驗證網絡ip，由於若是是非本機設備發起的請求，那麼ip也會相比原來的ip是不一樣的，經過ip的對比也能夠去除不安全的因素。

網頁嵌套攻擊

描述

經過iframe嵌套網站的頁面，而後設計嵌套透明化，經過界面點擊時，觸發本身的事件。

解決方案

第一種： header設置不容許嵌套

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

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

• DENY，表示頁面不容許經過 iframe 的方式展現
• SAMEORIGIN，表示頁面能夠在相同域名下經過 iframe 的方式展現
• ALLOW-FROM，表示頁面能夠在指定來源的 iframe 中展現

第二種：咱們能夠經過簡單的js去判斷當前界面是否是頂層窗口就能夠解決這種問題了。

if(top.location!=self.location){  
        top.location.href = window.location.href;
    }else{  
        alert("是頂層窗口")；
}  
複製代碼

中間人攻擊

描述

也就是請求被攔截，而後可能被改寫，或者被抽取重要信息，繼續繼續請求

解決方案

簡單有效的：升級https方案

更多文檔

• web安全面試題：連接

關於我

我是一名前端Coder，熱愛分享生活與技術中的經驗與心得。 我是一名旅遊愛好者，愛好拍攝旅途中的風景與人物。 我是一名寫做狂人，基本天天都有新文章產出，筆耕不輟。

我的站點

GitHub：github.com/robinson90 codepen：codepen.io/robinson90 personal blog: damobing.com yuque docs: www.yuque.com/robinson juejin blog: juejin.im/user/5a30ce…

我的微信號與公衆號

微信：csnikey,或者掃碼加我

達摩空間訂閱號：damo_kongjian，或者掃描下面的二維碼