Web应用安全技术原理与实践全套完整教学课件

Web应用安全第一章概述第1章Web应用安全概述.pptx第2章Web应用前端基础.pptx第3章Web服务端编程.pptx第4章HTTP协议.pptx第5章SQL注入漏洞原理与防护.pptx第6章跨站脚本XSS攻击原理与防护.pptx第7章文件操作类漏洞原理与防护.pptx第8章命令注入和XXE漏洞原理与防护.pptx第9章SSRF和CSRF攻击原理与防护.pptx第10章反序列化漏洞和逻辑漏洞原理与防护.pptx第11章代码审计与漏洞扫描.pptx全套可编辑PPT课件本章要求1了解Web技术产生的历史背景2理解Web技术基本原理3理解Web应用中的主要安全问题2互联网解决的基本问题是什么？3完成计算机网络课程的学习后，请同学们回顾内容，回答下面一个基本问题：基本问题：实现计算机之间的互联互通，构建网络基础设施（建网问题）1969年，ARPANET诞生4如何利用互联网的互联互通能力，实现有价值的应用呢？网络应用程序开发5互联网典型应用FTP：FileTransferProtocol，1971年，RFC114近半个世纪来，FTP一直都是因特网中最重要、最广泛的网络应用程序之一电子邮件，1972年电子邮件已经成为互联网中非常广泛的网络应用程序之一新闻组，1979年，分布式的网上讨论组网络新闻组现在应用还非常广泛，不过该服务一般不是免费的远程登录，1983年，RFC854远程登录应用技术不断发展和应用，当前SSH（SecureShell）由于其安全性强等特点成为主流的远程登录应用6互联网典型应用7互联网典型应用分析早期互联网经典应用主要使用人群是专业人员，主要应用领域是教育科研领域，普通用户对早期互联网应用需求不大。第一次互联网浪潮时间区间：约上世纪70年代-90年代关键事件：世界范围网络互联互通1994年，中国连接互联网结论1真正让普通用户感受互联网的魅力的应用第二次互联网浪潮时间区间：约上世纪90年代-21世纪10年代关键事件：Web的出现和普及结论28Web技术简史1984年：Tim正式入职CERN，职责是信息管理WorldWideWebTimBerners-Lee蒂姆.博纳斯.李1955年6月8日世界各地的物理学家需要分享实验数据和相关实验经验，但是缺乏机器和软件CERN是欧洲最大的互联网节点；TCP/IP协议软件已经免费使用1989年3月：第一次项目申请，但是失败了……1990年5月：第二次项目申请，还是失败了……××××××核心思想：互联网+超文本Web技术的诞生欧洲核子研究组织9Web技术简史Web技术的诞生1990年9月：NEXT电脑到位，Tim开始为梦想工作千里马常有，而伯乐不常有，还好有MikeSendall1990年圣诞节：Web所需要的组件开发完毕HyperTextTransferProtocol(HTTP)0.9HyperTextMarkupLanguage(HTML),Webbrowser(WorldWideWeb/Webeditor)HTTPserversoftware(CERNhttpd)第一个Web网址：info.cern.ch解决了网络内容发布平台问题1011Web技术原理浏览器、HTTP协议、Web服务器、静态Web网页Web1.0浏览器、HTTP协议、Web服务器、静态Web网页、动态Web网页（Web应用程序）、数据库等资源Web2.012Web前端Web前端是向Web服务器资源请求，并将响应的Web网页信息进行展示或处理的应用程序，如浏览器、网络爬虫、AJAX请求等浏览器获取Web网页，并按照网页描述的格式显示网页内容微软公司IE浏览器Edge浏览器免费开源Firefox浏览器谷歌公司Chrome浏览器苹果公司Safari浏览器网景公司（Netscape）Navigator浏览器13Web前端Web网页-HTML语言HTML语言即超文本标记语言，它通过标签来标记不同的信息，主要用于描述Web网页中的展示信息，如文字、图像、音频、视频等信息1990年，吸收了SGML（StandardGeneralizedMarkupLanguage）思想，创立HTML语言1995年，HTML2.0版本，1997年，HTML3.2版本，1997年，HTML4.0版本发布（引入CSS）问题1：语法规则严谨；问题2：遇到错误时，浏览器如何恢复2000年，发布XHTML1.0；2009年，放弃XHTML2.02014年，W3C发布了HTML5的规范，规范目前还在持续完善中14Web前端Web网页-CSS层叠样式表CSS（CascadingStyleSheets）为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式早期的HTML语言没有元素显示方式的表示能力，后期添加了元素显示方式的表示能力，但是元素表示和元素显示方式混编在一起，带来了很多的不便1994年，HkonWiumLie最初提出了CSS想法，并联合BertBos一起创造了CSS的最初版本1996年底，W3C发布了CSS规范第一版，并于1997年颁布CSS1.0版1998年5月，CSS2.0版本正式发布，2005年12月，W3C启动CSS3.0版本的研发，2010年CSS3.0正式发布15Web前端Web网页-JavaScript语言对于Web应用而言，JavaScript语言通过浏览器执行，完成与用户以及和远程服务器的交互功能。在早期的Web技术应用过程中，用户输入数据都会被传到服务器端进行验证，而当时的互联网用户的网速很慢，这使得用户的体验效果不好动机分析Netscape公司的布兰登.艾奇（BrendanEich）设计并开发了一种新的脚本语言LiveScript，1995年2月正式发布时，更名为JavaScript语言1997年，ECMA（EuropeanComputerManuafacturersAssociation，欧洲计算机制造协会）以JavaScript1.1为蓝本，定义了一种新的脚本语言ECMAScript2015年6月，ECMAScript6版本发布16Web服务器端Web服务器Web服务器是响应浏览器等Web前端请求的服务程序，也称为WWW服务器Apache服务器是Apache软件基金会开放源码的Web服务器，由于其多平台和安全性被广泛使用，是最流行的Web服务器Tomcat服务器是一个免费的开放源代码的Web应用服务器，属于轻量级Web服务器，是开发和调试JSP程序的首选。IIS是由微软公司提供的互联网基本服务，包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器等。Nginx是由伊戈尔·赛索耶夫开的轻量级Web服务器，同时也是反向代理服务器和电子邮件代理服务器。WebLogic是Oracle公司出品的商用Web服务器，基于J2EE。WebSphere是IBM公司出品的商用Web服务器，基于基于Java和ServletsIBMWebSphere17Web服务器端Web应用程序Web应用程序是对Web服务器功能的扩展，它是通过Web服务器启动运行的应用程序，一般通过脚本语言来实现编程采用PHP语言，网站占比约80%，目前最高版本是8，开源免费，支持面向对象编程。（JavaServerPages）采用JAVA语言，网站占比约3.6%，SUN公司主导，支持面向对象编程。*（ActiveServerPages.NET）采用.NET兼容语言（如C#），网站占比约8.4%，Miscrosoft公司主导，支持面向对象编程。18Web服务器端数据库其他操作系统、文件系统、网络资源、……数据库（database，DB）是指长期存储在计算机内的，有组织，可共享的数据的集合，管理数据库的系统称为数据库系统。19HTTP协议*Web客户端和服务器端的通信采用的是HTTP协议（HyperTextTranferProtocol）。HTTP协议下层使用TCP协议来传输数据，从而保证数据的可靠性。1991年，HTTP协议的第一个规范文档发布，被称为HTTP/0.9。只支持GET方法，Web客户端只支持ASCII文本，服务器使用HTML格式的消息进行响应。1996年5月，HTTP/1.0发布--RFC1945。除了GET方法外，还支持HEAD和POST方法、HTTP协议版本号信息、HTTP首部信息、多媒体对象的处理1997年1月，HTTP/1.1版本发布，它支持持久的keep-alive连接、管道化技术、虚拟Web服务器、代理连接等。1999年6月被修订为RFC2616。2014年6月再次修订，包括RFC7230-RFC7235，2022年6月，RFC7230修订为RFC91122015年5月，HTTP2.0标准发布，对应RFC7540，2022年6月修订为RFC9113；2022年6月，HTTP3.0标准发布，对应RFC911420典型Web应用Web1.0时代门户网站由于其信息比较全面（一般包含网站黄页系统）而得到用户的青睐，如Yahoo、搜狐、新浪、网易Web1.0时代也称为门户网站时代21典型Web应用Web2.0时代用户除了可以通过Web系统获取信息外，还高度参与Web系统中的信息发布博客的流行是Web2.0时代到来的标志1997年12月，出现weblog，博客的前身1999年，正是命名博客（blog）2002年，博客中国创立Web2.0时代也称用户创造时代22典型Web应用Web2.0时代23Web应用安全问题Web1.0时代攻击目标：网站的网页表现形式：更改网站主页攻击手段：利用Web服务器或其他系统漏洞进行攻击。24Web应用安全问题Web2.0时代OWASP

TOP10OWASP成立于2001年，2004年、2007年、2010年、2013年、2017年、2021年，先后6次发布TOP10。服务器端服务器端Web前端服务器端服务器端25Web后端安全问题Web前端安全问题HTTP协议相关安全问题SQL注入漏洞、文件操作类漏洞、命令注入漏洞、代码注入漏洞、XXE、反序列化漏洞、SSRF攻击、Webshell等XSS（Cross-SiteScripting）漏洞、网站钓鱼、XSS蠕虫、点击劫持、网页挂马CSRF攻击、会话攻击（会话固定、会话预测等）、HTTP消息头注入Web应用安全问题Web2.0时代26Web应用安全问题Web2.0时代Web应用渗透测试渗透测试流程、渗透测试工具、代码审计、漏洞扫描、指纹识别、GoogleHacking、……应用系统安全问题业务逻辑问题（如用户管理、权限管理等）、系统设计缺陷、数据安全保护失效、……Web安全防护问题WAF、Web木马防护、应急响应、数据备份恢复、……27Thanks!Question?Web应用安全第二章Web应用前端基础29Web前端是指代表用户和Web服务器进行交互，并将交互结果向用户展示的代理程序。和Web服务器进行交互，即发送HTTP请求信息并接受HTTP响应信息（如浏览器）；展示交互过程的相关信息，如返回的Web网页。何谓Web前端？典型Web前端--浏览器、网页爬虫、AJAX请求主要功能本章要求1掌握HTML语言的基本核心元素2理解URL3掌握CSS的基本元素4掌握JavaScript语言编程5理解浏览器的基本原理，理解开发者工具30Web系统的信息载体（如文字、图像、视频等），一般采用HTML语言编写的文件，保存在Web服务器上以供用户查看Web网页-HTML语言Web网页定义31Web网页开发工具文本编辑器（代码编辑器）都可以作为Web网页开发工具SublimeTextNotepad++32标签-tag<标签

属性1=”值1”属性2=“值2”…><pid=“messid”>一段文字，任意内容</p>元素基本格式：首标签、元素内容和尾标签HTML文档基本结构<!DOCTYPEhtml><html><head><title>HTML文档结构</title><metacharset="utf-8">

</head><body><h1>HTML文档结构</h1><p>主要包括：文档声明指令、头信息和文档主体信息</p><p>温馨提醒：通过浏览器查看源代码，可以查看本网页的文档结构</p></body></html>Web网页-HTML语言基本语法元素33Web网页-HTML语言主要元素-标题、元数据<title>具体标题内容</title><!DOCTYPEhtml><html><head><title>具体标题内容</title><metacharset="utf-8"></head><body><p>设置文本编辑器的字符集或浏览器的文字编码，体会文本的编码方式</p></body></html><meta属性名1=属性值1；属性名2=属性值2；……>元数据主要包括属性:charset、http-equiv、name等34Web网页-HTML语言主要元素-超链接<ahref=“url”>信息提示</a><!DOCTYPEhtml><html><head><metacharset='utf-8'></head><body><h2>超链接示例</h2><ahref="">点这里访问超链接</a></body></html>超链接用于链接到另外一个Web网页35Web网页-HTML语言主要元素-文本主要包括：文本段落、文本标题、文本换行和预先文本格式等<!DOCTYPEhtml><html><head><metacharset='utf-8'></head><body><h2>文本展示示例</h2><p>展示段落、多级标题、文本基本格式等。</p><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><br>

前面有一空行。<pre>原始状态输出

，有多个空格了。</pre><xmp><html></html></xmp></body></html>36Web网页-HTML语言主要元素-文字列表无序列表、有序列表、定义列表<h1>列表示例</h1><h4>新手上路：</h4><ultype="circle"><li>如何成为会员？</li><li>如何注册会员？</li><li>认证方式如何？</li></ul><h4>注册步骤：</h4><oltype="1"><li>填写信息</li><li>查收邮件</li><li>注册成功</li></ol><h4>术语定义：</h4><dl><dt>互联网</dt><dd>网络和网络之间互联，称为互联网</dd>

</dl>37Web网页-HTML语言主要元素-图像<imgsrc=‘URL’alt=‘失败显示’height=‘高度’width=‘宽度’/><!DOCTYPEhtml><html><head>

<title>图像展示示例</title>

<metacharset="utf-8"></head><body>

<h1>图像展示示例</h1>

<imgsrc='../img/sea.jpg'height='120'width='300'/><br>

<imgsrc='../img/aa.jpg'alt='图像加载失败'/><br>

<imgsrc='../img/flower.jpg'height="20%"width="40%"/></body></html>38Web网页-HTML语言主要元素-音/视频音频播放是通过<audio>标签表示，视频播放是通过<video>标签表示<h1>音/视频展示示例</h1><h3>音频展示示例（播放mp3音乐）</h3><audiocontrols="controls"autoplay="autoplay"><sourcesrc="../audio/a.mp3"type="audio/mpeg">

您的浏览器不支持audio元素。</audio><h3>视频频展示示例（播放mp4格式视频）</h3><videowidth="320"height="240"controls="controls"><sourcesrc="../vedio/b.mp4"type="audio/mpeg">

您的浏览器不支持video元素。</video>39Web网页-HTML语言主要元素-表单单行文本输入<formaction="脚本程序"method="数据传递方式"enctype="编码方式">……</form><inputtype="text"name="变量名"value="缺省值">密码文本输入<inputtype="password"name="变量名"value="缺省值"><textareaname="变量名"></textarea>多行文本输入<inputtype="submit"value="提交">提交按钮40Web网页-HTML语言主要元素-表单<h1>Form表单示例1</h1><h3>用户注册</h3><formaction="a.php"method="get">用户名：<inputtype="text"name="name"/><br>密__码：<inputtype="password"name="pass"/><br>用户描述：<textareaname="userinfo"rows="2"cols="30"></textarea><br><inputtype="submit"value="提交"/></form>41Web网页-HTML语言主要元素-表单单选按钮<inputtype="radio"checked="checked"name="变量名"value="变量值"/>复选框<inputtype="checkbox"name="变量名"/>下拉列表<selectname=“变量名"><optionvalue="选择值">选择项名<option></select>42<h1>Form表单示例2</h1><formaction="a.php"method="get"><p>推荐候选人（单选）</p><inputtype="radio"checked="checked"name="name"value="张三"/>张三<inputtype="radio"name="name"value="李四"/>李四<inputtype="radio"name="name"value="王五"/>王五<p>选择您喜欢的课程（多选）</p>Web应用安全<inputtype="checkbox"name="web"/>计算机网络<inputtype="checkbox"name="networks"/>大学英语<inputtype="checkbox"name="english"/><br><p>选择您最喜欢的老师（单选）</p><selectname="teacher"><optionvalue="li">李老师</option><optionvalue="wang">王老师</option><optionvalue="chen">陈老师</option></select><inputtype="submit"value="提交"/></form>Web网页-HTML语言主要元素-表单43Web网页-HTML语言主要元素-内联框架内联框架用于在一个Web网页中去显示另外一个Web网页，也称为浮动框架<iframesrc=”URL”height=”高度”width=”宽度”><h1>内联框架展示示例</h1><h4>内联框架之上的部分</h4><iframesrc="t4.html"height="20%"width="100%"></iframe><h4>两内联框架之间的部分</h4><iframesrc="t3.html"height="50"width="360"></iframe><h4>内联框架之下的部分</h4>44URLUniformResourceLocator，统一资源定位符用于描述Web网页在互联网上的位置一般格式http://<user>:<password>@<host>:<port>/<path>?<query>#<frag>user：password：用户名：密码host：服务器域名或IP地址port：访问端口，缺省80path：访问路径query：查询字符串frag：片段http:///action.php?name1=value1&name2=value245URLURL编码一般URL采用ASCII码进行编码，但是不能够表示汉字URL编码的一般规则是将所有输入按照8比特（1字节）进行编码，编码方式就是在字节16进制表示值前面添加%号。如汉字“中”的GBK编码为双字节d6d0，则URL编码为%d6%d0。46Web网页-CSSHTML中嵌入CSSCSS（CascadingStyleSheets,层叠样式表）用于描述元素的显示方式内联模式<pstyle=“background-color:#0000FF”>CSS内联模式</p>实现方式很简单每一个元素设置style属性值，编写任务比较繁琐不利于后期维护元素style属性中设置元素的显示方式，这样的方式也称为行内模式47Web网页-CSSHTML中嵌入CSS嵌入式在标签<style>来设置不同元素的描述不同元素的显示方式，这样的方式也称为内嵌式<!DOCTYPEhtml><html><head><metacharset="utf-8"/><style>p{background-color:#0000FF;}</style></head><body><p>CSS嵌入式</p></body></html>内嵌式描述显然比传统的方式要简洁多了但是，如果涉及的元素过多，那么嵌入的<style>元素的内容过于庞大48Web网页-CSSHTML中嵌入CSS外部引用式外部引用式将CSS内容放到一个单独的文件中，然后通过<link>标签引用文件，也称为链接式p{background-color:#0000ff;}t3.css文档内容<!DOCTYPEhtml><html><head><metacharset="utf-8"/><linkhref="t3.css"type="text/css"rel="stylesheet"/></head><body><p>CSS外部引用式</p></body></html>t3.html文档内容49Web网页-CSSCSS属性字体属性p{font-size:40px;font-style:italic;}控制文本的字体和字号<p>文本字体和字号</p>CSS属性用于指定HTML元素的显示效果50Web网页-CSSCSS属性文本属性文本属性用于控制文本段落的格式p{text-indent:2em;text-align:center;-webkit-text-fill-color:#0000ff;line-height:150%;}<p>文本段落<br>段落1<br>段落2</p>51Web网页-CSSCSS属性颜色和背景属性控制Web页面或元素的颜色、背景色以及背景图片body{background-image:url(../img/sea.jpg);}p{color:#0000ff;background-color:#00ff00;}<p>文本段落<br>段落1<br>段落2</p>52Web网页-CSSCSS属性定位属性定位属性用于调整元素的位置#main{position:absolute;top:calc(50%-20px);left:calc(50%-75px);width:150px;height:40px;background:#00ff00}<divid="main">文字块标记</div>53Web网页-CSSCSS属性布局属性网页布局属性用于页面空间的分割和安排54Web网页-CSSCSS属性布局属性html,body,#main{width:100%;height:100%;}#top{width:100%;height:15%;background-color:red;}#left{float:left;margin-right:20px;display:block;width:15%;height:65%;background-color:blue;}#center{float:left;width:60%;height:65%;background-color:blue;background-color:gray;}#right{float:right;width:20%;height:65%;background-color:yellow;}#footer{clear:both;background-color:green;height:20%;}<divid="main"><divid="top"><p>上面部分</p></div><divid="left"><p>左边部分</p></div><divid="center"><p>中间部分</p></div><divid="right"><p>右边部分</p></div><divid="footer"><p>下边部分</p></div></div>55Web网页-CSS选择器选择器用于在HTML文档中选取特定元素，比较典型的元素选择器HTML选择器、id选择器、class选择器p{color:#ff0000;background:#00ff00}#main{width:180px;height:100px;background:#0000ff}.red{font-size:20px;background:red}<divclass="red">红底文字1</div><p>文字段落</p><divid="main">main文字区域</div><br><spanclass="red">红色底文字2</span>56Web网页-JavaScript语言在早期的Web技术应用过程中，用户输入数据都会被传到服务器端进行验证，而大多数的互联网用户的网速很慢，这使得用户的体验效果不好。JavaScript语言简史用户填写完表单，点击“提交”按钮，然后等待1分钟之后，服务器返回消息说填写数据不符合要求，需要重新填写特定场景需要一种在客户端完成用户数据验证的技术Netscape公司的布兰登.艾奇（BrendanEich）设计并开发了一种新的脚本语言LiveScript，1995年2月，新浏览器（NetscapeNavigator2）正式发布时，新的脚本语言更名为JavaScript语言新语言产生的动机57核心（ECMAScript语言）文档对象模式（DOM，DocumentObjectModel）浏览器对象模式（BOM，BrowserObjectModel）JavaScript语言基础，不依赖于具体的浏览器。如语法、类型、语句、关键字、操作符、对象等。通过DOM创建表示文档的树形图，便于开发人员获得控制页面和结构的主动权，如遍历、添加、删除、替换和修改任意节点等，又如定义节点事件和处理接口等。开发人员可以通过BOM控制浏览器显示的页面以外的部分，如对话框、弹出新浏览窗口、移动关闭窗口、AJAX等。Web网页-JavaScript语言JavaScript语言的实现58直接执行JavaScript代码<!DOCTYPEhtml><html><script>document.write("顶部脚本!<br>");</script><head><metacharset="utf8"><script>document.write("头部脚本!<br>");</script></head><body>

<script>document.write("页面脚本!<br>");</script></body><script>document.write("底部脚本!<br>");</script></html>注意：在JavaScript代码中，不要出现“</script>”字符串，否则会出错HTML代码中嵌入JavaScript代码Web网页-JavaScript语言<script>代码</script>59以函数的方式执行JavaScript代码Web网页-JavaScript语言<html><head><title>以函数的方式执行JavaScript代码</title><metacharset="utf-8"/><script>functionhello(){document.write("HelloJavaScript");}</script></head><body><h1>以函数的方式执行JavaScript代码</h1><script>hello();</script></body></html>HTML代码中嵌入JavaScript代码60JavaScript代码存放单独文件Web网页-JavaScript语言functionhello(){document.write("HelloJavaScript");}t3.js文件HTML文档<html><head><title>JavaScript代码存放文件中</title><metacharset="utf-8"/><scripttype="text/javascript"src="t3.js"></script></head><body><h1>JavaScript代码存放文件中</h1><script>hello();</script></body></html>HTML代码中嵌入JavaScript代码61Web网页-JavaScript语言BOM操作打开新的窗口<!DOCTYPEhtml><html><head><metacharset="utf-8"><script>functionwinopen(){window.open("t4-1.html","haha","height=200,width=400,top=10,left=10");}</script></head><body><h2>打开一个新的窗口示例</h2><inputtype="button"onclick="winopen()"value="打开一个新的窗口"></body></html>62Web网页-JavaScript语言BOM操作系统对话框--alert<html><head><title>alert弹框</title><metacharset="utf-8"/><script>functionhello(){alert("HelloJavaScript!");}</script></head><body><h1>alert弹框</h1><inputtype="button"onclick="hello()"value="点我弹框"/></body></html>63Web网页-JavaScript语言BOM操作系统对话框--confirm<html><head><title>confirm弹框</title><metacharset="utf-8"/><script>functionhello(){

varret=confirm("Areyousure?");if(ret)alert("Yes!");elsealert("NO!");}</script></head><body><h1>confirm弹框</h1><inputtype="button"onclick="hello()"value="点我弹框"/></body></html>64Web网页-JavaScript语言BOM操作系统对话框--prompt<html><head><title>prompt弹框</title><metacharset="utf-8"/><script>functionhello(){varname=prompt("Whatisyourname?");

if(name!==null)alert("Welcome!"+name);elsealert("Welcome!");}</script></head><body><h1>prompt弹框</h1><inputtype="button"onclick="hello()"value="点我弹框"/></body></html>65Web网页-JavaScript语言DOM操作DOM基本原理DOM（DocumentObjectModel，文档对象模型）用于描述JavaScript和HTML或XML文档进行交互的标准将HTML或XML文档组织成一颗树型结构<html><head><title>今日任务</title></head><body><h1>任务列表</h1><ol><li>打扫卫生</li><li>完成作业</li><li>论文阅读</li></ol><p>特别提醒：8点之前完成</p></body></html>66Web网页-JavaScript语言DOM操作DOM基本原理htmlheadtitlebodyh1olp任务列表lilili打扫卫生完成作业论文阅读特别提醒：8点之前完成今日任务67Web网页-JavaScript语言DOM操作获取DOM节点并修改内容DOM节点内容的添加和删除DOM节点内容的显示和隐藏68Web网页-JavaScript语言DOM操作获取DOM节点并修改内容<html><head><metacharset="utf-8"><title>获取DOM节点并修改内容</title><scripttype="text/javascript"src="t8.js"></script></head><body><h2>获取DOM节点并修改内容</h2><formatcion=""method="post">

<inputtype="button"onclick="addmess()"value="添加内容"/>

<inputtype="button"onclick="deletemess()"value="删除内容"/><inputtype="button"onclick="show()"value="显示内容"/>

<inputtype="button"onclick="noshow()"value="隐藏内容"/></form><hr>

<pid="messageid">默认消息</p></body></html>69Web网页-JavaScript语言DOM操作获取DOM节点并修改内容functionaddmess(){varnode=document.getElementById("messageid");

node.innerHTML+="，逗号以及以后消息为添加消息"}functiondeletemess(){varnode=document.getElementById("messageid");

node.innerHTML="默认消息"}functionshow(){varnode=document.getElementById("messageid");

node.hidden=false;}functionnoshow(){varnode=document.getElementById("messageid");

node.hidden=true;}70Web网页-JavaScript语言*事件处理JavaScript代码是以事件驱动来实现页面交互，事件就是文档或窗口中发生的行为。页面事件：页面本身的事件，如首次载入等鼠标事件：当用户通过鼠标在页面上执行操作时触发。键盘事件：当用户通过键盘在页面上执行操作时触发。UI事件：当用户与页面上的元素交互时触发。焦点事件：当元素获得或失去焦点时触发。滚轮事件：当用户使用鼠标滚轮时触发。文本事件：当在文档中输入文本时触发。合成事件：当为IME（输入法编辑器）输入字符时触发。变动事件：当底层DOM结构发生变化时触发。71Web网页-JavaScript语言事件处理-鼠标事件-onmouseover<html><head><title>鼠标事件</title><metacharset="utf-8"/><script>functionoverimg(){alert("鼠标从图片上移过！");}</script></head><body><h1>鼠标事件</h1><h2>onmouseover事件</h2><imgsrc="../img/sea.jpg"onmouseover="overimg()"/></body></html>72Web网页-JavaScript语言事件处理-UI事件-onblur(失去焦点)-密码一致性检查鼠标离开“再次输入密码”输入框时，触发检查点击“OK”按钮时，触发检查73Web网页-JavaScript语言事件处理-UI事件-onblur(失去焦点)-密码一致性检查<formaction=""method="post"id="passform"><label>请选__择密码<inputtype="text"id="first"><br><label>再次输入密码<inputtype="text"id="second"><br><inputtype="submit"id="send"value="OK"></form><script>

document.getElementById("second").onblur=check;

document.getElementById("passform").onsubmit=check;</script>functioncheck(){varfirst=document.getElementById("first");

varsecond=document.getElementById("second");if(first.value!=second.value){alert("两次输入的密码不一致，请重新输入！");returnfalse;}returntrue;}静态绑定事件函数动态判定事件函数获取HTML文档元素74Web网页-JavaScript语言AJAX（AsynchronousJavascriptAndXML）假设应用场景：当用户名输入完成后，服务器马上对输入的用户名字进行检查，看是否已经存在。75<html><head><metacharset="utf-8"><title>用户注册</title><scripttype="text/javascript"src="t12.js"></script></head><body><h2>用户注册</h2><form><p>用户名：

<inputtype="text"id="name"size="20"maxlength="50"onblur="checkname(this.value)"/><p>密__码：

<inputtype="password"id="pass"size="20"maxlength="50"/><p>地__址：

<textareaid="adddress"rows="1"cols="40"></textarea><p><inputtype="submit"value="递交信息"/><inputtype="reset"value="重置信息"/></form></body></html>Web网页-JavaScript语言AJAX76Web网页-JavaScript语言AJAX—异步模式functioncheckname(user){varxhr=newXMLHttpRequest();xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200){varresult=xhr.responseText;if(result!=0){alert("这个用户名已经存在了");document.getElementById("name").value='';}elsealert("这个用户名可以用！");}}xhr.open("GET","t11.php?name="+user,true);xhr.send(null);}$name=$_GET['name'];$users=array("alice","bob","carl");if(in_array($name,$users))print1;elseprint0;77Web网页-JavaScript语言AJAX—同步模式functioncheckname(name){varxhr=newXMLHttpRequest();

xhr.open("POST","t12.php",false);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send("user="+name);varresult=xhr.responseText;alert(result);}<?php$user=$_POST['user'];$users=array("alice","bob","carl");if(in_array($user,$users))print("用户名已经存在");elseprint("用户名不存在");?>78

浏览器主进程进程网络UI进程存储进程GPU进程设备进程渲染进程插件进程浏览器基本原理-基本组成79浏览器主进程网络进程存储进程Web网页渲染进程基本原理—导航浏览器用户输入URL，浏览器主进程启动导航过程；浏览器主进程通知网络进程，获取需要的Web网页等网络资源；网络进程根据URL进行DNS解析，请求相应的Web网页资源；网络进程根据响应数据的类型进行不同处理：如果是HTML文档信息，则将HTML文档信息通过IPC传递给渲染进程；如果是文件类型，则将响应数据传递给文件下载器。基本原理—渲染DOM树布局树绘制与合成80浏览器开发者工具81Thanks!Question?Web应用安全第三章Web服务器端编程本章要求831理解Web服务器的工作原理2掌握PHP语言基础3掌握PHP中的文件和目录操作4掌握PHP中的数组及应用5掌握PHP中的字符串和正则表达式6掌握PHP中的代码重用和函数7掌握PHP+MySQL编程第一次课第二次课第三次课第四次课84Web服务器工作流程Web服务器：向发出请求的浏览器提供文档的程序/test.php/test.phpWeb服务器原理缺省主页：index.html、index.php、index.jsp、从哪里搜索？-根目录Web服务器配置文件:httpd.conf85PHP语言基础基本语法以php为文件后缀PHP开始标志：<?phpPHP结束标志：?>每一条语句以分号（“;”）表示语句结束单行注释，//或#块代码注释，/*注释*/<?php//开始标志//单行注释/*代码块注释，第一行

代码块注释，第二行*/echo"HelloWeb!!";//结束标志?>在Web服务器上执行请求对应的PHP文件/test.php86PHP语言基础PHP语言中的基本输出常用输出语句或函数：echo、print、printf、print_recho"HelloWeb!!<br>","Otherstring!!<br>";print("Print!<br>");printf("num=%d，%s<br>",5,"printf!");print_r(array(1,2,3,4));87PHP语言基础PHP语言中的基本输入GET输入/POST输入<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><body><h2>欢迎访问哈哈银行</h2><formaction="t3.php"method="get"><label>用户名：</label><inputtype="text"name="user"size=30/><br><label>密__码：</label><inputtype="password"name="pass"size=30/><br><inputtype="submit"value="登录系统"/></form></body></html>88<?php$user=$_GET['user'];//$_POST['user'];

$_REQUEST['user'];$pass=$_GET['pass'];//

$_POST['pass'];$_REQUEST[‘pass'];if($user=="alice"&&$pass=="123456"){

print("欢迎您，Alice!!");}else{

print("用户名或密码错误!");}?>PHP语言基础PHP语言中的基本输入$_GET/$_POST/$_REQUEST练习体会5分钟89PHP语言基础在HTML中嵌入PHP代码<!DOCTYPEhtml><html><head><title>HTML中嵌入PHP代码</title><metacharset="utf-8"></head><body><h1>HTML中嵌入PHP代码</h1><p>HTML中的一段文字</p><?phpprint("<p>PHP输出的一段文字</p>");?></body></html>搜索PHP代码的开始标志“<?php”和结束标志“?>”，对于在开始标志和结束标志之外的文本内容，则直接输出友情提醒：文件名要以PHP为后缀，否则PHP代码不会执行/php/t4.php/php/t4.html在HTML中添加表单？90PHP语言基础数据类型布尔类型（boolean或bool）：TRUE或FALSE整型（integer或int）：十进制、二进制、十六进制等，如$val=10浮点型（float）：如$val=3.1415926字符串：如abc，后面将详细介绍数组（array）：如$a=array(1,2)，后面详细介绍对象（object）：自学内容资源类型（resource）：如打开文件句柄等NULL：表示变量没有值，唯一的值就是NULLCallback/Callable类型：回调类型91PHP语言基础常量和变量define("MAX","1024");echoMAX;美元符号“$”开始后面跟变量名变量名由字母或者下划线开头，后面跟上任意数量的字母，数字，或者下划线有效变量名：$user、$pass无效变量名：$1234、$*a常量92PHP语言基础常量和变量PHP是弱类型语言，变量没有固定的数据类型，使用前不需要定义，根据变量值确定变量类型$var=NULL;$type=gettype($var);print("变量\$var类型为：".$type."<br>");$var=100;$type=gettype($var);print("变量\$var类型为：".$type."<br>");$var="abc";$type=gettype($var);print("变量\$var类型为：".$type."<br>");$var=array(1,2,3,4,5);$type=gettype($var);print("变量\$var类型为：".$type);93PHP语言基础常量和变量变量作用域局部变量局部变量就是在函数内部定义，只能在函数内部使用的变量functionfunc(){echo"func";echo$var;}$var="abcd";echo"main<br>";echo$var."<br>";func();94PHP语言基础常量和变量变量作用域—全局变量在本函数外所定义，能在本函数中使用变量，方法有：global关键字和超级全局变量$GLOBALSfunctionfunc(){

global$vara;echo"func<br>";echo$vara."<br>";echo$GLOBALS['varb'];}$vara="abcd";$varb=1234;func();95PHP语言基础常量和变量变量作用域—超级全局变量PHP中的一类特殊的全局变量，在PHP代码的任何位置都可以访问这些变量变量名备注$_GET通过URL参数（HTTP协议的GET方法）传递给当前脚本的变量的数组$_POST通过HTTP协议的POST方法传递给当前脚本的变量的数组。$_COOKIE通过HTTPCookies方式传递给当前脚本的变量的数组。$_REQUEST默认情况下包含了$_GET，$_POST和$_COOKIE的数组。$_FILES文件上传有关的变量的数组，如上传文件名、文件临时存放位置等。$_SERVER由Web服务器提供的关于HTTP头（如HOST头、HTTP_REFERER头等）、客户端相关信息（如REMOTE_ADDR等）、服务器相关信息（如SERVER_ADDR）、脚本相关信息（如PHP_SELF）等的数组。$_ENV通过环境方式传递给当前脚本的变量的数组，如运行脚本的用户等。特别提醒，需要修改php.ini的缺省配置项目variables_order="EGPCS"，否则$_ENV内容为空。$_SESSION当前脚本可用会话变量的数组。$GLOBALS包含全部变量的全局组合数组，变量的名字就是数组的键。96PHP语言基础常量和变量测试和设置变量类型获取或设置变量类型：gettype函数/settype函数$var="1234";$type=gettype($var);print("Value:".$var.",Type:".$type."<br>");settype($var,"int");$type=gettype($var);print("Value:".$var.",Type:".$type);数据转换规则？"123abc"=>int/bool"abc123"=>int/bool123=>string/booltrue/false=>string/int97PHP语言基础常量和变量测试变量状态函数isset：测试变量是否存在或是否为空函数empty：变量是否存在或变量值是否为“”、0、“0”、NULL、、FALSE、空数组、变量未赋值函数unset：销毁一个变量$b=0;if(isset($a))print("Varible\$aissetted<br>");elseprint("Varible\$aisnotsetted<br>");if(empty($a))print("Varible\$aisempty<br>");elseprint("Varible\$aisnotempty<br>");if(isset($b))print("Varible\$bissetted<br>");elseprint("Varible\$bisnotsetted<br>");if(empty($b))print("Varible\$bisempty<br>");elseprint("Varible\$bisnotempty<br>");unset($b);if(isset($b))print("Varible\$bissetted<br>");elseprint("Varible\$bisnotsetted<br>");if(empty($b))print("Varible\$bisempty<br>");elseprint("Varible\$bisnotempty<br>");98PHP语言基础操作符算术操作符+（加）、-（减）、*（乘）、/（除）、%（取余）字符串连接符.赋值操作符=、复合赋值+=、递增++和递减--、引用操作符&引用变量都指向同一内存地址$a=5;$b=&$a;$b=9;echo$a;//返回9$a=$b."abc";99PHP语言基础操作符比较操作符操作符名称使用方法备注==等于$a==$b比较时会进行类型转换===恒等$a===$b变量值都类型都相同!=不等$a!=$b变量值不相等!==不恒等$a!==$b变量值或类型不相同<>

不等$a<>$b变量值不相等<

小于$a<$b

>

大于$a>$b

<=小于等于$a<=$b

>=大于等于$a>=$b

注意等于和恒等的区别100PHP语言基础操作符逻辑操作符操作符名称使用方法备注！NOT$a如果$a是false，则返回true；如果$a是true，则返回false。&&AND$a&&$b如果$a和$b都为true，则结果为true，否则为false。||OR$a||$b如果$a和$b都为true，或者有一个为true，则返回true；否则返回false。andAND$aand$b与&&相同，但优先级较低。orOR$aor$b与||相同，但优先级较低。xorXOR$axor$b如果$a和$b都为true或false，则返回true；否则返回false。如果操作数不是布尔类型，结果又如何？101PHP语言基础操作符位操作符操作符名称使用方法备注&按位与$a&$b将$a和$b的每一位进行与操作所得到的结果，与操作规则：1&1=1,1&0=0,0&0=0|按位或$a|$b将$a和$b的每一位进行或操作所得到的结果，或操作规则：1|1=1,1|0=1,0|0=0~按位非~$a将$a的每一位进行非操作所得到的结果^按位异或$a^$b将$a和$b的每一位进行异或操作所得到的结果，异或操作规则：1^1=0,1^0=1