导语： 做应用开发的，有时候会担心自己传输的数据会被监听或者窃取，出现安全问题，所以就有通过加密数据来保护数据安全，除了申请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))))

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

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