XSS攻擊與防護

XSS

Cross Site Scripting
跨站腳本

Scripting 能幹啥？

• 獲取頁面數據----偷取網站任意數據資料
• 獲取 cookies----偷取用戶資料
• 劫持前端邏輯----偷取用戶密碼和登陸狀態
• 發送請求---欺騙用戶
• ....

Xss 攻擊分類

• 反射性
  • url 參數直接注入
• 存儲性
  • 存儲到 DB 後讀取時注入

XSS 攻擊注入點

• HTML 節點內容

<div>
  #{content}
</div>
<div>
  <div>
    <script></script>
  </div>
</div>

• HTML 屬性

<img src="#{image}" /> <img src="1" onerror="alert(1)" />

• JavaScript 代碼

<script>
  var data = "#{data}";
  var data = "hello;alert(1);"";
</script>

• 富文本
  • 富文本保留 HTML
  • HTML 有 XSS 攻擊的風險

防護機制

• 瀏覽器自帶有防護機制，但很弱

ctx.set('X-XSS-Protection',1)//默認開啓瀏覽器防禦

• html 節點內容
  • 對字符串進行轉義處理
  • 轉義< &lt;和> >

var escapeHtml = function(str) {
  if (!str) return "";
  str = str.replace(/</g, "&lt");
  str = str.replace(/>/g, "&gt");
  return str;
};

• HTML 屬性
  • 轉義"&quto;

var escapeHtmlProerty = function(str) {
  if (!str) return "";
  str = str.replace(/"/g, "&quto");
  str = str.replace(/'/g, "&#39");
  str = str.replace(/ /g, "&#32");
  return str;
};

對&進行轉義，要放在前面str = str.replace(/&/g, "&amp");

• JavaScript 代碼

var escapeForJs = function(str) {
  if (!str) return "";
  str = str.replace(/\\/g, "\\\\");
  str = str.replace(/"/g, '\\"');
  return str;
};

也能夠這也樣處理，轉爲 json 格式：
forForJs: JSON.stringfy(ctx.query.from)
對\進行轉義，要放在前面

• 富文本
  • 按黑名單過濾標籤和屬性

var xssFilter = function(html) {
  if (!html) return "";
  html = html.replace(/<\s*\/?script\s*>/g, "");
  html = html.replace(/javascript:[^'"]/g, "");
  html = html.replace(/onerror\s*=\s[^'"]?[^'"]*['"]?>/g, "");
  return html;
};

• 按白名單保留部分標籤和屬性（要優於黑名單）
  • 能夠使用第三方插件cheerioREADME
  • 運行npm install cheerio
  • 該插件有本身的語法

var xssFilter = function(html) {
  if (!html) return "";
  var cheerio = require("cheerio");
  var $ = cheerio.load(html);

  // 白名單
  var whiteList = {
    img: ["src"]
  };
  $("*").each(function(index, elem) {
    console.log("this is elem", elem); //在終端打印DOM樹結構
    if (!switchList[elem.name]) {
      $(elem).remove();
      return;
    }
    for (var attr in elem.attribs) {
      if (whiteList[elem.name].indexOf(attr) === -1) {
        $(elem).attr(attr, null);
      }
    }
  });
  console.log(html, $.html());
};

還能夠使用第三方插件xss,這樣就不用了本身配置白名單了，固然這個插件確定也容許用戶本身定義白名單，運行npm install xss,該插件有本身的語法

var xssFilter = function(html) {
  if (!html) return "";
  var xss = require("xss");
  var ret = xss(html, {
    whiteList: {
      img: ["src"],
      a: ["herf"],
      font: ["size", "color"]
    },
    onIgnoreTag: function() {
      return "";
    }
  });
  console.log(html, $.html());
  return ret;
};

CSP

CSP 指的是內容安全策略，爲了緩解很大一部分潛在的跨站腳本問題，瀏覽器的擴展程序系統引入了內容安全策略（CSP）的通常概念。這將引入一些至關嚴格的策略，會使擴展程序在默認狀況下更加安全，開發者能夠建立並強制應用一些規則，管理網站容許加載的內容

• Content Security Policy
• 內容安全策略
• 用於指定哪些內容可執行
• 添加在頭部

ctx.set(Content-Security-Policy, default-src 'self')