隐私保护是Web开发中的重要议题,随着GDPR等法规的实施,用户隐私保护已经成为法律要求。开发者必须了解如何在收集、存储和使用用户数据时保护用户隐私。
东巴文(db-w.cn) 认为:用户隐私是基本权利,不是可有可无的功能。尊重用户隐私,是建立用户信任的基础。
Cookie是最常用的用户追踪技术,但也带来了隐私问题。合理使用Cookie并保护用户隐私是开发者的责任。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie隐私 - 东巴文</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;
}
.cookie-type {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.cookie-type h3 {
color: #667eea;
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;
}
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Cookie隐私</h1>
<h2>Cookie类型</h2>
<div class="cookie-type">
<h3>1. 必要Cookie(Essential Cookies)</h3>
<p>网站正常运行所必需的Cookie,如会话管理、购物车等。</p>
<div class="code-block">
<strong>示例:</strong> sessionId, cartId, language
</div>
</div>
<div class="cookie-type">
<h3>2. 功能Cookie(Functionality Cookies)</h3>
<p>记住用户选择的Cookie,如主题、语言偏好等。</p>
<div class="code-block">
<strong>示例:</strong> theme, language, fontSize
</div>
</div>
<div class="cookie-type">
<h3>3. 分析Cookie(Analytics Cookies)</h3>
<p>用于统计网站访问情况的Cookie。</p>
<div class="code-block">
<strong>示例:</strong> _ga, _gid, _utmz
</div>
</div>
<div class="cookie-type">
<h3>4. 营销Cookie(Marketing Cookies)</h3>
<p>用于广告追踪和个性化推荐的Cookie。</p>
<div class="code-block">
<strong>示例:</strong> _fbp, _gcl_au, fr
</div>
</div>
<h2>Cookie安全属性</h2>
<table class="info-table">
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>HttpOnly</td>
<td>防止JavaScript访问Cookie</td>
<td>Set-Cookie: sessionId=abc; HttpOnly</td>
</tr>
<tr>
<td>Secure</td>
<td>仅通过HTTPS传输</td>
<td>Set-Cookie: sessionId=abc; Secure</td>
</tr>
<tr>
<td>SameSite</td>
<td>防止CSRF攻击</td>
<td>Set-Cookie: sessionId=abc; SameSite=Strict</td>
</tr>
<tr>
<td>Expires/Max-Age</td>
<td>设置过期时间</td>
<td>Set-Cookie: sessionId=abc; Max-Age=3600</td>
</tr>
<tr>
<td>Path</td>
<td>限制Cookie作用路径</td>
<td>Set-Cookie: sessionId=abc; Path=/admin</td>
</tr>
<tr>
<td>Domain</td>
<td>限制Cookie作用域</td>
<td>Set-Cookie: sessionId=abc; Domain=example.com</td>
</tr>
</tbody>
</table>
<h2>Cookie同意管理</h2>
<div class="code-block">
<pre>
<!-- Cookie同意横幅 -->
<div id="cookie-consent" class="cookie-banner">
<p>我们使用Cookie来改善您的体验。继续浏览即表示同意我们的
<a href="/privacy-policy">隐私政策</a>。
</p>
<button onclick="acceptCookies()">接受</button>
<button onclick="rejectCookies()">拒绝</button>
<button onclick="customizeCookies()">自定义</button>
</div>
</pre>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>根据GDPR等法规,网站必须在收集用户数据前获得明确同意。Cookie同意横幅应该清晰说明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;
}
.storage-type {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.storage-type h3 {
color: #667eea;
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;
}
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>本地存储隐私</h1>
<h2>本地存储类型</h2>
<div class="storage-type">
<h3>1. localStorage</h3>
<p>持久化存储,数据不会过期,除非手动清除。</p>
<div class="code-block">
<pre>
// 存储数据
localStorage.setItem('username', 'john');
// 读取数据
const username = localStorage.getItem('username');
// 删除数据
localStorage.removeItem('username');
// 清空所有数据
localStorage.clear();
</pre>
</div>
</div>
<div class="storage-type">
<h3>2. sessionStorage</h3>
<p>会话级存储,关闭浏览器标签页后数据清除。</p>
<div class="code-block">
<pre>
// 存储数据
sessionStorage.setItem('tempData', 'value');
// 读取数据
const tempData = sessionStorage.getItem('tempData');
// 删除数据
sessionStorage.removeItem('tempData');
</pre>
</div>
</div>
<div class="storage-type">
<h3>3. IndexedDB</h3>
<p>浏览器内置数据库,支持大量结构化数据存储。</p>
<div class="code-block">
<pre>
// 打开数据库
const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = function(event) {
const db = event.target.result;
// 使用数据库
};
request.onerror = function(event) {
console.log('数据库打开失败');
};
</pre>
</div>
</div>
<h2>存储方式对比</h2>
<table class="info-table">
<thead>
<tr>
<th>特性</th>
<th>Cookie</th>
<th>localStorage</th>
<th>sessionStorage</th>
<th>IndexedDB</th>
</tr>
</thead>
<tbody>
<tr>
<td>容量</td>
<td>4KB</td>
<td>5MB</td>
<td>5MB</td>
<td>无限制</td>
</tr>
<tr>
<td>过期时间</td>
<td>可设置</td>
<td>永久</td>
<td>会话结束</td>
<td>永久</td>
</tr>
<tr>
<td>发送到服务器</td>
<td>是</td>
<td>否</td>
<td>否</td>
<td>否</td>
</tr>
<tr>
<td>数据类型</td>
<td>字符串</td>
<td>字符串</td>
<td>字符串</td>
<td>结构化数据</td>
</tr>
<tr>
<td>隐私风险</td>
<td>高</td>
<td>中</td>
<td>低</td>
<td>中</td>
</tr>
</tbody>
</table>
<h2>隐私保护建议</h2>
<ul>
<li>不要在本地存储中保存敏感信息(如密码、信用卡号)</li>
<li>对存储的数据进行加密</li>
<li>提供清除数据的功能</li>
<li>告知用户数据存储的目的</li>
<li>遵守数据保留期限规定</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>本地存储虽然方便,但存在隐私风险。用户可以随时查看和清除本地存储数据,因此不要依赖它保存重要数据。
</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;
}
.permission-card {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.permission-card h3 {
color: #667eea;
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;
}
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>权限管理</h1>
<h2>浏览器权限API</h2>
<p>现代浏览器提供了权限API,用于请求和管理各种设备权限。</p>
<h2>常见权限类型</h2>
<div class="permission-card">
<h3>1. 地理位置(Geolocation)</h3>
<div class="code-block">
<pre>
// 请求地理位置权限
navigator.geolocation.getCurrentPosition(
function(position) {
console.log('纬度:', position.coords.latitude);
console.log('经度:', position.coords.longitude);
},
function(error) {
console.error('获取位置失败:', error.message);
}
);
</pre>
</div>
</div>
<div class="permission-card">
<h3>2. 摄像头和麦克风(Camera & Microphone)</h3>
<div class="code-block">
<pre>
// 请求摄像头和麦克风权限
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function(stream) {
// 使用媒体流
const video = document.querySelector('video');
video.srcObject = stream;
})
.catch(function(error) {
console.error('获取媒体设备失败:', error);
});
</pre>
</div>
</div>
<div class="permission-card">
<h3>3. 通知(Notification)</h3>
<div class="code-block">
<pre>
// 请求通知权限
Notification.requestPermission()
.then(function(permission) {
if (permission === 'granted') {
// 显示通知
new Notification('标题', {
body: '通知内容',
icon: '/icon.png'
});
}
});
</pre>
</div>
</div>
<div class="permission-card">
<h3>4. 剪贴板(Clipboard)</h3>
<div class="code-block">
<pre>
// 读取剪贴板
navigator.clipboard.readText()
.then(text => {
console.log('剪贴板内容:', text);
})
.catch(error => {
console.error('读取剪贴板失败:', error);
});
// 写入剪贴板
navigator.clipboard.writeText('要复制的内容')
.then(() => {
console.log('已复制到剪贴板');
});
</pre>
</div>
</div>
<h2>权限状态</h2>
<table class="info-table">
<thead>
<tr>
<th>状态</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>granted</td>
<td>用户已授权</td>
</tr>
<tr>
<td>denied</td>
<td>用户已拒绝</td>
</tr>
<tr>
<td>prompt</td>
<td>需要询问用户</td>
</tr>
</tbody>
</table>
<h2>权限最佳实践</h2>
<ul>
<li>在需要时才请求权限,不要在页面加载时立即请求</li>
<li>解释为什么需要该权限</li>
<li>提供拒绝权限后的替代方案</li>
<li>不要频繁请求已拒绝的权限</li>
<li>尊重用户的隐私选择</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>权限请求应该在用户触发相关操作时进行,而不是页面加载时。这样可以提高用户授权率,也能建立用户信任。
</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;
}
.policy-section {
background: #f8f9fa;
padding: 20px;
border: 1px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.policy-section h3 {
color: #667eea;
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>隐私政策</h1>
<h2>隐私政策的重要性</h2>
<p>隐私政策是网站与用户之间的法律协议,说明网站如何收集、使用、存储和保护用户数据。</p>
<h2>隐私政策必备内容</h2>
<div class="policy-section">
<h3>1. 数据收集</h3>
<ul>
<li>收集哪些数据</li>
<li>如何收集数据</li>
<li>为什么收集这些数据</li>
</ul>
</div>
<div class="policy-section">
<h3>2. 数据使用</h3>
<ul>
<li>数据的使用目的</li>
<li>数据如何处理</li>
<li>是否会与第三方共享</li>
</ul>
</div>
<div class="policy-section">
<h3>3. 数据存储</h3>
<ul>
<li>数据存储在哪里</li>
<li>数据保留多长时间</li>
<li>如何保护数据安全</li>
</ul>
</div>
<div class="policy-section">
<h3>4. 用户权利</h3>
<ul>
<li>访问数据的权利</li>
<li>更正数据的权利</li>
<li>删除数据的权利</li>
<li>数据可携带权</li>
</ul>
</div>
<div class="policy-section">
<h3>5. Cookie政策</h3>
<ul>
<li>使用的Cookie类型</li>
<li>每种Cookie的目的</li>
<li>如何管理Cookie</li>
</ul>
</div>
<h2>隐私政策示例结构</h2>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
# 隐私政策
最后更新日期: 2024年1月1日
## 1. 引言
我们重视您的隐私,本政策说明我们如何收集、使用和保护您的个人信息。
## 2. 我们收集的信息
- 个人身份信息(姓名、邮箱等)
- 使用数据(访问日志、Cookie等)
- 设备信息(浏览器类型、IP地址等)
## 3. 我们如何使用您的信息
- 提供和改进服务
- 发送通知和更新
- 分析使用情况
## 4. 信息共享
我们不会出售您的个人信息。我们仅在以下情况共享:
- 获得您的同意
- 法律要求
- 服务提供商
## 5. 数据安全
我们采取合理措施保护您的数据安全。
## 6. 您的权利
您有权访问、更正、删除您的个人数据。
## 7. 联系我们
如有疑问,请联系: privacy@example.com
</pre>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>隐私政策应该使用清晰易懂的语言,避免法律术语。用户应该能够轻松理解网站如何处理他们的数据。
</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>GDPR合规 - 东巴文</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;
}
.right-card {
background: #d4edda;
border: 2px solid #28a745;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
}
.right-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>GDPR合规</h1>
<h2>GDPR概述</h2>
<p>GDPR(General Data Protection Regulation,通用数据保护条例)是欧盟制定的数据保护法规,于2018年5月25日生效。</p>
<h2>GDPR核心原则</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>
<tr>
<td>完整性和保密性</td>
<td>确保数据安全</td>
</tr>
<tr>
<td>可问责性</td>
<td>数据控制者负责遵守以上原则</td>
</tr>
</tbody>
</table>
<h2>用户权利</h2>
<div class="right-card">
<h3>1. 访问权(Right to Access)</h3>
<p>用户有权访问其个人数据,了解数据如何被处理。</p>
</div>
<div class="right-card">
<h3>2. 更正权(Right to Rectification)</h3>
<p>用户有权更正不准确或不完整的个人数据。</p>
</div>
<div class="right-card">
<h3>3. 删除权(Right to Erasure)</h3>
<p>用户有权要求删除其个人数据("被遗忘权")。</p>
</div>
<div class="right-card">
<h3>4. 限制处理权(Right to Restrict Processing)</h3>
<p>用户有权限制其个人数据的处理。</p>
</div>
<div class="right-card">
<h3>5. 数据可携带权(Right to Data Portability)</h3>
<p>用户有权以结构化格式接收其数据。</p>
</div>
<div class="right-card">
<h3>6. 反对权(Right to Object)</h3>
<p>用户有权反对处理其个人数据。</p>
</div>
<h2>合规建议</h2>
<ul>
<li>获得用户明确同意</li>
<li>提供清晰的隐私政策</li>
<li>实施数据保护措施</li>
<li>任命数据保护官(DPO)</li>
<li>建立数据泄露响应机制</li>
<li>记录数据处理活动</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>GDPR违规可能导致高达2000万欧元或全球年营业额4%的罚款。即使不在欧盟,只要处理欧盟公民数据,就必须遵守GDPR。
</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;
}
.consent-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
border-radius: 10px;
}
.consent-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #333;
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.consent-buttons {
display: flex;
gap: 10px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-link {
background: transparent;
color: #667eea;
text-decoration: underline;
}
.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>根据GDPR等法规,处理用户数据前必须获得明确同意。同意必须是自由给予、具体明确、知情告知的。</p>
<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>
<div class="consent-demo">
<h3>Cookie同意横幅</h3>
<div class="consent-banner">
<div>
<p>我们使用Cookie来改善您的体验。请选择您允许的Cookie类型:</p>
</div>
<div class="consent-buttons">
<button class="btn btn-link" onclick="customizeCookies()">自定义</button>
<button class="btn btn-secondary" onclick="rejectAll()">拒绝所有</button>
<button class="btn btn-primary" onclick="acceptAll()">接受所有</button>
</div>
</div>
</div>
<h2>同意记录</h2>
<pre style="background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto;">
// 记录用户同意
const consent = {
userId: 'user123',
timestamp: new Date().toISOString(),
version: '1.0',
preferences: {
necessary: true, // 必要Cookie
functional: true, // 功能Cookie
analytics: false, // 分析Cookie
marketing: false // 营销Cookie
},
source: 'consent_banner',
language: 'zh-CN'
};
// 保存同意记录
localStorage.setItem('userConsent', JSON.stringify(consent));
</pre>
<h2>最佳实践</h2>
<ul>
<li>使用清晰易懂的语言</li>
<li>提供细粒度的控制选项</li>
<li>默认不勾选非必要Cookie</li>
<li>记录同意时间和版本</li>
<li>提供撤销同意的简单方法</li>
<li>定期重新获取同意</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>同意必须是主动的肯定行为,不能使用预勾选框。用户应该能够轻松拒绝或撤销同意,撤销同意应该和给予同意一样简单。
</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;
}
.encryption-card {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.encryption-card h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
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>数据加密</h1>
<h2>加密的重要性</h2>
<p>数据加密是保护用户隐私的关键技术,确保即使数据被窃取,攻击者也无法读取。</p>
<h2>加密类型</h2>
<div class="encryption-card">
<h3>1. 传输加密(HTTPS)</h3>
<p>使用SSL/TLS加密数据传输,防止中间人攻击。</p>
<div class="code-block">
<pre>
// 强制HTTPS
if (location.protocol !== 'https:') {
location.replace(`https:${location.href.substring(location.protocol.length)}`);
}
</pre>
</div>
</div>
<div class="encryption-card">
<h3>2. 存储加密</h3>
<p>加密存储在服务器或本地的数据。</p>
<div class="code-block">
<pre>
// 使用Web Crypto API加密数据
async function encryptData(data, password) {
const encoder = new TextEncoder();
const dataBuffer = encoder.encode(data);
// 生成密钥
const keyMaterial = await crypto.subtle.importKey(
'raw',
encoder.encode(password),
'PBKDF2',
false,
['deriveKey']
);
const key = await crypto.subtle.deriveKey(
{
name: 'PBKDF2',
salt: encoder.encode('salt'),
iterations: 100000,
hash: 'SHA-256'
},
keyMaterial,
{ name: 'AES-GCM', length: 256 },
false,
['encrypt']
);
// 加密
const encrypted = await crypto.subtle.encrypt(
{ name: 'AES-GCM', iv: crypto.getRandomValues(new Uint8Array(12)) },
key,
dataBuffer
);
return encrypted;
}
</pre>
</div>
</div>
<div class="encryption-card">
<h3>3. 端到端加密</h3>
<p>数据在发送方加密,仅在接收方解密,中间服务器无法读取。</p>
</div>
<h2>加密算法对比</h2>
<table class="info-table">
<thead>
<tr>
<th>算法</th>
<th>类型</th>
<th>用途</th>
</tr>
</thead>
<tbody>
<tr>
<td>AES-256</td>
<td>对称加密</td>
<td>数据存储加密</td>
</tr>
<tr>
<td>RSA-2048</td>
<td>非对称加密</td>
<td>密钥交换、数字签名</td>
</tr>
<tr>
<td>SHA-256</td>
<td>哈希算法</td>
<td>密码存储、数据完整性</td>
</tr>
<tr>
<td>bcrypt</td>
<td>哈希算法</td>
<td>密码存储</td>
</tr>
<tr>
<td>TLS 1.3</td>
<td>协议</td>
<td>传输加密</td>
</tr>
</tbody>
</table>
<h2>加密最佳实践</h2>
<ul>
<li>使用HTTPS传输所有数据</li>
<li>敏感数据加密存储</li>
<li>使用强加密算法(AES-256, RSA-2048+)</li>
<li>定期更新密钥</li>
<li>安全存储密钥</li>
<li>使用加盐哈希存储密码</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>加密不是万能的,需要配合其他安全措施。密钥管理是加密系统中最关键的环节,密钥泄露会导致所有加密数据暴露。
</div>
</div>
</body>
</html>
东巴文(db-w.cn) 提醒:隐私保护不仅是法律要求,更是用户信任的基础。在数据驱动的时代,尊重用户隐私是企业的社会责任和竞争优势。