JS原生開發(fā)-文件上傳-變量&對象&函數(shù)&事件
1、布置前端頁面
2、JS獲取提交數(shù)據(jù)
3、JS對上傳格式判斷
<script>
function CheckFileExt(filename){
var flag=false;
//規(guī)定白名單上傳后綴
var exts=['png','gif','jpg'];
//1.php 1.php.jpg 接受傳遞的后綴名
var index=filename.lastIndexOf(".");
var ext = filename.substr(index+1);
//進(jìn)行后綴檢測
for(i=0;i<exts.length;i++){
if(ext==exts[i]){
var flag=true;
alert('文件后綴正確！');
break;
}
}
if(!flag){
alert('文件后綴錯誤！')
location.reload(true);
}
}
</script>
4、后端對上傳數(shù)據(jù)處理
<?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進(jìn)行后綴過濾，后端PHP進(jìn)行上傳處理
架構(gòu)：html js php - upload.php
安全問題：
1、過濾代碼能看到分析繞過
2、禁用JS或刪除過濾代碼繞過
前端白名單很輕易就能繞過
JS導(dǎo)入庫開發(fā)-登錄驗證-JQuery庫&Ajax技術(shù)
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、成功回調(diào)判斷
<?php
$user=$_POST['myuser'];
$pass=$_POST['mypass'];
//真實情況需要在數(shù)據(jù)庫獲取
$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進(jìn)行帳號判斷，前端JS進(jìn)行登錄處理
架構(gòu)：html js login.html - logincheck.php
JS導(dǎo)入庫開發(fā)-編碼加密-逆向調(diào)試
//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是數(shù)字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"; // 需要加密的內(nèi)容
// 加密 DES/AES切換只需要修改 CryptoJS.AES <=> CryptoJS.DES
var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), // 參數(shù)1=密鑰, 參數(shù)2=加密內(nèi)容
{
mode: CryptoJS.mode.ECB, // 為DES的工作方式
padding: CryptoJS.pad.Pkcs7 // 當(dāng)加密后密文長度達(dá)不到指定整數(shù)倍(8個字節(jié)、16個字節(jié))則填充對應(yīng)字符
}
).toString(); // toString=轉(zhuǎn)字符串類型
console.log(encrypt); // 在彈窗中打印字符串 2vcsEDJv9vAZZLgFLjkZ9A==
//解密
var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), // 參數(shù)1=密鑰, 參數(shù)2=解密內(nèi)容
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
}
).toString(CryptoJS.enc.Utf8); // toString=轉(zhuǎn)字符串類型,并指定編碼
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"; // 需要加密的內(nèi)容
// 加密 DES/AES切換只需要修改 CryptoJS.AES <=> CryptoJS.DES
var encrypt = CryptoJS.DES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), // 參數(shù)1=密鑰, 參數(shù)2=加密內(nèi)容
{
mode: CryptoJS.mode.ECB, // 為DES的工作方式
padding: CryptoJS.pad.Pkcs7 // 當(dāng)加密后密文長度達(dá)不到指定整數(shù)倍(8個字節(jié)、16個字節(jié))則填充對應(yīng)字符
}
).toString(); // toString=轉(zhuǎn)字符串類型
console.log(encrypt); // 控制臺打印 CDVNwmEwDRM
//解密
var decrypt = CryptoJS.DES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), // 參數(shù)1=密鑰, 參數(shù)2=解密內(nèi)容
{
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
}
).toString(CryptoJS.enc.Utf8); // toString=轉(zhuǎn)字符串類型,并指定編碼
console.log(decrypt); // 控制臺打印 "i am xiaozhou ?"
</script>
//RSA文章來源：http://www.zghlxwxcb.cn/news/detail-661890.html
<script src="js/jsencrypt.js"></script>
<script type="text/javascript">
// 公鑰 私匙是通過公匙計算生成的，不能盲目設(shè)置
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);//設(shè)置公鑰
var message = 'xiaodisec' // 需要加密的數(shù)據(jù)
var encrypted = encrypt.encrypt(message);//對指定數(shù)據(jù)進(jìn)行加密
console.log(encrypted) // 'JQ83h8tmJpsSZcb4BJ3eQvuqIAs3ejepcUUnoFhQEvum8fA8bf1Y/fG+DO1bSIVNJF6EOZKe4wa0njv6aOar9w=='
//使用私鑰解密
var decrypt = new JSEncrypt(); // 創(chuàng)建解密對象
decrypt.setPrivateKey(PRIVATE_KEY); //設(shè)置私鑰
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文章來源地址http://www.zghlxwxcb.cn/news/detail-661890.html
到了這里，關(guān)于安全開發(fā)-JS應(yīng)用&原生開發(fā)&JQuery庫&Ajax技術(shù)&加密編碼庫&斷點調(diào)試&逆向分析&元素屬性操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
