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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
密钥管理服务KMS,1000个密钥,100个凭据,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
相关文章
|
3月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
97 1
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
135 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
1月前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
34 2
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
561 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
2月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
38 0
|
2月前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
53 0
|
2月前
|
Web App开发 移动开发 前端开发
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
51 0
|
2月前
|
前端开发 API 开发者
🥇前端宝藏:多项目掌握技能的冒险之旅🏆
在前端开发的学习旅程中,实践是提升技能的关键。本文介绍了多个前端项目,包括计算器、天气应用、经典游戏等,涵盖了从React到Svelte的各种技术栈。每个项目都附有在线演示和源代码,旨在帮助读者深入理解实现细节,激励更多人参与实际项目开发。通过这些项目,读者可以将理论知识转化为实践,拓展职业机会。
19 0
|
2月前
|
前端开发 JavaScript
轻松上手:基于single-spa构建qiankun微前端项目完整教程
轻松上手:基于single-spa构建qiankun微前端项目完整教程
52 0