第35天：Web开发-JS应用&原生代码&Ajax技术&JQuery库&Axios库&前端校验&安
#知识点 1、安全开发-原生JS-语法模子概念2、安全开发-Ajax技术-JQuery&Axios
3、安全开发-Ajax应用-文件上传&用户登录
JavaScript被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能,为用户提供更流通美观的浏览结果。嵌入动态文本于HTML页面；对浏览器事故做出响应，读写HTML元素，在数据被提交到服务器之前验证数据；检测访客的浏览器信息；控制用户凭据，包罗创建和修改等。
一、Javascript与安全结合：
1、从JS发现更多的有利用价值的信息（URL、域名、路径等等）
测试站、后台路径、未公开的路径、api地址等等
2、发现敏感信息（硬编码的帐号、pass、API密钥、表明等等）
硬编码帐号可登录、测试帐号可被登录、密钥泄漏、表明中开发信息等等
3、发现伤害的代码（eval、dangerouslySetInnerHTML等等）
URL跳转，XSS跨站、模版注入（SSTI）等
4、相识网站的逻辑校验功能（数据是怎么验证校验的）->重要针对前端校验
前端检测，加密逆向，数据走向等
二、JS学习文档：
JS利用ajax技术请求数据（网站）、获取响应数据等，实现数据交互
1、原生JS教程->请求、获取数据
https://www.w3school.com.cn/js/index.asp
https://i-blog.csdnimg.cn/direct/ccd0edd815a0439f829da7cb10e873f7.png
实操demo：
https://i-blog.csdnimg.cn/direct/94467fade8bc40a7bc73fa9a9964271b.png
https://i-blog.csdnimg.cn/direct/37f7d55c0b7a4ab5a09de1c3b73e6340.png
https://i-blog.csdnimg.cn/direct/307101df99d946ebb3f341f7252e0a97.png
2、jQuery库教程->ajax请求、获取数据
https://www.w3school.com.cn/jquery/index.asp
https://i-blog.csdnimg.cn/direct/e3878c717e8f4c2fbbfb0c585053923c.png
实行demo:
https://i-blog.csdnimg.cn/direct/1fa205ef5d5145808bb0c81b0688b2d6.png
https://i-blog.csdnimg.cn/direct/d4f3182f96654836981d47232145477d.png
3、Axios库教程->ajax请求、获取数据
https://www.axios-http.cn/docs/intro
https://i-blog.csdnimg.cn/direct/e65f978a7587499795932d08bab2b7fc.png
实行demo：
https://i-blog.csdnimg.cn/direct/6ed6f59e33ca443e97b30ee94ad1767b.png
https://i-blog.csdnimg.cn/direct/a0883c882c724956a16298e27117ae96.png
三、Ajax技术
概念：Asynchronous JavaScript And XML：异步的 JavaScript 和 XML
AJAX作用：
1、数据交换：通过AJAX可给服务器发送请求，并获取服务器响应的数据
2、后台发送：浏览器的请求是后台js发送给服务器的，js会创建单独的线程发送异步请求，这个线程不会影响浏览器的线程运行。
3、局部刷新：浏览器接收到结果以后进行页面局部刷新
JS-AJAX知识点：
①变量，函数，运算，事故等
②引用库，Ajax，JQuery，Axios等
四、JS实现文件上传->及上传文件的后缀验证
1、布置前端页面
https://i-blog.csdnimg.cn/direct/18362b393d3b4d8d86acc422e1827774.png
2、JS获取提交数据
3、JS对上传格式判定
https://i-blog.csdnimg.cn/direct/dd40b3b42b5445da9e0efcc3cac01814.png
4、后端对上传数据处理
https://i-blog.csdnimg.cn/direct/6eab509f9c9a4a6485af6d8aa5a01673.png
实行demo:
https://i-blog.csdnimg.cn/direct/21819234637443d897ef195b5d6b1557.png
https://i-blog.csdnimg.cn/direct/a4c4bff848ec44a6a9540fa34f60e45a.png
前端JS进行后缀过滤，后端PHP进行上传处理
过程：
a、文件上传->js传输、验证数据（触发文件上传事故）->验证通过->后端php代码处理
b、文件上传->js传输、验证数据->验证不通过（触发文件上传事故）->重定向到某一指定界面（否则验证会失效）
安全问题：
①js过滤代码->由于嵌入在页面html中->所以能被攻击者能看到->从而分析验证逻辑绕过
https://i-blog.csdnimg.cn/direct/a3ad5081574c41e995ca0a5ac7f2f4c8.png
https://i-blog.csdnimg.cn/direct/73b2ef61fa0440a4bf8f46db5f31a464.png
②攻击者下载或复制该验证html文件->禁用JS或删除过滤代码->实现绕过
五、JS登录验证->通事后端php代码返回包的值来验证是否登录乐成
1、布置前端页面
https://i-blog.csdnimg.cn/direct/b8d0340a49d5452bbf6ef7527466671c.png
2、获取登录事故
3、配置Ajax请求
https://i-blog.csdnimg.cn/direct/995dbd59a61946a2852e41ba86caf231.png
4、后端php代码验证
https://i-blog.csdnimg.cn/direct/80c1959ed0cd4af2902e25ab07e4dddc.png
https://i-blog.csdnimg.cn/direct/7bf19a5489a84eaf9ad074a1d6a79aa3.png
5、乐成回调判定
https://i-blog.csdnimg.cn/direct/01c72110f8d34d1a88767c76ef2a12f6.png
实操demo:
https://i-blog.csdnimg.cn/direct/7e13df0e01bc49a388e68a27931a421d.png
后端PHP进行帐号判定，前端JS进行登录处理
过程：ajax上传登录表单账密->点击登录-触发登录事故->php后端代码进行数据校验->返回特定的校验值->js代码接收返回包的校验值->进行比较判定->实现登录
安全问题：
①js过滤代码->由于嵌入在页面html中->所以能被攻击者能看到->从而分析验证逻辑绕过
修改返回包乐成绕过前端JS校验
https://i-blog.csdnimg.cn/direct/01c72110f8d34d1a88767c76ef2a12f6.png
https://i-blog.csdnimg.cn/direct/b8a7b6f989e64f9dbe835de74cc5b0e8.png
②攻击者下载或复制该验证html文件->禁用JS或删除过滤代码->实现绕过
补：js前端验证等功能安全问题多，为什么还要使用？
使用JS可以使得网站运行高效、简便，减轻服务器的运行负担，追求网站运行的速率与效率；
在src中js的未授权访问，前端验证机制绕过，敏感信息泄漏等较多；
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]