Py网络基础编程 4

计算机网络课程第8章Web应用开发WebApplicationDevelopment知识讲解课件本章导览01Web前端技术HTML、CSS、JavaScript响应式设计与前端框架02Web表单与用户输入表单元素、数据收集输入验证与文件上传03安全性考虑XSS、CSRF防护HTTPS与内容安全策略04Web抓取和自动化抓取工具与库自动化抓取策略05使用Web框架构建应用MVC模式与框架结构路由、控制器与模板06WebSocket和实时通信WebSocket协议概述实时通信与框架集成01Web前端技术HTML、CSS、JavaScript—构建现代Web应用的三大基石8.1Web前端技术前端开发基础：HTML、CSS、JavaScriptHTML超文本标记语言，构成Web页面的基础●定义网页结构与内容●HTML5引入多媒体支持●语义化标签提升可访问性CSS层叠样式表，控制页面视觉呈现●选择器定位元素●控制布局、颜色、字体●CSS3支持动画与过渡JavaScript脚本语言，实现动态交互功能●操作DOM更新内容●事件驱动编程模型●支持Ajax异步通信三者协同工作原理HTML负责构建网页的骨架和内容结构，如标题、段落、链接、图片等CSS负责美化页面，控制颜色、字体、布局和动画效果，实现视觉设计JavaScript负责交互逻辑，响应用户操作、验证表单、动态更新内容核心要点：三者分离是现代Web开发的最佳实践，HTML定义结构、CSS控制表现、JavaScript处理行为048.1Web前端技术响应式设计与JavaScript框架响应式设计核心思想：网页布局自适应不同屏幕尺寸●

灵活网格：页面元素根据屏幕宽度动态调整●

媒体查询：CSS3根据设备特性应用不同样式●

移动优先：先为小屏幕设计，逐步增强框架：Bootstrap、Foundation、BulmaJavaScript事件流程事件处理分三个阶段，从外到内再到外：1.捕获阶段：事件从根节点流向目标节点2.目标阶段：事件到达目标元素触发监听3.冒泡阶段：事件从目标元素向外层传播可通过stopPropagation()阻止冒泡现代JavaScript框架React组件化+虚拟DOMAngular全面框架+TypeScriptVue.js渐进式+轻量级共同特性：●数据绑定与状态管理●组件化开发模式●提高开发效率与可维护性0502Web表单与用户输入处理表单设计、数据收集、验证与文件上传8.2Web表单与用户输入表单元素与数据收集HTML表单控件一览控件类型HTML标签用途文本框<inputtype="text">单行文本输入密码框<inputtype="password">隐藏字符输入单选按钮<inputtype="radio">多选一复选框<inputtype="checkbox">多选下拉列表<select>选项选择多行文本<textarea>多行文本输入文件上传<inputtype="file">选择本地文件HTML5新增输入类型●

type="date"—日期选择器●

type="email"—邮箱格式验证●

type="number"—数字输入●

type="color"—颜色选择器数据收集流程1.用户通过表单控件输入数据2.name属性关联输入值与字段3.提交时数据编码为查询字符串4.发送到服务器端处理注意：服务器端验证必不可少表单设计最佳实践●提供清晰的标签（<label>）和必填标记，使用placeholder提示输入格式●合理选择控件类型，利用HTML5内置验证（required、pattern属性）提升用户体验078.2Web表单与用户输入输入验证与文件上传处理输入验证原则"永远不要信任用户输入"客户端验证●HTML5内置验证：required、min、max●JavaScript自定义验证逻辑服务器端验证（必须）●数据类型检查●范围与格式检查●数据清洗（移除危险字符）●业务规则验证文件上传处理通过<inputtype="file">实现编码方式：multipart/form-data安全要点●验证文件扩展名和MIME类型●限制文件大小防止DoS攻击●存储在安全位置，重命名文件●提供上传进度和反馈云存储：阿里云OSS、AmazonS30803安全性考虑XSS、CSRF、HTTPS—守护Web应用安全8.3安全性考虑XSS与CSRF攻击防护XSS跨站脚本攻击攻击者向网页注入恶意脚本，窃取用户数据或执行未授权操作防护措施●

输入验证：过滤用户输入中的特殊字符●

输出编码：将HTML特殊字符转义●

使用bleach库：清洗用户输入●

Content-Type：设置正确MIME类型●

CSP策略：限制脚本执行来源Python:pipinstallbleachbleach.clean(input,tags=[],strip=True)CSRF跨站请求伪造攻击者诱使用户浏览器在用户不知情的情况下发送恶意请求防护措施●

CSRFToken：表单中嵌入随机令牌●

验证Referer头：检查请求来源●

SameSiteCookie：限制Cookie发送●

双重提交Cookie：Cookie+参数验证●

用户确认：敏感操作需二次确认Flask-WTF内置CSRF保护Django默认启用CSRF中间件关键区别：XSS利用的是用户对网站的信任，在目标网站注入恶意代码；CSRF利用的是网站对用户浏览器的信任，伪造用户已认证的请求。共同点：两者都可通过严格的输入验证、Token机制和CSP策略进行有效防护。108.3安全性考虑XSS与CSRF攻击防护XSS跨站脚本攻击118.3安全性考虑XSS与CSRF攻击防护CSRF跨站请求伪造128.3安全性考虑HTTPS与内容安全策略HTTPS安全传输超文本传输安全协议，保护数据免受中间人攻击核心功能●数据加密传输，防止窃听●身份认证，验证服务器身份●数据完整性校验最佳实践●强制HTTP重定向到HTTPS●配置HSTS响应头●使用可靠CA的SSL/TLS证书●定期更新证书（Certbot自动化）CSP内容安全策略通过HTTP头控制页面可加载的资源来源，有效减少XSS风险配置策略●限制脚本来源（script-src）●限制样式来源（style-src）●限制图片来源（img-src）其他安全措施●SRI子资源完整性校验●最小化外部资源依赖●定期安全审计与监控安全层次模型：HTTPS保障传输层安全→CSP保障内容层安全→输入验证保障应用层安全。三者结合构建纵深防御体系，持续的安全审计和教育是确保Web应用安全的关键。1304Web抓取和自动化工具、库与自动化抓取策略8.4Web抓取和自动化抓取工具、库与自动化策略BeautifulSoupHTML/XML解析库●适合简单抓取任务●配合requests使用●灵活的标签查找APIpipinstallbeautifulsoup4Scrapy异步抓取框架●适合大规模项目●内置数据管道●自动处理编码和CookiepipinstallscrapySelenium浏览器自动化工具●适合动态页面（JS渲染）●模拟真实用户行为●支持自动化测试pipinstallselenium自动化抓取策略法律与道德●尊重robots.txt协议●确保数据使用合法请求管理●设置合理的User-Agent●控制请求频率，避免过载错误处理●优雅处理404/500错误●实现重试策略与最大重试数据解析●使用XPath/CSS选择器●数据清洗去除无用标签高级技巧●IP旋转与代理使用●会话和Cookie管理●异步I/O提高并发●分布式抓取架构158.4Web抓取和自动化抓取工具、库与自动化策略16#BeautifulSoupfrombs4importBeautifulSoupimportrequests#获取网页内容response=requests.get('')html_content=response.text#创建BeautifulSoup对象soup=BeautifulSoup(html_content,'lxml')#提取数据title=soup.find('title').textlinks=soup.find_all('a')#打印提取的数据print(title)forlinkinlinks:print(link.get('href'))8.4Web抓取和自动化抓取工具、库与自动化策略17#ScrapyimportscrapyclassExampleSpider(scrapy.Spider):name='example'start_urls=['']defparse(self,response):#提取数据title=response.css('title::text').get()links=response.css('a::attr(href)').getall()#处理数据print(title)forlinkinlinks:print(link)8.4Web抓取和自动化抓取工具、库与自动化策略18#Seleniumfromseleniumimportwebdriver#创建WebDriver实例driver=webdriver.Chrome('/path/to/chromedriver')#打开网页driver.get('https://example.com')#提取数据title=driver.titlelinks=driver.find_elements_by_tag_name('a')#打印提取的数据print(title)forlinkinlinks:print(link.get_attribute('href'))#关闭浏览器driver.quit()05使用Web框架构建应用MVC模式、路由控制器与模板视图8.5使用Web框架构建应用MVC模式、路由与控制器MVC架构模式Model数据逻辑View用户界面Controller业务逻辑Model：处理数据逻辑，与数据库交互View：渲染用户界面，展示数据Controller：接收请求，调用Model，选择View路由与控制器实现路由系统：将HTTP请求映射到处理函数Django：urls.py中定义URL模式Flask：@app.route装饰器FastAPI：Python类型提示自动路由控制器：应用程序的业务逻辑层●接收输入，处理请求，返回响应●调用Model层接口获取/修改数据●将结果传递给View层展示模板引擎●Jinja2（Flask/FastAPI）●Django模板语言2006WebSocket和实时通信全双工通信协议与框架集成8.6WebSocket和实时通信WebSocket协议与实时通信实现WebSocket工作流程1.握手HTTP+Upgrade2.连接建立101状态码3.数据传输双向通信4.保持连接持久会话5.关闭连接任一方发起核心优势●低延迟实时传输●减少连接开销●全双工双向通信●兼容HTTP端口80/443●支持文本和二进制PythonWebSocket框架集成DjangoChannels扩展Django处理WebSocket请求，支持异步消费器Flask-SocketIO为Flask添加Socket.IO支持，WebSocket+长轮询混合方案Starlette/FastAPI原生ASGI支持，直接定义WebSocket路由和端点Tornado/Quart异步I/