前端安全機制集合（不定期更新） -- 戴向天

大家好！我叫戴向天

QQ羣：602504799

如若有不理解的，可加QQ羣進行諮詢瞭解

關於前端的安全機制大致分爲：控制檯、數據加密處理，文件訪問權限等等。

由於vue現在比較火熱，所以以下的所有處理都是基於vue進行操作的。

關於打開控制檯的方法
一、鼠標右擊
二、F12
三、Ctrl + Shift + i
四、在頁面還沒有進行加載完成，強行使用F12進行打開控制檯
五、利用瀏覽器的工具選項進行打開

禁止打開控制檯的操作我大概的進行了封裝

代碼如下：

import {isDev} from '@/config/base'			// 判斷是否位開發模式

const prohibitConsole = (html) => {
  if(isDev)return true

  /**
   * 谷歌控制檯禁止
   */
  const d = document.createElement("div");
  Object.defineProperty(d, "id", {
    get() {
      if (!sessionStorage.isOffOnConole) {
        sessionStorage.setItem("isOffOnConole", true);
        self.isOffOnConole = false;
        window.location.reload();
      }
    }
  });


  if (sessionStorage.isOffOnConole) {
    document.head.innerHTML = "";
    document.body.innerHTML = `<div style="display: flex;justify-content: center;align-items: center;font-size: 0.6rem;height: 100vh;text-align: center;">${html}</div>`;
    sessionStorage.clear();
  } else {
    console.log(d);
  }
  /**
   * 禁止調試
   */
  try {
    var $_console$$ = console;
    Object.defineProperty(window, "console", {
      get: function () {
        if ($_console$$._commandLineAPI)
          throw "抱歉, 爲了用戶安全, 本網站已禁用console腳本功能";
        return $_console$$
      },
      set: function ($val$$) {
        $_console$$ = $val$$
      }
    })
  } catch ($ignore$$) {
  }
  /**
   * 鼠標右擊事件
   */
  document.oncontextmenu = function () { return false; };

  /**
   * 鍵盤事件
   * F12以及組合鍵
   */
  let keyCodes = []

  const handler = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode == 123) {
      e.returnValue = false;
      return (false);
    }
  }
  document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if (e.keyCode === 73) {
      if (keyCodes.length === 2) {
        e.returnValue = false;
        return (false);
      }
    }

    if (e.keyCode === 17 || e.keyCode === 16) {
      keyCodes.push(e.keyCode)
    }

    var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode == 123) {
      e.returnValue = false;
      return (false);
    }
  }
  document.onkeyup = function () {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if (e.keyCode === 16 || e.keyCode === 17) {
      const index = keyCodes.indexOf(e.keyCode)
      keyCodes.splice(index, 1)
    }

    if (e && e.keyCode == 123) {
      e.returnValue = false;
      return (false);
    }
  }
  document.onkeypress = handler
}

export default prohibitConsole

關於文件訪問的權限，作爲前端。所能做的無非就是判讀是否爲正確的站點

const isDev = process.env.NODE_ENV === "development"	// 是否爲開發模式
const originSite = window.location.origin   // 當前的域名站點
const rightSiter = isDev ? 'http://127.0.0.1:8090' : 'http://127.0.0.1:8080'    // 正確的站點
const isRightSite = originSite === rightSiter    // 判斷是不是正確的站點訪問

/**
 * 非法操作tips
 * 並且清除所有信息（對於別人的惡意使用，前端能做出的懲罰目前也就是這些的了）
 */
const illegalTips = (html = '') => {
  clearAll()
  document.head.innerHTML = "";
  document.body.innerHTML = `<div style="display: flex;justify-content: center;align-items: center;font-size: 0.6rem;height: 100vh;text-align: center;">${html}</div>`;
}

//清除所有cookie
const clearAllCookie = () => {
  const date = new Date();
  date.setTime(date.getTime() - 10000);
  let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
  if (keys) {
    for (let i = keys.length; i--;)
      document.cookie = keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
  }
}

// 清除前端所有能清除的數據
const clearAll = () => {
  localStorage.clear()      // 清除本地緩存
  sessionStorage.clear()  // 清除hui
  clearAllCookie()
}

export default illegalTips;


// 防止他人惡意拿取打包好的js文件進行使用
if (!isRightSite) {
  illegalTips( `非法使用洋鏟科技的文件，請停止您當前的操作。`)
}

關於前端數據存儲，下次更新（敬請期待）