大家好！我叫戴向天

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

	====================        更新时间：2020-07-06      ===================

关于前端数据存储。

对数据进行监听 - 判断是否有而已修改数据。

以下的监听实现的功能是将现有的数据进行监听，后期加上去的数据将不会被监听到

// 创建一个监听数据的类
class Watch {
	constructor(options,watchHandler){
		options = options || {}
		for(let key in options){
			this.$watch(options,key,options[key],watchHandler)
		}
	}
	
	/**
		进行数据监听
	*/
	$watch(target, key, value,watchHandler) {
		Object.defineProperty(target, key, {
			get() {
				return value
			},
			set(newValue) {
				if (newValue !== value) {
					watchHandler&&watchHandler(newValue,value,key,target)
					value = newValue
				}
			}
		})
	}
}

/**
	例子：监听localStorage的变化
*/
localStorage.nickname = "戴向天"
new Watch(localStorage,(newValue,value,key,target)=>{
	/**
		这里就是写入当改变数据的时候进行的操作处理
	*/
	console.log('您更改了本地的缓存数据')
})

在js方面我们知道 除了const定义的数据类型不可进行更改，其它的定义方式都可以进行修改数据。
但是如果const 定义了一个数组获取JSON对象，那它的内容数据还是照样可以进行修改的。为了真正实现无法修改的功能，JS这边也有进行提供一个方法： Object.freeze(data)
Object.freeze可以将现有的数据进行冻结。无法再进行添加和删除。

例子：

let userInfo = {
	nickname: '戴向天',
	age: 18,
}

// 冻结一个数据，不许进行修改操作
Object.freeze(userInfo)
userInfo.nickname = "洋产科技"
console.log(userInfo.nickname)	// 戴向天

// 解冻的方法。如果userInfo定义的是const类型的话就完全无法进行更改了
userInfo = JSON.parse(JSON.stringify(userInfo))
userInfo.nickname = "洋产科技"
console.log(userInfo.nickname)	// 洋产科技

当然关于数据安全的不只是这些。下次更新（敬请期待）