Web應(yīng)用安全技術(shù)原理與實踐全套完整教學(xué)課件

Web應(yīng)用安全第一章概述第1章Web應(yīng)用安全概述.pptx第2章Web應(yīng)用前端基礎(chǔ).pptx第3章Web服務(wù)端編程.pptx第4章HTTP協(xié)議.pptx第5章SQL注入漏洞原理與防護.pptx第6章跨站腳本XSS攻擊原理與防護.pptx第7章文件操作類漏洞原理與防護.pptx第8章命令注入和XXE漏洞原理與防護.pptx第9章SSRF和CSRF攻擊原理與防護.pptx第10章反序列化漏洞和邏輯漏洞原理與防護.pptx第11章代碼審計與漏洞掃描.pptx全套可編輯PPT課件本章要求1了解Web技術(shù)產(chǎn)生的歷史背景2理解Web技術(shù)基本原理3理解Web應(yīng)用中的主要安全問題2互聯(lián)網(wǎng)解決的基本問題是什么？3完成計算機網(wǎng)絡(luò)課程的學(xué)習(xí)后，請同學(xué)們回顧內(nèi)容，回答下面一個基本問題：基本問題：實現(xiàn)計算機之間的互聯(lián)互通，構(gòu)建網(wǎng)絡(luò)基礎(chǔ)設(shè)施（建網(wǎng)問題）1969年，ARPANET誕生4如何利用互聯(lián)網(wǎng)的互聯(lián)互通能力，實現(xiàn)有價值的應(yīng)用呢？網(wǎng)絡(luò)應(yīng)用程序開發(fā)5互聯(lián)網(wǎng)典型應(yīng)用FTP：FileTransferProtocol，1971年，RFC114近半個世紀(jì)來，F(xiàn)TP一直都是因特網(wǎng)中最重要、最廣泛的網(wǎng)絡(luò)應(yīng)用程序之一電子郵件，1972年電子郵件已經(jīng)成為互聯(lián)網(wǎng)中非常廣泛的網(wǎng)絡(luò)應(yīng)用程序之一新聞組，1979年，分布式的網(wǎng)上討論組網(wǎng)絡(luò)新聞組現(xiàn)在應(yīng)用還非常廣泛，不過該服務(wù)一般不是免費的遠(yuǎn)程登錄，1983年，RFC854遠(yuǎn)程登錄應(yīng)用技術(shù)不斷發(fā)展和應(yīng)用，當(dāng)前SSH（SecureShell）由于其安全性強等特點成為主流的遠(yuǎn)程登錄應(yīng)用6互聯(lián)網(wǎng)典型應(yīng)用7互聯(lián)網(wǎng)典型應(yīng)用分析早期互聯(lián)網(wǎng)經(jīng)典應(yīng)用主要使用人群是專業(yè)人員，主要應(yīng)用領(lǐng)域是教育科研領(lǐng)域，普通用戶對早期互聯(lián)網(wǎng)應(yīng)用需求不大。第一次互聯(lián)網(wǎng)浪潮時間區(qū)間：約上世紀(jì)70年代-90年代關(guān)鍵事件：世界范圍網(wǎng)絡(luò)互聯(lián)互通1994年，中國連接互聯(lián)網(wǎng)結(jié)論1真正讓普通用戶感受互聯(lián)網(wǎng)的魅力的應(yīng)用第二次互聯(lián)網(wǎng)浪潮時間區(qū)間：約上世紀(jì)90年代-21世紀(jì)10年代關(guān)鍵事件：Web的出現(xiàn)和普及結(jié)論28Web技術(shù)簡史1984年：Tim正式入職CERN，職責(zé)是信息管理WorldWideWebTimBerners-Lee蒂姆.博納斯.李1955年6月8日世界各地的物理學(xué)家需要分享實驗數(shù)據(jù)和相關(guān)實驗經(jīng)驗，但是缺乏機器和軟件CERN是歐洲最大的互聯(lián)網(wǎng)節(jié)點；TCP/IP協(xié)議軟件已經(jīng)免費使用1989年3月：第一次項目申請，但是失敗了……1990年5月：第二次項目申請，還是失敗了……××××××核心思想：互聯(lián)網(wǎng)+超文本W(wǎng)eb技術(shù)的誕生歐洲核子研究組織9Web技術(shù)簡史Web技術(shù)的誕生1990年9月：NEXT電腦到位，Tim開始為夢想工作千里馬常有，而伯樂不常有，還好有MikeSendall1990年圣誕節(jié)：Web所需要的組件開發(fā)完畢HyperTextTransferProtocol(HTTP)0.9HyperTextMarkupLanguage(HTML),Webbrowser(WorldWideWeb/Webeditor)HTTPserversoftware(CERNhttpd)第一個Web網(wǎng)址：info.cern.ch解決了網(wǎng)絡(luò)內(nèi)容發(fā)布平臺問題1011Web技術(shù)原理瀏覽器、HTTP協(xié)議、Web服務(wù)器、靜態(tài)Web網(wǎng)頁Web1.0瀏覽器、HTTP協(xié)議、Web服務(wù)器、靜態(tài)Web網(wǎng)頁、動態(tài)Web網(wǎng)頁（Web應(yīng)用程序）、數(shù)據(jù)庫等資源Web2.012Web前端Web前端是向Web服務(wù)器資源請求，并將響應(yīng)的Web網(wǎng)頁信息進行展示或處理的應(yīng)用程序，如瀏覽器、網(wǎng)絡(luò)爬蟲、AJAX請求等瀏覽器獲取Web網(wǎng)頁，并按照網(wǎng)頁描述的格式顯示網(wǎng)頁內(nèi)容微軟公司IE瀏覽器Edge瀏覽器免費開源Firefox瀏覽器谷歌公司Chrome瀏覽器蘋果公司Safari瀏覽器網(wǎng)景公司（Netscape）Navigator瀏覽器13Web前端Web網(wǎng)頁-HTML語言HTML語言即超文本標(biāo)記語言，它通過標(biāo)簽來標(biāo)記不同的信息，主要用于描述Web網(wǎng)頁中的展示信息，如文字、圖像、音頻、視頻等信息1990年，吸收了SGML（StandardGeneralizedMarkupLanguage）思想，創(chuàng)立HTML語言1995年，HTML2.0版本，1997年，HTML3.2版本，1997年，HTML4.0版本發(fā)布（引入CSS）問題1：語法規(guī)則嚴(yán)謹(jǐn)；問題2：遇到錯誤時，瀏覽器如何恢復(fù)2000年，發(fā)布XHTML1.0；2009年，放棄XHTML2.02014年，W3C發(fā)布了HTML5的規(guī)范，規(guī)范目前還在持續(xù)完善中14Web前端Web網(wǎng)頁-CSS層疊樣式表CSS（CascadingStyleSheets）為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式早期的HTML語言沒有元素顯示方式的表示能力，后期添加了元素顯示方式的表示能力，但是元素表示和元素顯示方式混編在一起，帶來了很多的不便1994年，HkonWiumLie最初提出了CSS想法，并聯(lián)合BertBos一起創(chuàng)造了CSS的最初版本1996年底，W3C發(fā)布了CSS規(guī)范第一版，并于1997年頒布CSS1.0版1998年5月，CSS2.0版本正式發(fā)布，2005年12月，W3C啟動CSS3.0版本的研發(fā)，2010年CSS3.0正式發(fā)布15Web前端Web網(wǎng)頁-JavaScript語言對于Web應(yīng)用而言，JavaScript語言通過瀏覽器執(zhí)行，完成與用戶以及和遠(yuǎn)程服務(wù)器的交互功能。在早期的Web技術(shù)應(yīng)用過程中，用戶輸入數(shù)據(jù)都會被傳到服務(wù)器端進行驗證，而當(dāng)時的互聯(lián)網(wǎng)用戶的網(wǎng)速很慢，這使得用戶的體驗效果不好動機分析Netscape公司的布蘭登.艾奇（BrendanEich）設(shè)計并開發(fā)了一種新的腳本語言LiveScript，1995年2月正式發(fā)布時，更名為JavaScript語言1997年，ECMA（EuropeanComputerManuafacturersAssociation，歐洲計算機制造協(xié)會）以JavaScript1.1為藍(lán)本，定義了一種新的腳本語言ECMAScript2015年6月，ECMAScript6版本發(fā)布16Web服務(wù)器端Web服務(wù)器Web服務(wù)器是響應(yīng)瀏覽器等Web前端請求的服務(wù)程序，也稱為WWW服務(wù)器Apache服務(wù)器是Apache軟件基金會開放源碼的Web服務(wù)器，由于其多平臺和安全性被廣泛使用，是最流行的Web服務(wù)器Tomcat服務(wù)器是一個免費的開放源代碼的Web應(yīng)用服務(wù)器，屬于輕量級Web服務(wù)器，是開發(fā)和調(diào)試JSP程序的首選。IIS是由微軟公司提供的互聯(lián)網(wǎng)基本服務(wù)，包括Web服務(wù)器、FTP服務(wù)器、NNTP服務(wù)器和SMTP服務(wù)器等。Nginx是由伊戈爾·賽索耶夫開的輕量級Web服務(wù)器，同時也是反向代理服務(wù)器和電子郵件代理服務(wù)器。WebLogic是Oracle公司出品的商用Web服務(wù)器，基于J2EE。WebSphere是IBM公司出品的商用Web服務(wù)器，基于基于Java和ServletsIBMWebSphere17Web服務(wù)器端Web應(yīng)用程序Web應(yīng)用程序是對Web服務(wù)器功能的擴展，它是通過Web服務(wù)器啟動運行的應(yīng)用程序，一般通過腳本語言來實現(xiàn)編程采用PHP語言，網(wǎng)站占比約80%，目前最高版本是8，開源免費，支持面向?qū)ο缶幊獭＃↗avaServerPages）采用JAVA語言，網(wǎng)站占比約3.6%，SUN公司主導(dǎo)，支持面向?qū)ο缶幊獭?（ActiveServerPages.NET）采用.NET兼容語言（如C#），網(wǎng)站占比約8.4%，Miscrosoft公司主導(dǎo)，支持面向?qū)ο缶幊獭?8Web服務(wù)器端數(shù)據(jù)庫其他操作系統(tǒng)、文件系統(tǒng)、網(wǎng)絡(luò)資源、……數(shù)據(jù)庫（database，DB）是指長期存儲在計算機內(nèi)的，有組織，可共享的數(shù)據(jù)的集合，管理數(shù)據(jù)庫的系統(tǒng)稱為數(shù)據(jù)庫系統(tǒng)。19HTTP協(xié)議*Web客戶端和服務(wù)器端的通信采用的是HTTP協(xié)議（HyperTextTranferProtocol）。HTTP協(xié)議下層使用TCP協(xié)議來傳輸數(shù)據(jù)，從而保證數(shù)據(jù)的可靠性。1991年，HTTP協(xié)議的第一個規(guī)范文檔發(fā)布，被稱為HTTP/0.9。只支持GET方法，Web客戶端只支持ASCII文本，服務(wù)器使用HTML格式的消息進行響應(yīng)。1996年5月，HTTP/1.0發(fā)布--RFC1945。除了GET方法外，還支持HEAD和POST方法、HTTP協(xié)議版本號信息、HTTP首部信息、多媒體對象的處理1997年1月，HTTP/1.1版本發(fā)布，它支持持久的keep-alive連接、管道化技術(shù)、虛擬Web服務(wù)器、代理連接等。1999年6月被修訂為RFC2616。2014年6月再次修訂，包括RFC7230-RFC7235，2022年6月，RFC7230修訂為RFC91122015年5月，HTTP2.0標(biāo)準(zhǔn)發(fā)布，對應(yīng)RFC7540，2022年6月修訂為RFC9113；2022年6月，HTTP3.0標(biāo)準(zhǔn)發(fā)布，對應(yīng)RFC911420典型Web應(yīng)用Web1.0時代門戶網(wǎng)站由于其信息比較全面（一般包含網(wǎng)站黃頁系統(tǒng)）而得到用戶的青睞，如Yahoo、搜狐、新浪、網(wǎng)易Web1.0時代也稱為門戶網(wǎng)站時代21典型Web應(yīng)用Web2.0時代用戶除了可以通過Web系統(tǒng)獲取信息外，還高度參與Web系統(tǒng)中的信息發(fā)布博客的流行是Web2.0時代到來的標(biāo)志1997年12月，出現(xiàn)weblog，博客的前身1999年，正是命名博客（blog）2002年，博客中國創(chuàng)立Web2.0時代也稱用戶創(chuàng)造時代22典型Web應(yīng)用Web2.0時代23Web應(yīng)用安全問題Web1.0時代攻擊目標(biāo)：網(wǎng)站的網(wǎng)頁表現(xiàn)形式：更改網(wǎng)站主頁攻擊手段：利用Web服務(wù)器或其他系統(tǒng)漏洞進行攻擊。24Web應(yīng)用安全問題Web2.0時代OWASP

TOP10OWASP成立于2001年，2004年、2007年、2010年、2013年、2017年、2021年，先后6次發(fā)布TOP10。服務(wù)器端服務(wù)器端Web前端服務(wù)器端服務(wù)器端25Web后端安全問題Web前端安全問題HTTP協(xié)議相關(guān)安全問題SQL注入漏洞、文件操作類漏洞、命令注入漏洞、代碼注入漏洞、XXE、反序列化漏洞、SSRF攻擊、Webshell等XSS（Cross-SiteScripting）漏洞、網(wǎng)站釣魚、XSS蠕蟲、點擊劫持、網(wǎng)頁掛馬CSRF攻擊、會話攻擊（會話固定、會話預(yù)測等）、HTTP消息頭注入Web應(yīng)用安全問題Web2.0時代26Web應(yīng)用安全問題Web2.0時代Web應(yīng)用滲透測試滲透測試流程、滲透測試工具、代碼審計、漏洞掃描、指紋識別、GoogleHacking、……應(yīng)用系統(tǒng)安全問題業(yè)務(wù)邏輯問題（如用戶管理、權(quán)限管理等）、系統(tǒng)設(shè)計缺陷、數(shù)據(jù)安全保護失效、……Web安全防護問題WAF、Web木馬防護、應(yīng)急響應(yīng)、數(shù)據(jù)備份恢復(fù)、……27Thanks!Question?Web應(yīng)用安全第二章Web應(yīng)用前端基礎(chǔ)29Web前端是指代表用戶和Web服務(wù)器進行交互，并將交互結(jié)果向用戶展示的代理程序。和Web服務(wù)器進行交互，即發(fā)送HTTP請求信息并接受HTTP響應(yīng)信息（如瀏覽器）；展示交互過程的相關(guān)信息，如返回的Web網(wǎng)頁。何謂Web前端？典型Web前端--瀏覽器、網(wǎng)頁爬蟲、AJAX請求主要功能本章要求1掌握HTML語言的基本核心元素2理解URL3掌握CSS的基本元素4掌握J(rèn)avaScript語言編程5理解瀏覽器的基本原理，理解開發(fā)者工具30Web系統(tǒng)的信息載體（如文字、圖像、視頻等），一般采用HTML語言編寫的文件，保存在Web服務(wù)器上以供用戶查看Web網(wǎng)頁-HTML語言Web網(wǎng)頁定義31Web網(wǎng)頁開發(fā)工具文本編輯器（代碼編輯器）都可以作為Web網(wǎng)頁開發(fā)工具SublimeTextNotepad++32標(biāo)簽-tag<標(biāo)簽

屬性1=”值1”屬性2=“值2”…><pid=“messid”>一段文字，任意內(nèi)容</p>元素基本格式：首標(biāo)簽、元素內(nèi)容和尾標(biāo)簽HTML文檔基本結(jié)構(gòu)<!DOCTYPEhtml><html><head><title>HTML文檔結(jié)構(gòu)</title><metacharset="utf-8">

</head><body><h1>HTML文檔結(jié)構(gòu)</h1><p>主要包括：文檔聲明指令、頭信息和文檔主體信息</p><p>溫馨提醒：通過瀏覽器查看源代碼，可以查看本網(wǎng)頁的文檔結(jié)構(gòu)</p></body></html>Web網(wǎng)頁-HTML語言基本語法元素33Web網(wǎng)頁-HTML語言主要元素-標(biāo)題、元數(shù)據(jù)<title>具體標(biāo)題內(nèi)容</title><!DOCTYPEhtml><html><head><title>具體標(biāo)題內(nèi)容</title><metacharset="utf-8"></head><body><p>設(shè)置文本編輯器的字符集或瀏覽器的文字編碼，體會文本的編碼方式</p></body></html><meta屬性名1=屬性值1；屬性名2=屬性值2；……>元數(shù)據(jù)主要包括屬性:charset、http-equiv、name等34Web網(wǎng)頁-HTML語言主要元素-超鏈接<ahref=“url”>信息提示</a><!DOCTYPEhtml><html><head><metacharset='utf-8'></head><body><h2>超鏈接示例</h2><ahref="">點這里訪問超鏈接</a></body></html>超鏈接用于鏈接到另外一個Web網(wǎng)頁35Web網(wǎng)頁-HTML語言主要元素-文本主要包括：文本段落、文本標(biāo)題、文本換行和預(yù)先文本格式等<!DOCTYPEhtml><html><head><metacharset='utf-8'></head><body><h2>文本展示示例</h2><p>展示段落、多級標(biāo)題、文本基本格式等。</p><h1>標(biāo)題1</h1><h2>標(biāo)題2</h2><h3>標(biāo)題3</h3><h4>標(biāo)題4</h4><h5>標(biāo)題5</h5><h6>標(biāo)題6</h6><br>

前面有一空行。<pre>原始狀態(tài)輸出

，有多個空格了。</pre><xmp><html></html></xmp></body></html>36Web網(wǎng)頁-HTML語言主要元素-文字列表無序列表、有序列表、定義列表<h1>列表示例</h1><h4>新手上路：</h4><ultype="circle"><li>如何成為會員？</li><li>如何注冊會員？</li><li>認(rèn)證方式如何？</li></ul><h4>注冊步驟：</h4><oltype="1"><li>填寫信息</li><li>查收郵件</li><li>注冊成功</li></ol><h4>術(shù)語定義：</h4><dl><dt>互聯(lián)網(wǎng)</dt><dd>網(wǎng)絡(luò)和網(wǎng)絡(luò)之間互聯(lián)，稱為互聯(lián)網(wǎng)</dd>

</dl>37Web網(wǎng)頁-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網(wǎng)頁-HTML語言主要元素-音/視頻音頻播放是通過<audio>標(biāo)簽表示，視頻播放是通過<video>標(biāo)簽表示<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網(wǎng)頁-HTML語言主要元素-表單單行文本輸入<formaction="腳本程序"method="數(shù)據(jù)傳遞方式"enctype="編碼方式">……</form><inputtype="text"name="變量名"value="缺省值">密碼文本輸入<inputtype="password"name="變量名"value="缺省值"><textareaname="變量名"></textarea>多行文本輸入<inputtype="submit"value="提交">提交按鈕40Web網(wǎng)頁-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網(wǎng)頁-HTML語言主要元素-表單單選按鈕<inputtype="radio"checked="checked"name="變量名"value="變量值"/>復(fù)選框<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應(yīng)用安全<inputtype="checkbox"name="web"/>計算機網(wǎng)絡(luò)<inputtype="checkbox"name="networks"/>大學(xué)英語<inputtype="checkbox"name="english"/><br><p>選擇您最喜歡的老師（單選）</p><selectname="teacher"><optionvalue="li">李老師</option><optionvalue="wang">王老師</option><optionvalue="chen">陳老師</option></select><inputtype="submit"value="提交"/></form>Web網(wǎng)頁-HTML語言主要元素-表單43Web網(wǎng)頁-HTML語言主要元素-內(nèi)聯(lián)框架內(nèi)聯(lián)框架用于在一個Web網(wǎng)頁中去顯示另外一個Web網(wǎng)頁，也稱為浮動框架<iframesrc=”URL”height=”高度”width=”寬度”><h1>內(nèi)聯(lián)框架展示示例</h1><h4>內(nèi)聯(lián)框架之上的部分</h4><iframesrc="t4.html"height="20%"width="100%"></iframe><h4>兩內(nèi)聯(lián)框架之間的部分</h4><iframesrc="t3.html"height="50"width="360"></iframe><h4>內(nèi)聯(lián)框架之下的部分</h4>44URLUniformResourceLocator，統(tǒng)一資源定位符用于描述Web網(wǎng)頁在互聯(lián)網(wǎng)上的位置一般格式http://<user>:<password>@<host>:<port>/<path>?<query>#<frag>user：password：用戶名：密碼host：服務(wù)器域名或IP地址port：訪問端口，缺省80path：訪問路徑query：查詢字符串frag：片段http:///action.php?name1=value1&name2=value245URLURL編碼一般URL采用ASCII碼進行編碼，但是不能夠表示漢字URL編碼的一般規(guī)則是將所有輸入按照8比特（1字節(jié)）進行編碼，編碼方式就是在字節(jié)16進制表示值前面添加%號。如漢字“中”的GBK編碼為雙字節(jié)d6d0，則URL編碼為%d6%d0。46Web網(wǎng)頁-CSSHTML中嵌入CSSCSS（CascadingStyleSheets,層疊樣式表）用于描述元素的顯示方式內(nèi)聯(lián)模式<pstyle=“background-color:#0000FF”>CSS內(nèi)聯(lián)模式</p>實現(xiàn)方式很簡單每一個元素設(shè)置style屬性值，編寫任務(wù)比較繁瑣不利于后期維護元素style屬性中設(shè)置元素的顯示方式，這樣的方式也稱為行內(nèi)模式47Web網(wǎng)頁-CSSHTML中嵌入CSS嵌入式在標(biāo)簽<style>來設(shè)置不同元素的描述不同元素的顯示方式，這樣的方式也稱為內(nèi)嵌式<!DOCTYPEhtml><html><head><metacharset="utf-8"/><style>p{background-color:#0000FF;}</style></head><body><p>CSS嵌入式</p></body></html>內(nèi)嵌式描述顯然比傳統(tǒng)的方式要簡潔多了但是，如果涉及的元素過多，那么嵌入的<style>元素的內(nèi)容過于龐大48Web網(wǎng)頁-CSSHTML中嵌入CSS外部引用式外部引用式將CSS內(nèi)容放到一個單獨的文件中，然后通過<link>標(biāo)簽引用文件，也稱為鏈接式p{background-color:#0000ff;}t3.css文檔內(nèi)容<!DOCTYPEhtml><html><head><metacharset="utf-8"/><linkhref="t3.css"type="text/css"rel="stylesheet"/></head><body><p>CSS外部引用式</p></body></html>t3.html文檔內(nèi)容49Web網(wǎng)頁-CSSCSS屬性字體屬性p{font-size:40px;font-style:italic;}控制文本的字體和字號<p>文本字體和字號</p>CSS屬性用于指定HTML元素的顯示效果50Web網(wǎng)頁-CSSCSS屬性文本屬性文本屬性用于控制文本段落的格式p{text-indent:2em;text-align:center;-webkit-text-fill-color:#0000ff;line-height:150%;}<p>文本段落<br>段落1<br>段落2</p>51Web網(wǎng)頁-CSSCSS屬性顏色和背景屬性控制Web頁面或元素的顏色、背景色以及背景圖片body{background-image:url(../img/sea.jpg);}p{color:#0000ff;background-color:#00ff00;}<p>文本段落<br>段落1<br>段落2</p>52Web網(wǎng)頁-CSSCSS屬性定位屬性定位屬性用于調(diào)整元素的位置#main{position:absolute;top:calc(50%-20px);left:calc(50%-75px);width:150px;height:40px;background:#00ff00}<divid="main">文字塊標(biāo)記</div>53Web網(wǎng)頁-CSSCSS屬性布局屬性網(wǎng)頁布局屬性用于頁面空間的分割和安排54Web網(wǎng)頁-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網(wǎng)頁-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文字區(qū)域</div><br><spanclass="red">紅色底文字2</span>56Web網(wǎng)頁-JavaScript語言在早期的Web技術(shù)應(yīng)用過程中，用戶輸入數(shù)據(jù)都會被傳到服務(wù)器端進行驗證，而大多數(shù)的互聯(lián)網(wǎng)用戶的網(wǎng)速很慢，這使得用戶的體驗效果不好。JavaScript語言簡史用戶填寫完表單，點擊“提交”按鈕，然后等待1分鐘之后，服務(wù)器返回消息說填寫數(shù)據(jù)不符合要求，需要重新填寫特定場景需要一種在客戶端完成用戶數(shù)據(jù)驗證的技術(shù)Netscape公司的布蘭登.艾奇（BrendanEich）設(shè)計并開發(fā)了一種新的腳本語言LiveScript，1995年2月，新瀏覽器（NetscapeNavigator2）正式發(fā)布時，新的腳本語言更名為JavaScript語言新語言產(chǎn)生的動機57核心（ECMAScript語言）文檔對象模式（DOM，DocumentObjectModel）瀏覽器對象模式（BOM，BrowserObjectModel）JavaScript語言基礎(chǔ)，不依賴于具體的瀏覽器。如語法、類型、語句、關(guān)鍵字、操作符、對象等。通過DOM創(chuàng)建表示文檔的樹形圖，便于開發(fā)人員獲得控制頁面和結(jié)構(gòu)的主動權(quán)，如遍歷、添加、刪除、替換和修改任意節(jié)點等，又如定義節(jié)點事件和處理接口等。開發(fā)人員可以通過BOM控制瀏覽器顯示的頁面以外的部分，如對話框、彈出新瀏覽窗口、移動關(guān)閉窗口、AJAX等。Web網(wǎng)頁-JavaScript語言JavaScript語言的實現(xiàn)58直接執(zhí)行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代碼中，不要出現(xiàn)“</script>”字符串，否則會出錯HTML代碼中嵌入JavaScript代碼Web網(wǎng)頁-JavaScript語言<script>代碼</script>59以函數(shù)的方式執(zhí)行JavaScript代碼Web網(wǎng)頁-JavaScript語言<html><head><title>以函數(shù)的方式執(zhí)行JavaScript代碼</title><metacharset="utf-8"/><script>functionhello(){document.write("HelloJavaScript");}</script></head><body><h1>以函數(shù)的方式執(zhí)行JavaScript代碼</h1><script>hello();</script></body></html>HTML代碼中嵌入JavaScript代碼60JavaScript代碼存放單獨文件Web網(wǎng)頁-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網(wǎng)頁-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網(wǎng)頁-JavaScript語言BOM操作系統(tǒng)對話框--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網(wǎng)頁-JavaScript語言BOM操作系統(tǒng)對話框--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網(wǎng)頁-JavaScript語言BOM操作系統(tǒng)對話框--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網(wǎng)頁-JavaScript語言DOM操作DOM基本原理DOM（DocumentObjectModel，文檔對象模型）用于描述JavaScript和HTML或XML文檔進行交互的標(biāo)準(zhǔn)將HTML或XML文檔組織成一顆樹型結(jié)構(gòu)<html><head><title>今日任務(wù)</title></head><body><h1>任務(wù)列表</h1><ol><li>打掃衛(wèi)生</li><li>完成作業(yè)</li><li>論文閱讀</li></ol><p>特別提醒：8點之前完成</p></body></html>66Web網(wǎng)頁-JavaScript語言DOM操作DOM基本原理htmlheadtitlebodyh1olp任務(wù)列表lilili打掃衛(wèi)生完成作業(yè)論文閱讀特別提醒：8點之前完成今日任務(wù)67Web網(wǎng)頁-JavaScript語言DOM操作獲取DOM節(jié)點并修改內(nèi)容DOM節(jié)點內(nèi)容的添加和刪除DOM節(jié)點內(nèi)容的顯示和隱藏68Web網(wǎng)頁-JavaScript語言DOM操作獲取DOM節(jié)點并修改內(nèi)容<html><head><metacharset="utf-8"><title>獲取DOM節(jié)點并修改內(nèi)容</title><scripttype="text/javascript"src="t8.js"></script></head><body><h2>獲取DOM節(jié)點并修改內(nèi)容</h2><formatcion=""method="post">

<inputtype="button"onclick="addmess()"value="添加內(nèi)容"/>

<inputtype="button"onclick="deletemess()"value="刪除內(nèi)容"/><inputtype="button"onclick="show()"value="顯示內(nèi)容"/>

<inputtype="button"onclick="noshow()"value="隱藏內(nèi)容"/></form><hr>

<pid="messageid">默認(rèn)消息</p></body></html>69Web網(wǎng)頁-JavaScript語言DOM操作獲取DOM節(jié)點并修改內(nèi)容functionaddmess(){varnode=document.getElementById("messageid");

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

node.innerHTML="默認(rèn)消息"}functionshow(){varnode=document.getElementById("messageid");

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

node.hidden=true;}70Web網(wǎng)頁-JavaScript語言*事件處理JavaScript代碼是以事件驅(qū)動來實現(xiàn)頁面交互，事件就是文檔或窗口中發(fā)生的行為。頁面事件：頁面本身的事件，如首次載入等鼠標(biāo)事件：當(dāng)用戶通過鼠標(biāo)在頁面上執(zhí)行操作時觸發(fā)。鍵盤事件：當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)。UI事件：當(dāng)用戶與頁面上的元素交互時觸發(fā)。焦點事件：當(dāng)元素獲得或失去焦點時觸發(fā)。滾輪事件：當(dāng)用戶使用鼠標(biāo)滾輪時觸發(fā)。文本事件：當(dāng)在文檔中輸入文本時觸發(fā)。合成事件：當(dāng)為IME（輸入法編輯器）輸入字符時觸發(fā)。變動事件：當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)。71Web網(wǎng)頁-JavaScript語言事件處理-鼠標(biāo)事件-onmouseover<html><head><title>鼠標(biāo)事件</title><metacharset="utf-8"/><script>functionoverimg(){alert("鼠標(biāo)從圖片上移過！");}</script></head><body><h1>鼠標(biāo)事件</h1><h2>onmouseover事件</h2><imgsrc="../img/sea.jpg"onmouseover="overimg()"/></body></html>72Web網(wǎng)頁-JavaScript語言事件處理-UI事件-onblur(失去焦點)-密碼一致性檢查鼠標(biāo)離開“再次輸入密碼”輸入框時，觸發(fā)檢查點擊“OK”按鈕時，觸發(fā)檢查73Web網(wǎng)頁-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;}靜態(tài)綁定事件函數(shù)動態(tài)判定事件函數(shù)獲取HTML文檔元素74Web網(wǎng)頁-JavaScript語言AJAX（AsynchronousJavascriptAndXML）假設(shè)應(yīng)用場景：當(dāng)用戶名輸入完成后，服務(wù)器馬上對輸入的用戶名字進行檢查，看是否已經(jīng)存在。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網(wǎng)頁-JavaScript語言AJAX76Web網(wǎng)頁-JavaScript語言AJAX—異步模式functioncheckname(user){varxhr=newXMLHttpRequest();xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200){varresult=xhr.responseText;if(result!=0){alert("這個用戶名已經(jīng)存在了");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網(wǎng)頁-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("用戶名已經(jīng)存在");elseprint("用戶名不存在");?>78

瀏覽器主進程進程網(wǎng)絡(luò)UI進程存儲進程GPU進程設(shè)備進程渲染進程插件進程瀏覽器基本原理-基本組成79瀏覽器主進程網(wǎng)絡(luò)進程存儲進程Web網(wǎng)頁渲染進程基本原理—導(dǎo)航瀏覽器用戶輸入URL，瀏覽器主進程啟動導(dǎo)航過程；瀏覽器主進程通知網(wǎng)絡(luò)進程，獲取需要的Web網(wǎng)頁等網(wǎng)絡(luò)資源；網(wǎng)絡(luò)進程根據(jù)URL進行DNS解析，請求相應(yīng)的Web網(wǎng)頁資源；網(wǎng)絡(luò)進程根據(jù)響應(yīng)數(shù)據(jù)的類型進行不同處理：如果是HTML文檔信息，則將HTML文檔信息通過IPC傳遞給渲染進程；如果是文件類型，則將響應(yīng)數(shù)據(jù)傳遞給文件下載器。基本原理—渲染DOM樹布局樹繪制與合成80瀏覽器開發(fā)者工具81Thanks!Question?Web應(yīng)用安全第三章Web服務(wù)器端編程本章要求831理解Web服務(wù)器的工作原理2掌握PHP語言基礎(chǔ)3掌握PHP中的文件和目錄操作4掌握PHP中的數(shù)組及應(yīng)用5掌握PHP中的字符串和正則表達(dá)式6掌握PHP中的代碼重用和函數(shù)7掌握PHP+MySQL編程第一次課第二次課第三次課第四次課84Web服務(wù)器工作流程Web服務(wù)器：向發(fā)出請求的瀏覽器提供文檔的程序/test.php/test.phpWeb服務(wù)器原理缺省主頁：index.html、index.php、index.jsp、從哪里搜索？-根目錄Web服務(wù)器配置文件:httpd.conf85PHP語言基礎(chǔ)基本語法以php為文件后綴PHP開始標(biāo)志：<?phpPHP結(jié)束標(biāo)志：?>每一條語句以分號（“;”）表示語句結(jié)束單行注釋，//或#塊代碼注釋，/*注釋*/<?php//開始標(biāo)志//單行注釋/*代碼塊注釋，第一行

代碼塊注釋，第二行*/echo"HelloWeb!!";//結(jié)束標(biāo)志?>在Web服務(wù)器上執(zhí)行請求對應(yīng)的PHP文件/test.php86PHP語言基礎(chǔ)PHP語言中的基本輸出常用輸出語句或函數(shù)：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語言基礎(chǔ)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="登錄系統(tǒng)"/></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語言基礎(chǔ)PHP語言中的基本輸入$_GET/$_POST/$_REQUEST練習(xí)體會5分鐘89PHP語言基礎(chǔ)在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代碼的開始標(biāo)志“<?php”和結(jié)束標(biāo)志“?>”，對于在開始標(biāo)志和結(jié)束標(biāo)志之外的文本內(nèi)容，則直接輸出友情提醒：文件名要以PHP為后綴，否則PHP代碼不會執(zhí)行/php/t4.php/php/t4.html在HTML中添加表單？90PHP語言基礎(chǔ)數(shù)據(jù)類型布爾類型（boolean或bool）：TRUE或FALSE整型（integer或int）：十進制、二進制、十六進制等，如$val=10浮點型（float）：如$val=3.1415926字符串：如abc，后面將詳細(xì)介紹數(shù)組（array）：如$a=array(1,2)，后面詳細(xì)介紹對象（object）：自學(xué)內(nèi)容資源類型（resource）：如打開文件句柄等NULL：表示變量沒有值，唯一的值就是NULLCallback/Callable類型：回調(diào)類型91PHP語言基礎(chǔ)常量和變量define("MAX","1024");echoMAX;美元符號“$”開始后面跟變量名變量名由字母或者下劃線開頭，后面跟上任意數(shù)量的字母，數(shù)字，或者下劃線有效變量名：$user、$pass無效變量名：$1234、$*a常量92PHP語言基礎(chǔ)常量和變量PHP是弱類型語言，變量沒有固定的數(shù)據(jù)類型，使用前不需要定義，根據(jù)變量值確定變量類型$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語言基礎(chǔ)常量和變量變量作用域局部變量局部變量就是在函數(shù)內(nèi)部定義，只能在函數(shù)內(nèi)部使用的變量functionfunc(){echo"func";echo$var;}$var="abcd";echo"main<br>";echo$var."<br>";func();94PHP語言基礎(chǔ)常量和變量變量作用域—全局變量在本函數(shù)外所定義，能在本函數(shù)中使用變量，方法有：global關(guān)鍵字和超級全局變量$GLOBALSfunctionfunc(){

global$vara;echo"func<br>";echo$vara."<br>";echo$GLOBALS['varb'];}$vara="abcd";$varb=1234;func();95PHP語言基礎(chǔ)常量和變量變量作用域—超級全局變量PHP中的一類特殊的全局變量，在PHP代碼的任何位置都可以訪問這些變量變量名備注$_GET通過URL參數(shù)（HTTP協(xié)議的GET方法）傳遞給當(dāng)前腳本的變量的數(shù)組$_POST通過HTTP協(xié)議的POST方法傳遞給當(dāng)前腳本的變量的數(shù)組。$_COOKIE通過HTTPCookies方式傳遞給當(dāng)前腳本的變量的數(shù)組。$_REQUEST默認(rèn)情況下包含了$_GET，$_POST和$_COOKIE的數(shù)組。$_FILES文件上傳有關(guān)的變量的數(shù)組，如上傳文件名、文件臨時存放位置等。$_SERVER由Web服務(wù)器提供的關(guān)于HTTP頭（如HOST頭、HTTP_REFERER頭等）、客戶端相關(guān)信息（如REMOTE_ADDR等）、服務(wù)器相關(guān)信息（如SERVER_ADDR）、腳本相關(guān)信息（如PHP_SELF）等的數(shù)組。$_ENV通過環(huán)境方式傳遞給當(dāng)前腳本的變量的數(shù)組，如運行腳本的用戶等。特別提醒，需要修改php.ini的缺省配置項目variables_order="EGPCS"，否則$_ENV內(nèi)容為空。$_SESSION當(dāng)前腳本可用會話變量的數(shù)組。$GLOBALS包含全部變量的全局組合數(shù)組，變量的名字就是數(shù)組的鍵。96PHP語言基礎(chǔ)常量和變量測試和設(shè)置變量類型獲取或設(shè)置變量類型：gettype函數(shù)/settype函數(shù)$var="1234";$type=gettype($var);print("Value:".$var.",Type:".$type."<br>");settype($var,"int");$type=gettype($var);print("Value:".$var.",Type:".$type);數(shù)據(jù)轉(zhuǎn)換規(guī)則？"123abc"=>int/bool"abc123"=>int/bool123=>string/booltrue/false=>string/int97PHP語言基礎(chǔ)常量和變量測試變量狀態(tài)函數(shù)isset：測試變量是否存在或是否為空函數(shù)empty：變量是否存在或變量值是否為“”、0、“0”、NULL、、FALSE、空數(shù)組、變量未賦值函數(shù)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語言基礎(chǔ)操作符算術(shù)操作符+（加）、-（減）、*（乘）、/（除）、%（取余）字符串連接符.賦值操作符=、復(fù)合賦值+=、遞增++和遞減--、引用操作符&引用變量都指向同一內(nèi)存地址$a=5;$b=&$a;$b=9;echo$a;//返回9$a=$b."abc";99PHP語言基礎(chǔ)操作符比較操作符操作符名稱使用方法備注==等于$a==$b比較時會進行類型轉(zhuǎn)換===恒等$a===$b變量值都類型都相同!=不等$a!=$b變量值不相等!==不恒等$a!==$b變量值或類型不相同<>

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

小于$a<$b

>

大于$a>$b

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

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

注意等于和恒等的區(qū)別100PHP語言基礎(chǔ)操作符邏輯操作符操作符名稱使用方法備注！NOT$a如果$a是false，則返回true；如果$a是true，則返回false。&&AND$a&&$b如果$a和$b都為true，則結(jié)果為true，否則為false。||OR$a||$b如果$a和$b都為true，或者有一個為true，則返回true；否則返回false。andAND$aand$b與&&相同，但優(yōu)先級較低。orOR$aor$b與||相同，但優(yōu)先級較低。xorXOR$axor$b如果$a和$b都為true或false，則返回true；否則返回false。如果操作數(shù)不是布爾類型，結(jié)果又如何？101PHP語言基礎(chǔ)操作符位操作符操作符名稱使用方法備注&按位與$a&$b將$a和$b的每一位進行與操作所得到的結(jié)果，與操作規(guī)則：1&1=1,1&0=0,0&0=0|按位或$a|$b將$a和$b的每一位進行或操作所得到的結(jié)果，或操作規(guī)則：1|1=1,1|0=1,0|0=0~按位非~$a將$a的每一位進行非操作所得到的結(jié)果^按位異或$a^$b將$a和$b的每一位進行異或操作所得到的結(jié)果，異或操作規(guī)則：1^1=0,1^0=1