Back to list
h2b-dev-studio

sdd-design-security

by h2b-dev-studio

웹 기술을 탐색하고 실험하기 위한 개인 공간입니다.

0🍴 0📅 Jan 20, 2026

SKILL.md


name: sdd-design-security description: | Design threat mitigation, input validation, and secure execution. Use when: sdd-design assigns Security Considerations section. Triggers: "security design", "threat model", "input validation", "xss prevention"

SDD Design Security

Write the Security Considerations section of a design document.

Scope

Responsible ForNot Responsible For
Threat modelingComponent structure (→ frontend)
Input validation strategyProps interface design (→ frontend)
Code execution sandboxingCode editor implementation (→ frontend)
XSS prevention strategySyntax highlighting (→ frontend)
Dependency security reviewBundle optimization (→ perf)

Cross-Cutting Roles

Note: Cross-cutting concerns are an extension to docs/sdd-guidelines.md for specialist coordination. See sdd-design for full mapping.

Security is:

  • Primary owner: (none in typical frontend projects)
  • Reviewer for: Error handling (owned by frontend), User input (owned by frontend)

Instructions

Step 1: Read Context

  1. Design skeleton (from sdd-design)
  2. All REQs in your section's @derives
  3. Foundation anchors (especially CONSTRAINT-*, SCOPE-*)
  4. Frontend section (for input handling, code execution)

Step 2: Identify Attack Surface

For each REQ, identify security-relevant elements:

REQUser InputDynamic ContentCode Execution

Attack surface types:

  • User input: forms, props manipulation, text entry
  • Dynamic content: user-provided data rendered to DOM
  • Code execution: eval, Function(), dynamic imports

Step 3: Build Threat Model

For each attack surface:

ThreatVectorImpactLikelihood@derives
REQ-XXX

Impact levels: Critical / High / Medium / Low Likelihood: High (easy to exploit) / Medium / Low (requires skill)

Step 4: Design Input Validation

For each user input from REQs:

Input SourceValidationSanitization@derives
REQ-XXX

Validation types:

  • Type checking (string, number, enum)
  • Range/length limits
  • Format validation (regex)
  • Whitelist vs blacklist

Step 5: Design Code Execution Controls (if applicable)

If REQ involves code execution:

RiskControlImplementation
Arbitrary codeScope restriction / sandbox
Infinite loopsTimeout
Memory exhaustionMemory limit
DOM accessRestricted globals

Decision: Sandbox vs restricted scope vs no eval?

Document with @derives linking to REQ.

Step 6: Design XSS Prevention

For each dynamic content type:

Content TypeStrategy@derives
User textEscape / sanitizeREQ-XXX
Code displaySyntax highlighter escapesREQ-XXX
Dynamic HTMLCSP / sanitizeREQ-XXX

Step 7: Review Dependencies

For libraries suggested by other specialists:

DependencyKnown VulnerabilitiesMitigation

Check: npm audit, Snyk, GitHub advisories

Step 8: Write Section

## Security Considerations

@derives: {REQ-IDs}

### Threat Model
### Input Validation
### Code Execution Controls (if applicable)
### XSS Prevention
### Dependency Security

**Status:** draft

Step 9: Add Decisions

For non-obvious security choices:

| ID | Decision | Rationale | Owner |
|----|----------|-----------|-------|
| DEC-00x | {what} | {why — connect to REQ + threat} | security |

Step 10: Handoff

Per docs/sdd-guidelines.md §4.3 and §10.6.

1. Update Section Status

**Status:** verified

2. Update State File

# .sdd/state.yaml
documents:
  design:
    sections:
      security: verified

3. Create Handoff Record

# .sdd/handoffs/{timestamp}-security.yaml
from: sdd-design-security
to: sdd-design
timestamp: {ISO-8601}

completed:
  - design.security: verified

in_progress: []

blocked: []

gaps: []

next_steps:
  - sdd-design-frontend: Implement validation per spec
  - sdd-design-frontend: Review — error handling exposes no sensitive info

4. Cross-Cutting Status

ConcernPrimaryReviewerStatus
Error handlingfrontendsecurityapproved or needs-revision
User inputfrontendsecurityapproved or needs-revision

@derives Judgment

A security control @derives from a REQ when:

CriterionExample
Mitigates threat from REQ featureInput validation → REQ's "user enters values"
Enables REQ safelySandbox → REQ's "editable code"
Required by REQ constraintXSS prevention → REQ's "displays user content"

NOT @derives:

  • Generic security best practices not tied to REQ
  • Threats from features not in requirements

Verification

  • All user inputs from REQs have validation defined
  • Threat model covers all attack surfaces
  • Code execution controls match REQ scope (if applicable)
  • XSS prevention for all dynamic content
  • Dependencies reviewed for known vulnerabilities
  • Decisions logged with rationale
  • Cross-cutting reviews completed

References

FileContent
reference/threat-modeling.mdREQ-based threat identification
reference/frontend-security.mdCommon frontend security patterns

Examples

FileContent
examples/react-sample.mdComplete example for react-sample package

Score

Total Score

50/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

0/10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

Reviews

💬

Reviews coming soon