HTML和JavaScript基础
Web安全学习路径 | 模块1 | 课程2
1. 引言
理解HTML和JavaScript是Web安全学习的基础。本课程将介绍HTML文档结构和JavaScript编程基础，重点关注与Web安全相关的方面，帮助您为后续学习Web漏洞和攻击技术打下坚实基础。
学习目标： 掌握HTML文档结构、常用元素，理解JavaScript的基本语法和DOM操作，了解客户端验证和常见的安全隐患。
2. HTML基础
2.1 什么是HTML
HTML（HyperText Markup Language，超文本标记语言）是创建网页的标准标记语言。它描述了网页的结构，由一系列元素组成，这些元素告诉浏览器如何显示内容。
2.2 HTML文档结构
基本的HTML文档结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
- <!DOCTYPE html>：声明文档类型
- <html>：包含整个HTML文档
- <head>：包含文档的元数据，如标题、字符集、样式表等
- <body>：包含网页可见内容
3. 重要的HTML元素
了解常用的HTML元素对于识别潜在的安全漏洞至关重要：
3.1 表单元素
表单用于收集用户输入，是安全关注的重点：
<form action="/submit-form" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<input type="submit" value="提交">
</form>
重要的表单属性：
- action：指定表单数据发送的URL
- method：指定HTTP方法（GET或POST）
- enctype：指定表单数据的编码方式，尤其是文件上传时使用
3.2 链接和锚点
链接用于导航到其他页面或资源：
<a href="https://example.com">外部链接</a>
<a href="/internal-page">内部链接</a>
<a href="javascript:alert('Hello')">JavaScript链接</a>
安全注意事项： javascript: URL可能导致XSS攻击，应当谨慎使用。
3.3 脚本和样式
包含JavaScript代码和CSS样式：
<!-- 内部脚本 -->
<script>
alert("Hello, World!");
</script>
<!-- 外部脚本 -->
<script src="script.js"></script>
<!-- 内部样式 -->
<style>
body { background-color: #f0f0f0; }
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="styles.css">
3.4 iframe
内联框架用于在网页中嵌入其他文档：
<iframe src="https://example.com" width="500" height="300"></iframe>
安全注意事项： iframe可能导致安全问题，如点击劫持。应使用sandbox属性和内容安全策略限制其行为。
4. JavaScript简介
4.1 什么是JavaScript
JavaScript是一种动态类型、解释型编程语言，主要用于Web客户端脚本，使网页具有交互性。它也可以通过Node.js在服务器端使用。
4.2 JavaScript的作用
- 响应用户操作（点击、输入等）
- 动态修改HTML和CSS内容
- 发送和接收来自服务器的数据（AJAX）
- 客户端表单验证
- 创建动画和交互式元素
4.3 JavaScript与安全
JavaScript在Web安全中扮演重要角色，既可用于安全增强（如客户端验证），也可能被用于攻击（如XSS）。
5. JavaScript基础语法
5.1 变量和数据类型
// 变量声明
let name = "Alice";
const age = 25;
var isActive = true;
// 基本数据类型
let str = "Hello"; // 字符串
let num = 123; // 数字
let bool = true; // 布尔值
let arr = [1, 2, 3]; // 数组
let obj = {name: "Alice"}; // 对象
let n = null; // 空值
let u = undefined; // 未定义
5.2 函数
// 函数声明
function greet(name) {
return "Hello, " + name;
}
// 函数表达式
const greet = function(name) {
return "Hello, " + name;
};
// 箭头函数
const greet = (name) => {
return "Hello, " + name;
};
5.3 条件和循环
// if 语句
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
// for 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while 循环
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
5.4 事件处理
// HTML 内联事件
<button onclick="alert('按钮被点击')">点击我</button>
// JavaScript 事件监听器
document.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击");
});
6. DOM操作
DOM（文档对象模型）是HTML和XML文档的编程接口。JavaScript可以通过DOM操作页面内容和结构。
6.1 选择元素
// 通过ID选择
const element = document.getElementById("myId");
// 通过类名选择
const elements = document.getElementsByClassName("myClass");
// 通过标签名选择
const elements = document.getElementsByTagName("div");
// CSS选择器
const element = document.querySelector(".myClass");
const elements = document.querySelectorAll("div.myClass");
6.2 修改内容
// 修改HTML内容
element.innerHTML = "<strong>新内容</strong>";
// 修改文本内容
element.textContent = "新文本内容";
// 修改属性
element.setAttribute("href", "https://example.com");
element.href = "https://example.com";
6.3 创建和删除元素
// 创建新元素
const newElement = document.createElement("div");
newElement.textContent = "新元素";
// 追加元素
parentElement.appendChild(newElement);
// 移除元素
parentElement.removeChild(childElement);
element.remove(); // 较新的方法
安全注意事项： 当使用innerHTML插入用户提供的内容时要特别小心，这可能导致XSS攻击。应优先使用textContent或DOM方法创建元素。
7. AJAX基础
AJAX（Asynchronous JavaScript and XML）允许网页异步与服务器通信，无需重新加载整个页面。
7.1 使用XMLHttpRequest
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 配置请求
xhr.open("GET", "/api/data", true);
// 设置回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
console.log(response);
}
};
// 发送请求
xhr.send();
7.2 使用Fetch API
// 发起GET请求
fetch("/api/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));
// 发起POST请求
fetch("/api/submit", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name: "Alice", age: 25 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));
8. 客户端存储
浏览器提供了多种客户端存储机制，用于保存数据。
8.1 Cookies
// 设置cookie
document.cookie = "username=John; expires=Thu, 31 Dec 2023 23:59:59 GMT; path=/";
// 读取所有cookie
const allCookies = document.cookie;
8.2 Local Storage和Session Storage
// Local Storage (持久存储)
localStorage.setItem("username", "John");
const username = localStorage.getItem("username");
localStorage.removeItem("username");
// Session Storage (会话存储)
sessionStorage.setItem("tempData", "123");
const tempData = sessionStorage.getItem("tempData");
sessionStorage.removeItem("tempData");
安全注意事项： 永远不要在客户端存储敏感信息（如密码、认证令牌）。存储的数据可能被XSS攻击获取。
9. 安全注意事项
9.1 输入验证
客户端验证可以改善用户体验，但必须配合服务器端验证：
function validateEmail(email) {
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return re.test(email);
}
document.getElementById("myForm").addEventListener("submit", function(event) {
const email = document.getElementById("email").value;
if (!validateEmail(email)) {
alert("请输入有效的电子邮件地址");
event.preventDefault(); // 阻止表单提交
}
});
重要提示： 客户端验证仅用于改善用户体验，可以被绕过。必须在服务器端实施强有力的验证。
9.2 危险的JavaScript函数
某些JavaScript函数和方法可能存在安全风险：
- eval()：执行字符串中的代码，可能导致代码注入
- document.write()：可能导致XSS
- innerHTML：使用用户输入时可能导致XSS
- setTimeout()/setInterval()：与字符串参数一起使用时类似于eval()
9.3 内容安全策略(CSP)
CSP是一种安全机制，通过限制资源的加载和执行来预防XSS等攻击：
// HTML meta标签中设置CSP
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
// 或在HTTP响应头中设置
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com