当前位置: 首页 > news >正文

第十三、十四个知识点:用javascript获取表单的内容并加密

我们先来写一段代码:

<body><form action="#" method="post">//写一个表单<span>用户名:</span><input type="text"   id="username" name="username"><span>密码:</span><input type="password"   id="password" name="password"><button type="submit" onclick="A()">提交</button>             //onclick---点击调用函数提交</form>
<script>function A(){//用js获取用户名,密码,说明不加密之前账号容易泄露//获取用户名节点var user = document.getElementById('username');//获取密码节点var pass = document.getElementById('password');console.log(user.value);//在控制台输出用户名的值,方便观察console.log(pass.value);//在控制台输出密码的值,方便观察pass.value = 'abc';return true;}
</script>
</body>

然后我们来说说,在提交了表单以后,我们可以在浏览器-->网络-->负载 里面去看自己传入的username、password(各个浏览器观察的位置不一样)

由此我们可以知道这样写代码是不具备安全性的 

所以接下来我们用md5加密秘密

这里我们需要引入一个别人写好的js文件,用这个文件来给密码加密:

<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>//别人的md5.js
</head>
<body><form action="#" method="post"><span>用户名:</span><input type="text"   id="username" name="username"><span>密码:</span><input type="password"   id="password" name="password"><button type="submit" onclick="A()">提交</button></form>
<script>function A(){var count = document.getElementById('username');var pwd = document.getElementById('password');pwd.value = md5(pwd.value);//调用md5方法执行加密console.log(pwd.value);}
</script>
</body>

 

然而这样加密别人依旧可以通过一些操作获取你的密码,于是乎现在我们再介绍一种更有效保密的方法:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>//使用别人的md5.js<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>//将onclick变为onsubmit,将绑定按钮变为绑定表单<form action="#" method="post" onsubmit="return A()"><span>用户名:</span><input type="text"   id="username" name="username"><span>密码:</span><input type="password"   id="password"><input type="hidden" name="password" id="md5pwd"><button type="submit">提交</button></form>
<script>function A(){var count = document.getElementById('username');var pwd = document.getElementById('password');var md5pwd = document.getElementById('md5pwd');//相当于把pwd视为密码地中转站,md5pwd才是重点,这样更加安全md5pwd.value = md5(pwd.value);return true;//用于判断,在后续判断密码是否正确有用}
</script>
</body>
</html>

相关文章:

  • 电子电器架构 —— 网关测试脚本分析
  • ASP.NET Core MVC 控制查询数据表后在视图显示
  • 传输频宽是啥?对网速影响有多大?
  • Java基于微信小程序的驾校报名小程序,附源码
  • 十分钟学会用springboot制作微信小程序富文本编辑器
  • 负载均衡SLB
  • TCP 和 UDP的区别
  • Vite 下一代的前端工具链,前端开发与构建工具
  • 百面嵌入式专栏(面试题)C语言面试题22道
  • C++ 内存管理(newdelete)
  • c#: 表达式树的简化
  • 移动光猫gs3101超级密码及改桥接模式教程
  • 【知识整理】管理即服务,识人、识己
  • 从领域外到领域内:LLM在Text-to-SQL任务中的演进之路
  • Postgresql数据库存储过程中的事务处理
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • Brief introduction of how to 'Call, Apply and Bind'
  •  D - 粉碎叛乱F - 其他起义
  • Java 9 被无情抛弃,Java 8 直接升级到 Java 10!!
  • JS基础之数据类型、对象、原型、原型链、继承
  • miaov-React 最佳入门
  • Promise初体验
  • React-生命周期杂记
  • SpiderData 2019年2月25日 DApp数据排行榜
  • Vue--数据传输
  • windows下mongoDB的环境配置
  • 阿里云容器服务区块链解决方案全新升级 支持Hyperledger Fabric v1.1
  • 大主子表关联的性能优化方法
  • 分布式任务队列Celery
  • 回流、重绘及其优化
  • 算法之不定期更新(一)(2018-04-12)
  • 学习笔记DL002:AI、机器学习、表示学习、深度学习,第一次大衰退
  • 在electron中实现跨域请求,无需更改服务器端设置
  • 阿里云移动端播放器高级功能介绍
  • ​MPV,汽车产品里一个特殊品类的进化过程
  • ​软考-高级-系统架构设计师教程(清华第2版)【第1章-绪论-思维导图】​
  • # include “ “ 和 # include < >两者的区别
  • # Swust 12th acm 邀请赛# [ E ] 01 String [题解]
  • # 日期待t_最值得等的SUV奥迪Q9:空间比MPV还大,或搭4.0T,香
  • #Lua:Lua调用C++生成的DLL库
  • #常见电池型号介绍 常见电池尺寸是多少【详解】
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (2)(2.10) LTM telemetry
  • (6)添加vue-cookie
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (javascript)再说document.body.scrollTop的使用问题
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (编译到47%失败)to be deleted
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (三)终结任务
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • (四)Linux Shell编程——输入输出重定向