【老板要我啥都会】前端升全栈系列 项目安全

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 这里其中只有 xss 攻击是前端也需要搞的,密码加密的话是必要的,即使被攻击,对面拿到的也只是加密过的密码,还行这里其中只有 xss 攻击是前端也需要搞的,密码加密的话是必要的,即使被攻击,对面拿到的也只是加密过的密码,还行。

1.开始和SQL注入

安全:

  • SQL注入:窃取数据库内容;
  • xss攻击:窃取前端的2cookie内容;
  • 密码加密:保障用户信息安全(重要)

 

这里其中只有 xss 攻击是前端也需要搞的,密码加密的话是必要的,即使被攻击,对面拿到的也只是加密过的密码,还行这里其中只有 xss 攻击是前端也需要搞的,密码加密的话是必要的,即使被攻击,对面拿到的也只是加密过的密码,还行。

补充:

  • server端公鸡方式有很多,预防手段也很多;
  • 本文讲解常见的、能头改过web server(Nodejs)层面进行预防;
  • 有些攻击需要硬件和服务来支持(需要OP支持),比如DDOS

OP是运维,第三点也可以交给专业的团队来整理;

SQL注入:

  • 最原始、最简单的攻击,从有了web2.0就有了SQL注入攻击;
  • 攻击方法:输入一个SQL片段,最终拼接成为一段攻击代码;
  • 预防措施;谁用mysql的escape函数处理输入内容就可以了;

这种攻击就是在需要输入东西的时候,输入一些 sql 判断, 当我们去拼接起来的时候就会被攻击。 现在演示一下登录的时候,无外乎两种情况,成功或者失败。 而我们验证登录的话是根据 sql 语句(里面有密码和用户名)去搜索,但是如果传入的用户名后面有‘--就会把我们后面 根据密码判断的那一部分注释掉,导致不需要密码,只有用户名去搜索!

select usename,realname from users
where nsername = 'zhangsan' and password='123'

甚至离谱的话还可以利用‘; + 其它 sql 语句进行其它破坏;那么怎么预防呢?回到 mysql.js,向外暴露 mysql.escape,在user.js 那么对参数执行这个方法(注意拼写语句的时候就可以删掉‘’了)。该方法就是对一些特殊符号进行一个转义,让它成为一个普通的字符即可。所以所有要用到 sql 语句拼接的,最好都给参数加多一个 escape。

const loginCheck = (username,password) => {
    username = excape(username)
    password = expace(password)
    const sql = `select*from users where username=${username}and password=${password}`
    console.log(sql)
return exec(sql).then((loginData)=>{
    retuen loginData[0] || {}
}
}

2.XSS攻击

XSS攻击:

  • 我们前端最为熟悉的攻击方式,但是server端更为应该掌握;
  • 攻击方式:在页面展示内容当中掺杂js代码,已获得网页信息;
  • 预防措施:转换生成js的特殊字符;
  • 转换特殊字符:

& -> &

< -> &lt;

> -> &quot;

" -> &#x27;

/ -> &#x27;

重点是 > < 记得转换。 演示一下,在新建文章时我们将一段获取 cookie 的 js 代码作 为标题,发现在跳转后会出现 cookie 信息。(当然,因为 js 代码不是文字所以跳转后会变成空白的标题)。 预防很简单,只需要把<> 改掉就形成不了 js 代码,所以我们 安装一个 xss 包。回到 blog.js 引入 xss ,然后在新建博客那里 把 title 什么的用 xss 包起来就可以将特殊字符给抹掉(xss 是一个函数)。那么数据库里面存的就不是 js 代码而是被转义过的 js 代码! 当然跳转后是被转义的 js 代码,变成正常的代码这个可以由前端完成。

const title = xxs(blogData.title)
const content = xss(blogData.content)//针对需要用户的数据注意羽凡xss注入

3.密码加密

密码加密:

  1. 万一数据库呗用户攻破,最不应该泄漏的就是用户信息;
  2. 攻击方式:获取用户名和密码,再去尝试登录其他系统;
  1. 预防措施:将密码加密,即便拿到密码也不知道明文。

其实搞个加密算法就行,登录的时候把加密过的存到数据 库,在 utils 下面建一个 cryp.js,引入 node.js 自带的 crypto 库。定义一个密匙就是解开加密的钥匙,可以写的复杂,定义一 个 md5 函数进行 md5 加密,需要传入加密的内容。调用该库的 createHash(‘md5’)方法生成一个 md5,再调用 md5 的 update 方法,将内容放进去!再调用 digest(‘hex’)就是把输入输出变成 16 进制。

  再定义一个加密函数,传入一个密码,和密匙拼接起来成一 个字符串,然后传给我们的 md5 函数进行加密即可。注意只要是明文一样,加密出来的效果也一样。由于数据库长度问 题,我们把长度设置为 32,然后就可以把加密后的存进去 (update)。 回到登录,引入加密函数,在生成 sql 前先对输入密码进行加密就行。(escape 放在加密后,不然我们没有加‘’会报错。

总结:

  • 如何预防SQL注入;
  • 如何预防XSS攻击;
  • 如何加密密码

2345_image_file_copy_504.jpg

4.不使用框架开发server

总结:

  1. 开发了那哪些功能模块,完整的流程;
  2. 用到了那些核心的知识点;
  3. 回顾“server和前端的区别”
  4. 功能模块:

五部分:

  1. 处理http接口;
  2. 安全;
  3. 连接数据库;
  4. 日志;
  5. 实现登录;

2345_image_file_copy_505.jpg

流程图

核心知识点:

  1. http、Nodejs处理http、处理路由、mysql;
  2. cookie、session、Redis、Nginx方向代理;
  3. SQL注入、xss攻击、加密;
  1. 日志、stream、contrab、readline;

server和前端的区别:

  1. 服务稳定性;
  2. 安全(包括登录验证);
  3. 内存CPU(优化扩展);
  4. 集群和服务拆分(设计已支持);
  5. 日志记录;

下一步:

  1. 不使用框架开发,从0开始,罐组底层API
  2. 很琐碎、很复杂、没有标准可依据,很容易将代码谢鸾;
  3. 适合学习,但不是和应用,接下来开始express和KOA2
相关文章
|
22天前
|
前端开发 JavaScript
前端项目公共组件封装思想
该文介绍了如何封装通用组件,如表单搜索、表格展示和分页器。首先,通过抽离出公共部分,创建`TableContainer`组件,利用具名插槽插入`navbar`和`table`,并通过props传递标题。然后在父组件中使用具名插槽和子组件实现具体功能。文中还展示了更复杂的组件封装示例,通过props实现数据双向绑定,以`el-pagination`为例,利用`sync`修饰符和`computed`属性监听并更新父组件状态,实现分页功能。文章最后提到了内容来源于哪。
|
28天前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
30天前
|
资源调度 前端开发
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
74 0
|
1天前
|
JavaScript 前端开发 Java
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
12 0
|
2天前
|
Web App开发 运维 前端开发
从0开始搭建一个前端项目的架子
从0开始搭建一个前端项目的架子
6 1
|
2天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
25 3
|
9天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
17天前
|
前端开发 JavaScript
前端综合练手小项目
前端综合练手小项目
|
28天前
|
前端开发 JavaScript
【前端面试】this的指向_不爱吃糖的程序媛夏天,web前端面试项目中的问题包括
【前端面试】this的指向_不爱吃糖的程序媛夏天,web前端面试项目中的问题包括
|
28天前
|
JavaScript 前端开发 IDE
TypeScript在前端项目的渐进式采用策略
该文介绍了渐进式采用TypeScript在前端项目中的策略。首先,通过将JS文件扩展名改为TS并添加类型注解,如在`utils.js`中添加类型。接着,配置`tsconfig.json`,包括目标版本、模块系统、输出目录等。高级配置涉及路径别名、JSON导入、库文件等。然后,集成TypeScript到构建流程,如Webpack,安装`ts-loader`并调整配置。利用类型定义,包括安装第三方库的类型定义包,自定义类型定义或使用社区定义。最后,逐步迁移其他模块至TypeScript,强化类型检查,并确保IDE支持。
21 0