舟山网站制作,设计网名的软件,如何写网站文案,个人简历制作网站目录
JS原生开发-文件上传-变量对象函数事件
JS导入库开发-登录验证-JQuery库Ajax技术
JS导入库开发-逻辑购买-JQuery库Ajax技术
实例测试-某违规APP-密码找回JS验证逻辑安全
思维导图 JS知识点#xff1a; 功能#xff1a;登录验证…目录
JS原生开发-文件上传-变量对象函数事件
JS导入库开发-登录验证-JQuery库Ajax技术
JS导入库开发-逻辑购买-JQuery库Ajax技术
实例测试-某违规APP-密码找回JS验证逻辑安全
思维导图 JS知识点 功能登录验证文件操作商品购买数据库操作云应用接入框架开发等 技术原生开发DOM树常见库使用(JQuery)框架开发VueNodejs等 参考 1、原生JS教程 https://www.w3school.com.cn/js/index.asp 2、jQuery库教程 https://www.w3school.com.cn/jquery/index.asp JS原生开发-文件上传-变量对象函数事件 1 、布置前端页面 2、JS获取提交数据 3、JS对上传格式判断 4、后端对上传数据处理 前端JS进行后缀过滤后端PHP进行上传处理 架构html js php - upload.php 安全问题 1、过滤代码能看到分析绕过 2、禁用JS或删除过滤代码绕过 upload.html文件上传交给前端实现
!DOCTYPE html
html langen
headmeta charsetUTF-8title文件上传页面/titlestylebody {font-family: Arial, sans-serif;background-color: #f2f2f2;padding: 20px;}h1 {text-align: center;margin-top: 50px;}form {background-color: #fff;border-radius: 10px;padding: 20px;margin-top: 30px;max-width: 600px;margin: 0 auto;}input[typefile] {margin-top: 20px;margin-bottom: 20px;}button {background-color: #4CAF50;color: #fff;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}button:hover {background-color: #3e8e41;}/style
/head
body
h1文件上传/h1
form actionupload.php methodPOST enctypemultipart/form-datalabel forfile选择文件:/labelbrinput typefile idfile namef onchangeCheckFileExt(this.value)brbutton typesubmit上传文件/button
/formscriptfunction CheckFileExt(filename){var flagfalse;//规定白名单上传后缀var exts[png,gif,jpg];//1.php 1.php.jpg 接受传递的后缀名var indexfilename.lastIndexOf(.);var ext filename.substr(index1);//进行后缀检测for(i0;iexts.length;i){if(extexts[i]){var flagtrue;alert(文件后缀正确);break;}}if(!flag){alert(文件后缀错误)location.reload(true);}}/script/body
/html
upload.php后端处理上传
?php
$name$_FILES[f][name];
$type$_FILES[f][type];
$size$_FILES[f][size];
$tmp_name$_FILES[f][tmp_name];
$error$_FILES[f][error];if(move_uploaded_file($tmp_name,upload/.$name)){echo scriptalert(上传成功!)/script;
}
srcipt/script里面包含的是JS代码
input typefile idfile namef onchangeCheckFileExt(this.value)这一行代码是一个HTML中的JavaScript事件处理器用于在文件选择框内容发生变化用户选择文件时触发相应的检查函数。具体来说
onchange: 这是一个HTML事件属性表示在元素内容变化时触发。CheckFileExt(this.value): 这是一个JavaScript函数调用当文件选择框内容变化时会调用名为 CheckFileExt 的函数并将选择的文件路径this.value 表示当前元素的值即文件路径作为参数传递给该函数。
这段 JavaScript 代码用于获取文件名中最后一个点.后面的部分即文件的扩展名。
var index filename.lastIndexOf(.)lastIndexOf(.): 这是 JavaScript 字符串对象的方法用于返回字符串中最后一个出现的点的索引位置。
var ext filename.substr(index1);substr(index1): 这是 JavaScript 字符串对象的方法用于从字符串的指定位置在这里是 index1即点的后一个位置开始提取子字符串。这里的 ext 变量将包含文件的扩展名。
这是一个 JavaScript 代码片段用于重新加载当前页面。具体来说
location.reload(true);location.reload(true): 这是 JavaScript 的 location 对象的 reload 方法。reload 方法用于重新加载当前文档。传递 true 参数表示强制从服务器重新加载页面而不使用缓存。如果省略参数或传递 false则可能使用缓存进行重新加载。这行代码的作用是强制刷新当前页面确保获取最新的内容而不使用浏览器缓存。
这里的JS代码是运行在前端是可以被看到并修改的 禁用JS或删除过滤代码绕过
将页面源代码复制下来在本地创建并删除检验代码的函数调用οnchangeCheckFileExt(this.value)”将调用的文件上传地址切换为使用网址路由的样式http://192.168.137.1:84/js/upload.php成功绕过文件检验上传成功1.exe php 写的是后端上传验证前端看不到处理逻辑代码相对 js 比较安全
js 写的上传代码在前端可以被找到从而可以被多种方法绕过 JS导入库开发-登录验证-JQuery库Ajax技术 0 、布置前端页面 1、获取登录事件 2、配置Ajax请求 3、后端代码验证 4、成功回调判断 后端PHP进行帐号判断前端JS进行登录处理 架构html js login.html - logincheck.php $.ajax()是一个用于执行异步HTTP请求的jQuery函数。它允许您通过JavaScript代码向服务器发送请求并在不刷新整个页面的情况下接收和处理响应。
下面是一个基本的$.ajax()用法示例
$.ajax({url: example.com/data, // 请求的URLmethod: GET, // HTTP请求方法GET、POST等data: { // 发送到服务器的数据可选param1: value1,param2: value2},success: function(response) { // 请求成功时的回调函数console.log(请求成功);console.log(response); // 服务器响应的数据},error: function(xhr, status, error) { // 请求失败时的回调函数console.log(请求失败);console.log(error); // 错误信息}
});
在这个示例中我们通过url参数指定了服务器的URL通过method参数指定了HTTP请求方法这里是GET请求。data参数是可选的用于发送到服务器的数据。success回调函数在请求成功并且服务器返回响应时被调用error回调函数在请求失败时被调用。
您可以根据需要在$.ajax()函数中使用其他参数例如dataType指定服务器响应的数据类型headers指定请求头以及其他高级选项。
通过使用$.ajax()函数您可以在JavaScript中方便地执行异步HTTP请求并根据服务器的响应进行相应处理。
$(button).click(function () { ... })选择所有的 button 元素并为它们绑定一个点击事件处理函数。当用户点击任何一个按钮时绑定的函数将被执行。
我们使用console.log()在控制台输出一条消息表示按钮已被点击。您还可以执行其他操作例如修改页面的内容、发送AJAX请求或执行其他JavaScript逻辑。
$(button).click(function () {// 在这里编写点击事件的处理代码console.log(按钮被点击了);// 可以在这里执行其他操作例如修改页面内容或发送AJAX请求等
});$(.user).val()和$(.pass).val()用于获取具有user类和pass类的元素的值。
$(.user)这里使用了jQuery的选择器$(.user)来选择所有具有user类的元素。这可以是一个输入框、文本框或其他表单元素。 .val()这是一个jQuery函数用于获取选定元素的值。在这个场景中它被调用以获取具有user类的元素的值。 myuser这是一个变量或属性名用于存储所选择元素的值。您可以根据需要更改变量名。
myuser: $(.user).val(),
mypass: $(.pass).val()$success 是一个关联数组变量通过使用 ‘msg’ 作为键将 ‘ok’ 作为值存储在其中。
$success array(msg ok);JS实现登录功能
login.html
!DOCTYPE html
html langen
headmeta charsetUTF-8title后台登录/titlestylebody {background-color: #f1f1f1;}.login {width: 400px;margin: 100px auto;background-color: #fff;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.3);padding: 30px;}.login h2 {text-align: center;font-size: 2em;margin-bottom: 30px;}.login label {display: block;margin-bottom: 20px;font-size: 1.2em;}.login input[typetext], .login input[typepassword] {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;font-size: 1.2em;margin-bottom: 20px;}.login input[typesubmit] {background-color: #2ecc71;color: #fff;border: none;padding: 10px 20px;border-radius: 5px;font-size: 1.2em;cursor: pointer;}.login input[typesubmit]:hover {background-color: #27ae60;}/style
/head
body
div classloginh2后台登录/h2label forusername用户名:/labelinput typetext nameusername idusername classuser label forpassword密码:/labelinput typepassword namepassword idpassword classpass button登录/button
/divscript srcjs/jquery-1.12.4.js/script
script$(button).click(function (){$.ajax({type: POST,url: logincheck.php,data: {myuser:$(.user).val(),mypass:$(.pass).val()},success: function (res){console.log(res);if(res[infoCode]1){alert(登录成功);//登录成功处理事件//location.hrefindex.php;}else{alert(登录失败);}},dataType: json,});});/script/body
/html
logincheck.php
?php
$user$_POST[myuser];
$pass$_POST[mypass];
//真实情况需要在数据库获取
$successarray(msgok);
if($userxiaodi $pass123456){$success[infoCode]1;echo scriptlocation.hrefindex.php;/script;
}else{$success[infoCode]0;
}
echo json_encode($success); 安全问题当成功后的操作如跳转到其他页面写在js中不安全。将抓到的包设置其返回包也抓取并将访问失败返回包的改为1发送后登录成功 当成功后的操作如跳转到其他页面写在PHP中相对安全
前端js只起到判断作用无法执行跳转等逻辑 验证以及验证通过后的处理逻辑写到 php 中是相对 js 比较安全的。 这样即使攻击者修改了返回包修改正确的返回字段仍然无法跳转。 因为 js 中只进行了登录成功与否的提示但是无后续处理逻辑 所以即使攻击者成功修改返回字段也无法进行后续操作 JS导入库开发-逻辑购买-JQuery库Ajax技术 1 、布置前端页面 2、获取登录事件 3、配置Ajax请求 4、后端代码验证 5、成功回调判断 架构html js shop.html - shopcheck.php 使用JS实现商品购买 shop.html
!DOCTYPE html
html langen
head!-- 设置文档的字符集为UTF-8 --meta charsetUTF-8!-- 设置页面标题 --title商品购买/title
/head
body
!-- 商品图片 --
img srciphone.jpg width300 height300 altbr
!-- 当前拥有的金钱 --
金钱10000br
!-- 商品价格 --
商品价格8888br
!-- 输入购买数量的文本框 --
数量input typetext namenumber classnumber
!-- 购买按钮 --
button购买/button
/body
/html!-- 引入 jQuery 库 --
script srcjs/jquery-1.12.4.js/script
!-- JavaScript 代码 --
script// 当购买按钮被点击时执行以下函数$(button).click(function (){// 使用 AJAX 发送 POST 请求到 shop.php**$.ajax({type: POST,url: shop.php,// 发送的数据包括购买数量data: {num: $(.number).val(),},// 请求成功时执行的函数success: function (res){// 在控制台输出返回的数据console.log(res);// 如果返回的信息代码为1表示购买成功if(res[infoCode] 1){// 弹出成功提示alert(购买成功);// 购买成功的流程你可以在这里添加额外的处理} else {// 如果信息代码不为1表示购买失败// 弹出失败提示alert(购买失败);}},// 指定返回的数据类型为 JSONdataType: json,});});
/scriptshop.php
?php
// 从 POST 请求中获取购买数量
$num $_POST[num];// 假设购物车中已有的金钱数为10000商品价格为8888
// 真实情况下应该在数据库中获取用户的金钱数等信息// 初始化一个关联数组变量通过使用 msg 作为键将 ok 作为值存储在其中。
$success array(msg ok);**// 检查购买是否合法金钱是否足够支付
if (10000 ($num * 8888)) {// 如果购买合法设置信息代码为1表示购买成功$success[infoCode] 1;
} else {// 如果购买不合法设置信息代码为0表示购买失败$success[infoCode] 0;
}// 将结果以 JSON 格式输出
echo json_encode($success);**
?如果购买量大于持有金额就会提示失败 安全性将抓到的包设置其返回包也抓取并将访问失败返回包的改为1发送后购买成功。 当成功后的操作如购买成功后的逻辑到其他页面写在js中不安全 实例测试-某违规APP-密码找回JS验证逻辑安全 使用福利期货为实验对象先开启抓包获取到正确的验证嘛回显结果 再次点击忘记密码验证码可以乱输将返回的错误验证码回显数据修改为刚刚记录的正确值→验证成功成功进入修改密码页面 思维导图
