القائمة
应用安全专家，专注于认证授权、数据保护和合规性审计。当用户需要：(1) 设计安全的登录认证系统 (2) 进行安全代码审查 (3) 检查 GDPR/隐私合规 (4) 防范常见安全漏洞 (OWASP Top 10) (5) 确保无障碍设计安全使用时使用此 Skill。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
当用户需要创建新 Skill 或更新现有 Skill 时使用。此 Skill 提供技能创建的完整工作流指导，包括需求分析、编写规范、工程化构建、质量评估和迭代优化。
当用户需要将需求转化为可执行任务、进行技术选型或协调多个专业 Skill 协作时使用。此 Skill 充当任务调度中心，接收需求文档并智能路由到合适的专业领域。
当用户需要从零开始构建完整项目或需要多角色协作时使用。此 Skill 充当全能开发团队，包含产品经理、架构师、设计师、开发者和测试人员，指导从想法到上线的全过程。
当用户在项目初期或重大功能迭代时需要进行技术选型时使用。此 Skill 根据需求自动生成 2-3 套技术方案对比，涵盖前端、后端、数据库及中间件，并提供优劣势分析和最终选型建议。
当用户在开始开发前需要搜索现有的开源库、工具、MCP Server 或最佳实践代码时使用。帮助避免重复造轮子，找到最适合当前需求的现成解决方案。
当用户需要进行创意发散、需求探索或产品规划时使用（无论是创建功能、构建组件、添加功能还是修改行为）。此 Skill 通过协作对话将想法转化为完整的设计方案和需求规格说明书。
| name | Security Specialist |
| description | 应用安全专家，专注于认证授权、数据保护和合规性审计。当用户需要：(1) 设计安全的登录认证系统 (2) 进行安全代码审查 (3) 检查 GDPR/隐私合规 (4) 防范常见安全漏洞 (OWASP Top 10) (5) 确保无障碍设计安全使用时使用此 Skill。 |
⚠️ 性能提示: 此 Skill 包含完整的安全审计流程和无障碍安全指南。日常开发可只关注 OWASP Top 10 和快速安全检查清单。
本 Skill 支持并推荐配合特定的智能体角色和 MCP 工具使用，以获得最佳效果。
.gitignore 配置。提供全方位的安全保障，确保应用符合安全标准与法规。
无障碍设计不仅仅是可用性要求，也涉及安全层面：
| 安全问题 | 无障碍风险 | 安全影响 |
|---|---|---|
| 验证码绕过 | 视觉验证码无法被屏幕阅读器访问 | 可能迫使视障用户使用不安全的替代方案 |
| 焦点管理 | 模态框焦点泄漏 | 敏感信息可能被意外暴露 |
| ARIA 滥用 | aria-hidden 滥用 | 隐藏敏感内容被屏幕阅读器读取 |
| 输入验证 | 错误提示不清晰 | 用户可能重复提交导致安全问题 |
传统验证码（CAPTCHA）对视障用户构成严重障碍：
<!-- ❌ 不合规：纯视觉验证码 -->
<div class="captcha">
<img src="/captcha.png" alt="验证码图片" />
<input type="text" placeholder="请输入验证码" />
</div>
<!-- ✅ 合规：提供多种验证方式 -->
<div class="captcha" role="group" aria-labelledby="captcha-label">
<span id="captcha-label" class="sr-only">安全验证</span>
<!-- 首选：隐形验证码 -->
<div data-captcha="invisible"></div>
<!-- 备选：音频验证码 -->
<button type="button" aria-describedby="audio-desc">
播放音频验证码
<span id="audio-desc" class="sr-only">
如有视觉障碍，请点击此处获取音频验证码
</span>
</button>
<label for="captcha-input" class="sr-only">请输入您听到的字符</label>
<input type="text" id="captcha-input" autocomplete="off" />
</div>
// ✅ 推荐：隐形验证码检查
async function validateCaptcha(token) {
try {
const response = await fetch('/api/verify-captcha', {
method: 'POST',
body: JSON.stringify({ token })
});
const result = await response.json();
if (!result.success) {
// 对屏幕阅读器用户显示语音错误
announceToScreenReader('验证码验证失败，请重试');
return false;
}
return true;
} catch (error) {
announceToScreenReader('网络错误，请稍后重试');
return false;
}
}
焦点管理不当可能导致敏感信息泄露：
<!-- ❌ 不安全：模态框焦点泄漏 -->
<div class="modal">
<h2>登录表单</h2>
<input type="text" placeholder="用户名" />
<input type="password" placeholder="密码" />
<!-- 危险：背景内容仍可被访问 -->
</div>
<div class="background-content">
<button>删除账户</button> <!-- 可被意外聚焦 -->
</div>
<!-- ✅ 安全：正确的焦点陷阱 -->
<div
class="modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
tabindex="-1"
>
<h2 id="modal-title">登录表单</h2>
<label for="username">用户名</label>
<input type="text" id="username" autocomplete="username" />
<label for="password">密码</label>
<input type="password" id="password" autocomplete="current-password" />
<button type="button" aria-describedby="password-requirements">
显示密码要求
</button>
<!-- aria-describedby 安全使用 -->
<p id="password-requirements" class="sr-only">
密码要求：至少8个字符，包含大小写字母和数字
</p>
</div>
// ✅ 安全的焦点陷阱实现
class FocusTrap {
constructor(modalElement) {
this.modal = modalElement;
this.firstFocusable = null;
this.lastFocusable = null;
this.previousActiveElement = null;
}
activate() {
// 保存之前的焦点元素
this.previousActiveElement = document.activeElement;
// 找到焦点元素
const focusableElements = this.modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
this.firstFocusable = focusableElements[0];
this.lastFocusable = focusableElements[focusableElements.length - 1];
// 将焦点移到模态框第一个元素
this.firstFocusable.focus();
// 添加键盘监听
this.handleKeyDown = this.handleKeyDown.bind(this);
document.addEventListener('keydown', this.handleKeyDown);
}
handleKeyDown(event) {
if (event.key !== 'Tab') return;
// Shift + Tab: 从第一个元素向前
if (event.shiftKey && document.activeElement === this.firstFocusable) {
event.preventDefault();
this.lastFocusable.focus();
}
// Tab: 从最后一个元素向后
else if (!event.shiftKey && document.activeElement === this.lastFocusable) {
event.preventDefault();
this.firstFocusable.focus();
}
}
deactivate() {
document.removeEventListener('keydown', this.handleKeyDown);
// 恢复焦点
if (this.previousActiveElement) {
this.previousActiveElement.focus();
}
}
}
ARIA 属性使用不当可能导致安全信息泄露：
aria-hidden 可能隐藏安全警告aria-live 可能意外暴露敏感信息aria-describedby 链接到错误的内容<!-- ❌ 不安全：隐藏安全警告 -->
<div aria-hidden="true" class="security-warning">
⚠️ 此页面包含敏感信息
</div>
<!-- ✅ 安全：保留重要安全信息 -->
<div
role="alert"
aria-live="assertive"
class="security-warning"
>
⚠️ 此页面包含敏感信息，请确认您的网络连接安全
</div>
<!-- ❌ 不安全：aria-describedby 链接到隐藏内容 -->
<span id="sensitive-info" class="sr-only">
您的账户余额为 ¥10,000
</span>
<button aria-describedby="sensitive-info">
查看详情
</button>
<!-- ✅ 安全：谨慎使用 aria-describedby -->
<button aria-describedby="button-purpose">
查看详情
</button>
<span id="button-purpose" class="sr-only">
查看账户详情和余额
</span>
aria-hidden 隐藏重要安全信息aria-live 区域设置合理的优先级（assertive/polite）aria-describedby 只链接到相关内容<!-- ✅ 合规：安全的错误提示 -->
<label for="password">密码</label>
<input
type="password"
id="password"
aria-describedby="password-requirements password-hint"
aria-invalid="false"
/>
<ul id="password-requirements" class="sr-only">
<li>至少8个字符</li>
<li>包含大写字母</li>
<li>包含小写字母</li>
<li>包含数字</li>
</ul>
<!-- 安全提示，不暴露具体错误 -->
<p id="password-hint">
请参考要求创建强密码
</p>
<div
role="alert"
aria-live="polite"
id="password-error"
hidden
>
</div>
// ✅ 安全的错误提示
function validatePassword(password) {
const errors = [];
if (password.length < 8) {
errors.push('密码长度不足');
}
if (!/[A-Z]/.test(password)) {
errors.push('缺少大写字母');
}
const errorElement = document.getElementById('password-error');
if (errors.length > 0) {
// 设置 aria-invalid
document.getElementById('password').setAttribute('aria-invalid', 'true');
// 对屏幕阅读器显示通用错误
errorElement.textContent = '密码不符合要求，请重试';
errorElement.hidden = false;
} else {
document.getElementById('password').setAttribute('aria-invalid', 'false');
errorElement.hidden = true;
}
}
<!-- ✅ 合规：安全的自动完成 -->
<label for="cc-number">信用卡号</label>
<input
type="text"
id="cc-number"
inputmode="numeric"
pattern="[0-9\s]{13,19}"
autocomplete="cc-number"
aria-describedby="cc-hint"
/>
<p id="cc-hint" class="sr-only">
输入13到19位数字，可包含空格
</p>
<!-- ❌ 危险：禁用自动完成可能导致用户使用不安全的密码 -->
<input type="password" autocomplete="off" />
<!-- ✅ 合规：MFA 无障碍设计 -->
<section aria-labelledby="mfa-title">
<h2 id="mfa-title">双因素认证</h2>
<p>为了保护您的账户安全，我们建议启用双因素认证。</p>
<!-- TOTP 应用 -->
<div>
<h3>身份验证器应用</h3>
<button type="button">
<svg aria-hidden="true"><!-- 图标 --></svg>
<span>下载 Google Authenticator</span>
</button>
<label for="totp-code">输入6位验证码</label>
<input
type="text"
id="totp-code"
inputmode="numeric"
pattern="[0-9]{6}"
maxlength="6"
autocomplete="one-time-code"
aria-describedby="totp-hint"
/>
<p id="totp-hint" class="sr-only">
请输入身份验证器应用显示的6位数字验证码
</p>
</div>
<!-- 短信验证码 -->
<div>
<h3>短信验证码</h3>
<button type="button" aria-describedby="sms-warning">
发送短信验证码
</button>
<p id="sms-warning" class="sr-only">
注意：短信验证码可能存在安全风险，建议使用身份验证器应用
</p>
</div>
</section>
<!-- ✅ 合规：会话超时无障碍通知 -->
<div
role="alertdialog"
aria-labelledby="timeout-title"
aria-describedby="timeout-desc"
aria-modal="true"
>
<h2 id="timeout-title">会话即将过期</h2>
<p id="timeout-desc">
由于您超过30分钟未操作，会话即将自动登出。
<span id="countdown" aria-live="polite" aria-atomic="true">
剩余 2 分钟
</span>
</p>
<button type="button" onclick="extendSession()">
继续操作
</button>
<button type="button" onclick="logout()">
安全登出
</button>
</div>
// jest-accessibility-security.test.js
describe('无障碍安全测试', () => {
test('敏感信息不被 aria-hidden 隐藏', () => {
const warnings = document.querySelectorAll('[aria-hidden="true"]');
warnings.forEach(element => {
const text = element.textContent.toLowerCase();
const isSecurityRelated = text.includes('安全') ||
text.includes('warning') ||
text.includes('敏感');
expect(isSecurityRelated).toBe(false);
});
});
test('所有表单有安全的错误提示', () => {
const inputs = document.querySelectorAll('input[aria-invalid="true"]');
const errors = document.querySelectorAll('[role="alert"], [aria-live]');
// 每个错误输入应该有对应的错误提示
inputs.forEach(input => {
const describedBy = input.getAttribute('aria-describedby');
const hasErrorConnection = errors.some(error =>
describedBy?.includes(error.id)
);
expect(hasErrorConnection).toBe(true);
});
});
test('模态框有正确的焦点陷阱', () => {
const modals = document.querySelectorAll('[role="dialog"]');
modals.forEach(modal => {
const focusableElements = modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
// 模态框应该有可聚焦元素
expect(focusableElements.length).toBeGreaterThan(0);
// 第一个元素应该是可聚焦的
expect(focusableElements[0]).toBeFocusable();
});
});
});
| 标准 | 要求 | 无障碍安全实现 |
|---|---|---|
| 1.3.1 信息和关系 | 结构化信息 | 安全的表单结构和语义 |
| 2.1.1 键盘 | 完全键盘可访问 | 所有安全操作键盘可触发 |
| 2.4.3 焦点顺序 | 焦点顺序符合逻辑 | 安全的焦点管理 |
| 3.3.1 错误识别 | 错误识别 | 屏幕阅读器可感知的错误 |
| 4.1.2 名称角色值 | ARIA 正确使用 | 安全使用 ARIA 属性 |