菜单
应用安全专家，专注于认证授权、数据保护和合规性审计。当用户需要：(1) 设计安全的登录认证系统 (2) 进行安全代码审查 (3) 检查 GDPR/隐私合规 (4) 防范常见安全漏洞 (OWASP Top 10) (5) 确保无障碍设计安全使用时使用此 Skill。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| 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 属性 |
当用户需要创建新 Skill 或更新现有 Skill 时使用。此 Skill 提供技能创建的完整工作流指导，包括需求分析、编写规范、工程化构建、质量评估和迭代优化。
当用户需要将需求转化为可执行任务、进行技术选型或协调多个专业 Skill 协作时使用。此 Skill 充当任务调度中心，接收需求文档并智能路由到合适的专业领域。
当用户需要从零开始构建完整项目或需要多角色协作时使用。此 Skill 充当全能开发团队，包含产品经理、架构师、设计师、开发者和测试人员，指导从想法到上线的全过程。
当用户在项目初期或重大功能迭代时需要进行技术选型时使用。此 Skill 根据需求自动生成 2-3 套技术方案对比，涵盖前端、后端、数据库及中间件，并提供优劣势分析和最终选型建议。
当用户在开始开发前需要搜索现有的开源库、工具、MCP Server 或最佳实践代码时使用。帮助避免重复造轮子，找到最适合当前需求的现成解决方案。
当用户需要进行创意发散、需求探索或产品规划时使用（无论是创建功能、构建组件、添加功能还是修改行为）。此 Skill 通过协作对话将想法转化为完整的设计方案和需求规格说明书。