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

大家好！我叫戴向天

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( `非法使用洋铲科技的文件，请停止您当前的操作。`)
}

关于前端数据存储，下次更新（敬请期待）