web前端如何防范安全攻擊

一、對於XSS防御：

　　1、不要信任任何外部傳入的數據，針對用戶輸入作相關的格式檢查、過濾等操作，以及轉義字符處理。最普遍的做法就是轉義輸入輸出的內容，對於括號，尖括號，斜杠進行轉義

function escape(str) {
  str = str.replace(/&/g, '&')
  str = str.replace(/</g, '&lt;')
  str = str.replace(/>/g, '&gt;')
  str = str.replace(/"/g, '&quto;')
  str = str.replace(/'/g, '&#39;')
  str = str.replace(/`/g, '&#96;')
  str = str.replace(/\//g, '&#x2F;')
  return str
}

// 通過轉義可以將攻擊代碼 變成 -> &lt;script&gt;alert(1)&lt;&#x2F;script&gt;
escape('<script>alert(1)</script>')

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

const xss = require('xss')
let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
// -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
console.log(html)

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

　　2、可以使用CSP內容安全策略

二、對於CSRF防御：

　　1、get請求不對數據進行修改

　　2、不讓第三方網站訪問到Cookie，安全地使用 Cookie，設置Cookie為HttpOnly，禁止JavaScript操作Cookie；

　　3、阻止第三方網站請求接口，不要信任任何傳入的第三方數據，使用 CORS，設置 Access-Control-Allow-Origin；

　　4、請求時附帶驗證信息，比如驗證碼或者Token

　　5、防止網頁被其他網站內嵌為iframe，服務器端設置 X-Frame-Options 響應頭，防止頁面被內嵌。

三、對於點擊劫持防御：

　　1、X-FRAME_OPRIONS

　　X-FRAME_OPRIONS (X-Frame-Options)這個可以說是為了解決ClickJacking而生的，是一個HTTP響應頭，在現代的瀏覽器中有一個較好的支持，它就是為了防御用iframe嵌套的點擊劫持攻擊。該響應頭有三個值可選，分別是：

　　（1）DENY 表示頁面不允許通過iframe的方式展示，（瀏覽器會拒絕當前頁面加載的任何iframe）
　　（2）SAMEORIGIN 表示頁面可以在相同域名下通過iframe的方式展示,（frame頁面的地址只能為同源域名下的頁面）

　　（3）ALLOW-FROM 表示頁面可以在指定來源的iframe中展示

// 配置方法
// Apache配置
Header always append X-Frame-Options SAMEORIGIN

// nginx配置
add_header X-Frame-Options SAMEORIGIN;

四、對於中間人攻擊防御

　　防御中間人攻擊其實並不難，只需要增加一個安全通道來傳輸信息。HTTPS 就可以用來防御中間人攻擊，但是並不是說使用了 HTTPS 就可以高枕無憂了，因為如果你沒有完全關閉 HTTP 訪問的話，攻擊方可以通過某些方式將 HTTPS 降級為 HTTP 從而實現中間人攻擊。