安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作

简介: 安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作

JS原生开发-文件上传-变量&对象&函数&事件

1、布置前端页面

2、JS获取提交数据

3、JS对上传格式判断

<script>
  function CheckFileExt(filename){
    var flag=false;
    //规定白名单上传后缀
    var exts=['png','gif','jpg'];
    //1.php 1.php.jpg 接受传递的后缀名
    var index=filename.lastIndexOf(".");
    var ext = filename.substr(index+1);
    //进行后缀检测
    for(i=0;i<exts.length;i++){
      if(ext==exts[i]){
        var flag=true;
        alert('文件后缀正确!');
        break;
      }
    }
    if(!flag){
      alert('文件后缀错误!')
      location.reload(true);
    }
  }
</script>

4、后端对上传数据处理

<?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 '<script>alert("上传成功!")</script>';
}

前端JS进行后缀过滤,后端PHP进行上传处理

架构:html js php - upload.php

安全问题:

1、过滤代码能看到分析绕过

2、禁用JS或删除过滤代码绕过

前端白名单很轻易就能绕过

JS导入库开发-登录验证-JQuery库&Ajax技术

0、布置前端页面

1、获取登录事件

2、配置Ajax请求

<script src="js/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.href='index.php';
        }else{
          alert('登录失败');
        }
      },
      dataType: 'json',
    });
  });
</script>

3、后端代码验证

4、成功回调判断

<?php
$user=$_POST['myuser'];
$pass=$_POST['mypass'];
//真实情况需要在数据库获取
$success=array('msg'=>'ok');
if($user=='xiaodi' && $pass=='123456'){
    $success['infoCode']=1;
    echo '<script>location.href="index.php";</script>';
}else{
    $success['infoCode']=0;
}
echo json_encode($success);

后端PHP进行帐号判断,前端JS进行登录处理

架构:html js login.html - logincheck.php

JS导入库开发-编码加密-逆向调试

//MD5

<script src="js/md5.js"></script>
<script>
    var str1 = 'xiaodisec'
    var str_encode = md5(str1);
    console.log(str_encode) 
</script>

//SHA1

<!DOCTYPE html>
    <script src="js/crypto-js.js"></script>
    <script>
        var str1 = 'xiaodisec';
        var str_encode = CryptoJS.SHA1(str1).toString(); // 注意:1是数字1
        console.log(str_encode)  
    </script>
</html>      

//HMAC

<script src="js/crypto-js.js"></script>
<script>
    var key = 'key';
    var str1 = 'xiaodisec';
    var hash = CryptoJS.HmacSHA256(key, str1);
    var str_encode = CryptoJS.enc.Hex.stringify(hash);
    console.log(str_encode)  // '11a7960cd583ee2c3f1ed910dbc3b6c3991207cbc527d122f69e84d13cc5ce5c'
</script>

//AES

<script src="js/crypto-js.js"></script>
    <script type="text/javascript">
          var aseKey = "12345678"     // 定制秘钥,长度必须为:8/16/32位, 长度不一致也没问题
          var message = "xiaodisec";  // 需要加密的内容
          // 加密 DES/AES切换只需要修改 CryptoJS.AES <=> CryptoJS.DES
          var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey),  // 参数1=密钥, 参数2=加密内容
              {
                mode: CryptoJS.mode.ECB, // 为DES的工作方式
                padding: CryptoJS.pad.Pkcs7  // 当加密后密文长度达不到指定整数倍(8个字节、16个字节)则填充对应字符
             }
          ).toString(); // toString=转字符串类型

          console.log(encrypt); // 在弹窗中打印字符串 2vcsEDJv9vAZZLgFLjkZ9A==

          //解密
          var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), // 参数1=密钥, 参数2=解密内容
              {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
              }
          ).toString(CryptoJS.enc.Utf8); // toString=转字符串类型,并指定编码
          console.log(decrypt); // "xiaodisec"
    </script>

//DES

<script src="js/crypto-js.js"></script>
<script type="text/javascript">
      var aseKey = "12345678"     // 定制秘钥,长度必须为:8/16/32位, 长度不一致也没问题
      var message = "xiaodisec";  // 需要加密的内容
      // 加密 DES/AES切换只需要修改 CryptoJS.AES <=> CryptoJS.DES
      var encrypt = CryptoJS.DES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey),  // 参数1=密钥, 参数2=加密内容
          {
            mode: CryptoJS.mode.ECB, // 为DES的工作方式
            padding: CryptoJS.pad.Pkcs7  // 当加密后密文长度达不到指定整数倍(8个字节、16个字节)则填充对应字符
         }
      ).toString(); // toString=转字符串类型

      console.log(encrypt); // 控制台打印 CDVNwmEwDRM

      //解密
      var decrypt = CryptoJS.DES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), // 参数1=密钥, 参数2=解密内容
          {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
          }
      ).toString(CryptoJS.enc.Utf8); // toString=转字符串类型,并指定编码
      console.log(decrypt); // 控制台打印 "i am xiaozhou ?"
</script>

//RSA

<script src="js/jsencrypt.js"></script>
    <script type="text/javascript">
        // 公钥 私匙是通过公匙计算生成的,不能盲目设置
        var PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBALyBJ6kZ/VFJYTV3vOC07jqWIqgyvHulv6us/8wzlSBqQ2+eOTX7s5zKfXY40yZWDoCaIGk+tP/sc0D6dQzjaxECAwEAAQ==-----END PUBLIC KEY-----';
        //私钥
        var PRIVATE_KEY = '-----BEGIN PRIVATE KEY-----MIIBVQIBADANBgkqhkiG9w0BAQEFAASCAT8wggE7AgEAAkEAvIEnqRn9UUlhNXe84LTuOpYiqDK8e6W/q6z/zDOVIGpDb545NfuznMp9djjTJlYOgJogaT60/+xzQPp1DONrEQIDAQABAkEAu7DFsqQEDDnKJpiwYfUE9ySiIWNTNLJWZDN/Bu2dYIV4DO2A5aHZfMe48rga5BkoWq2LALlY3tqsOFTe3M6yoQIhAOSfSAU3H6jIOnlEiZabUrVGqiFLCb5Ut3Jz9NN+5p59AiEA0xQDMrxWBBJ9BYq6RRY4pXwa/MthX/8Hy+3GnvNw/yUCIG/3Ee578KVYakq5pih8KSVeVjO37C2qj60d3Ok3XPqBAiEAqGPvxTsAuBDz0kcBIPqASGzArumljkrLsoHHkakOfU0CIDuhxKQwHlXFDO79ppYAPcVO3bph672qGD84YUaHF+pQ-----END PRIVATE KEY-----';
        //使用公钥加密
        var encrypt = new JSEncrypt();//实例化加密对象
        encrypt.setPublicKey(PUBLIC_KEY);//设置公钥
        var message = 'xiaodisec' // 需要加密的数据 
        var encrypted = encrypt.encrypt(message);//对指定数据进行加密
        console.log(encrypted)  // 'JQ83h8tmJpsSZcb4BJ3eQvuqIAs3ejepcUUnoFhQEvum8fA8bf1Y/fG+DO1bSIVNJF6EOZKe4wa0njv6aOar9w=='
        //使用私钥解密
        var decrypt = new JSEncrypt(); // 创建解密对象
        decrypt.setPrivateKey(PRIVATE_KEY); //设置私钥
        var uncrypted = decrypt.decrypt(encrypted); //解密 'xiaodisec'
        console.log(uncrypted);
    </script>
# 参考

1、原生JS教程

https://www.w3school.com.cn/js/index.asp

2、jQuery库教程

https://www.w3school.com.cn/jquery/index.asp

相关文章
|
26天前
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
16 0
|
22天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
21 1
|
22天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
12 1
|
26天前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
17 1
|
6天前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的数据分析岗位招聘信息与分析附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的数据分析岗位招聘信息与分析附带文章源码部署视频讲解等
8 0
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校成绩分析附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校成绩分析附带文章源码部署视频讲解等
16 0
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的学生成绩分析和弱项辅助系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的学生成绩分析和弱项辅助系统附带文章源码部署视频讲解等
17 0
|
22天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
17 0
|
22天前
|
存储 JavaScript 前端开发
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
14 0