vue开发之加密传输

导语: 做应用开发的,有时候会担心自己传输的数据会被监听或者窃取,出现安全问题,所以就有通过加密数据来保护数据安全,除了申请ssl证书,还有就是对传输的内容在传输之前进去加密。

# 目录

  • 网站安全
  • 攻击方法
  • 应对措施

# 网站安全

自从网站诞生那日起,网站就有了生命。从刚开始的只游览各种信息,到论坛、门户等网站交互互动,再到现在的复杂设计,功能繁多,经过了一个个历程。

刚开始网站只是游览信息,那时候电脑也不普及,也谈不上什么网站安全,全世界范围内的电脑设备也不多。后来各种互联网病毒开始传播,入侵各种系统的电脑设备,致使电脑瘫痪,无法使用。

后来网站内容不断增加,功能增加,流量增加,一些人出于竞争或者恶意组织,对某个网站进行流量攻击,也就是DDoS攻击,致使网站内存、CPU等资源耗尽,从而无法为正常用户提供服务,这类攻击非常可怕。

但是解决这类安全问题不是本篇的范畴,本篇主要是介绍前端开发过程中遇到的安全问题。

# 攻击方法

据我熟知的网站安全的攻击方法有以下几种:

  • XSS(cross-site-scripting)

跨站脚本攻击,就是利用恶意html,js脚本代码对网站进行攻击。

  • CSRF(Cross-siterequestforgery)

跨站请求伪造,就是利用受信任用户的cookie登录信息和网站,伪造用户的请求进行恶意攻击。

  • 密码攻击,撞库

也就是获取某一批有漏洞网站的用户信息,在其他网站(比如:淘宝,天猫等平台)进行密码登录,不断尝试,进而损害网站用户的正常利益。

# 应对措施

# XSS方法

对于第一种攻击,开发者可以使用方法过滤掉有害的代码,检查自己写的程序是否容易受到攻击,含有某种漏洞。

function filterXss(str) {
  var pattern = new RegExp("[%--`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]");
  var res = "";
  for (var i = 0; i < str.length; i++) {
    res = res + str.substr(i, 1).replace(pattern, '');
  }
  return res;
}
console.log(filterXss('<script>alert(document.cookie);</script>')); // scriptalertdocumentcookiescript

这种方法还是挺有效果的,还有在写的过程中避免使用eval(),它能解析各种js脚本执行。

eval(console.log('1')); // 1

# CSRF方法

这种方法是携带cookie,你可以禁用携带cookie,只用于https的携带cookie,使用本地存储代替cookie存储用户信息。

还可以通过控制请求头,Referer,token验证等方法。

# 密码方法

对密码进行加密处理,可以使用md5,sha1,base64,sha256等加密算法工具对密码进行加密处理后再传输。

这里使用node方法来处理。

npm i -s js-sha256 js-base64 crypto
//保存为crypto.js
import crypto from 'crypto'
import jsSha from 'js-sha256'
import base64 from 'js-base64'

export const mdCrtpto = (pwd) => {  
  let md5 = crypto.createHash('md5');
  md5.update(pwd);
  return md5.digest('hex');
}

export const shaCrypto = (pwd) => {
  return jsSha.sha256(pwd);
}

export const baseCrypto = (pwd) => {
  return base64.Base64.encode(pwd);
}
module.exports = {
  mdCrtpto,
  shaCrypto,
  baseCrypto,
}

导入即可使用.

// 这里引入md5加密
import { mdCrtpto, shaCrypto, baseCrypto } from 'crypto';
console.log('md5加密:' + mdCrtpto('123456')); // e10adc3949ba59abbe56e057f20f883e
console.log('sha256加密:' + shaCrypto('123456')); // e10adc3949ba59abbe56e057f20f883e
console.log('base64加密:' + baseCrypto('123456')); // e10adc3949ba59abbe56e057f20f883e

单一的加密容易被人破译,利用彩虹表等解密工具,不过你可以使用加盐方法,就是对三种方法进行混合加密,这种方法更好用.

语法示例:

sha256(sha1(base64(md5(salt + str + salt))))

这样就没人知道你的密码是多少,也不会有人破译你的密码,但是不好的地方在于你也不知道密码是多少,用户一旦忘记自己的密码,就必须重新设置新密码,不过安全第一,这种方法更高级.很大网站都使用这种加密方法.

今天的前端安全总结就分享这么多,文中若有不足之处,还请各位大侠指正,不吝赐教,谢谢!