Web 前端安全
- Web 前端三剑客（HTML/CSS/JS）
-
- 1. HTML
- 2. CSS
- 3.JS
- 4. 前端安全
- 总结：
- wed前端安全风险与防御
-
- XSS漏洞
- XSS防御手段—输出转义
- 前端防御手段
Web 前端三剑客（HTML/CSS/JS）
HTML：网页的结构和内容，定义了页面有什么。（骨架，血肉） CSS：网页的样式和美化，定义了页面长什么样。（外貌，皮囊） JavaScript：网页的交互和逻辑，定义了页面如何响应。（大脑，灵魂）
1. HTML
HTML全称（hyper text markup language）译为超文本标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构。 下面是完整HTML页面展示 
下面是学习所使用的工具 
HTML基本语法 标签语法 <标签名 属性名=“属性值” 属性名=“属性值”> </标签名> <标签名 属性名=“属性值” /> 属性语法 属性名=“属性值” 合起来就是： <标签名 属性名=“属性值”></标签名> <标签名 属性名=“属性值” /> 需要注意的是多个属性间需用空格隔开
<heasd>负责头部标签，不会在页面中展示出来
<title> 表示标题
<body> 表示内容
<br> 单标签 #即尖括号<开头，尖括号>结尾，里面是标签名（<标签名>）
将自己想展示的图片复制进工作目录后
<ing src="ing/weier.png" alt="这是一张图片"> #单标签
img #图片
src #资源，指向你想展示的资源，后面接上你想展示的资源路径
alt #提示，警告的意思
#在这串代码里面img是标签名，src、alt都是属性名，属性名后面=接属性值
即（<标签名 属性名=“属性值”>）
效果： 
若你的属性值出错即： 
每个标签都有每个标签的作用，如br 换行，img 图片 每个属性都有每个属性的作用，如src 表示指向资源路径，alt 当资源路径不存在，则提示出来
双标签
<标签名>表标签中内容部分</标签名>
需要注意的是多个属性间需用空格隔开
<p> #段落标签，表示一个段落，本身就具有换行功能
单标签也可作为双标签中的内容部分插入双标签中 
常用的双标签
<a href="https://www.baidu.com">跳转到百度</a>
#<a> 表示超链接
#href 表示跳转
效果： 
HTML常用标签：
<a href="" target=""></a>
<img src="" />
<form action="" method="post">
<input type="">
了解之后就可以尝试做一个简单登录网页 类似于： 
input #输入（标签名）
type #类型（属性名）
"text" #表示文本框（属性值）
"password" #表示密码框（属性值）
"submit" #表示提交（属性值）
action #后面接一个值表示你提交以后想跳转的位置
2. CSS
CSS负责网页的视觉呈现 Cascading Style Sheets层叠样式表，负责给HTML穿上漂亮的衣服，让网页变得美观 
CSS基本语法： 
简单调整颜色： 
color #颜色
background-color #背景-颜色
mysub #是我给登录按钮赋予的id（名字）
能看懂页面代码就可以，美化工作可以通过描述交给AI解决 
大概效果： 
3.JS
JavaScript让网页"活起来"
JavaScript常见的触发事件 1：鼠标事件 click：单击元素 dblclick：双击元素 mouseover/mouseout：鼠标进入 / 离开 2：键盘事件 keydown/keyup：按键按下 / 松开 3：表单事件 submit：表单提交 change：值改变且失焦 4：窗口事件 load：页面加载完成 resize：窗口大小改变事件通常是on开头，如： 
onclick #鼠标单击事件（单机即登陆成功）
alert #警告窗，触发条件即会弹出警告窗
事件是谁来触发？ 人为触发、浏览器本身也能触发 如下既是资源路径错误系统自动触发事件： 
看图理解给本次内容做个简单总结 
大概理解意思即可
4. 前端安全
前端验证逻辑 
前端看似安全，实则：
如上做的简单网页，可以轻松跳过代码验证 
总结：
三大核心 HTML=结构框架 定义网页结构和内容 CSS=视觉效果 负责网页的视觉美化 JS=事件交互 处理交互和业务逻辑
wed前端安全风险与防御
XSS漏洞
成因：XSS 攻击的核心成因是Web 应用程序对用户输入的数据未进行严格过滤或转义，导致攻击者能够将恶意脚本（如 JavaScript、HTML 等）注入到网页中，并被浏览器执行
拿我的小练习举例： 
分析这个网页的安全隐患 首先看URL（网址）
http://127.0.0.1/xss/level1.php?name=test
http://127.0.0.1 #ip
/xss/level1.php #资源路径
?name=test #参数
提交之后会发现 
提交之后 
提交之后 
所以如果你什么都不做的话，默认是get方式（不安全，明文的）所以上述练习为默认get方式 URL(http://127.0.0.1/xss/level1.php?name=test)后面的值可以随意更改 如图： 
文字标签可以直接插入
我们随便插入一行代码即可 
XSS防御手段—输出转义
Escaping – 让代码变普通文本 
实际演示 
将代码复制出来为
没有找到和<script>alert(2)</script>相关的结果.
前端防御手段
永不信任用户 
