# Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting') (CWE-79)

The product does not neutralize or incorrectly neutralizes user-controllable input before it is placed in output that is used as a web page that is served to other users.

**Stack:** JavaScript

- Prevalence: 高 频繁被利用
- Impact: 关键 1 条严重级别为关键的规则
- Prevention: 已记录 4 个修复示例

**OWASP:** Injection (A03:2021-Injection) - #3

## Description

Cross-site scripting (XSS) vulnerabilities occur when untrusted data enters a web application and is sent to a web browser without proper validation or encoding. XSS allows attackers to execute scripts in the victim's browser which can hijack user sessions, deface web sites, or redirect the user to malicious sites.

## Prevention

基于 3 条 Shoulder 检测规则的 Cross-Site Scripting (XSS) 预防策略。

### JavaScript

Validate content with strict allowlists before using DomSanitizer.bypassSecurityTrust methods

Sanitize user content with DOMPurify before binding to innerHTML, or use text interpolation instead

Use HTML encoding or sanitization libraries before output

## Warning Signs

- [HIGH] Property binding '...' used without explicit sanitization. This may allow XSS if bound to untrusted data.
- [HIGH] user input flowing into HTTP responses without proper encoding or sanitization
- [CRITICAL] DomSanitizer.... used without proper input validation. This completely disables XSS protection.

## Consequences

- 执行未授权代码
- 绕过保护机制
- 读取应用程序数据
- 修改应用程序数据

## Mitigations

- 使用经过审查的库或框架,以防止此弱点
- 理解数据将被使用的上下文以及预期的编码方式
- 使用 Content Security Policy (CSP) 降低影响

## Detection

- Total rules: 4
- Critical: 1
- Languages: javascript, typescript, python

## Rules by Language

### Javascript (3 rules)

- **Angular Unsafe Security Context Bypass** [CRITICAL]: DomSanitizer.bypassSecurityTrust* methods completely disable XSS protection,
enabling script injection when used with any user-controllable data.
  - Remediation: Validate with strict allowlists before using bypassSecurityTrust methods.

```typescript
const ALLOWED_DOMAINS = ['youtube.com', 'vimeo.com'];

embedVideo(urlString: string): SafeResourceUrl | null {
  const url = new URL(urlString);
  if (url.protocol !== 'https:') return null;
  if (!ALLOWED_DOMAINS.some(d => url.hostname.endsWith(d))) return null;
  return this.sanitizer.bypassSecurityTrustResourceUrl(urlString);
}
```

Learn more: https://shoulder.dev/learn/typescript/cwe-79/unsafe-pipe
- **Angular Unsafe Property Binding** [HIGH]: Property bindings like [innerHTML] and [src] with untrusted data enable XSS attacks
when Angular's sanitizer is bypassed or insufficient.
  - Remediation: Use DOMPurify to sanitize content before binding to innerHTML.

```typescript
import DOMPurify from 'dompurify';

export class UserProfileComponent {
  get sanitizedBio(): string {
    return DOMPurify.sanitize(this.userBio, {
      ALLOWED_TAGS: ['p', 'br', 'strong', 'em'],
      ALLOWED_ATTR: []
    });
  }
}
```

Learn more: https://shoulder.dev/learn/typescript/cwe-79/unsafe-property-binding
- **Cross-Site Scripting (XSS) via Response** [HIGH]: Detects user input flowing into HTTP responses without proper encoding or sanitization.
  - Remediation: Use template engines with auto-escaping or sanitize user input before output.

```javascript
const sanitizeHtml = require('sanitize-html');
const clean = sanitizeHtml(userInput);
res.send(`<div>${clean}</div>`);
```

Learn more: https://shoulder.dev/learn/javascript/cwe-79/xss

### Typescript (3 rules)

- **Angular Unsafe Security Context Bypass** [CRITICAL]: DomSanitizer.bypassSecurityTrust* methods completely disable XSS protection,
enabling script injection when used with any user-controllable data.
  - Remediation: Validate with strict allowlists before using bypassSecurityTrust methods.

```typescript
const ALLOWED_DOMAINS = ['youtube.com', 'vimeo.com'];

embedVideo(urlString: string): SafeResourceUrl | null {
  const url = new URL(urlString);
  if (url.protocol !== 'https:') return null;
  if (!ALLOWED_DOMAINS.some(d => url.hostname.endsWith(d))) return null;
  return this.sanitizer.bypassSecurityTrustResourceUrl(urlString);
}
```

Learn more: https://shoulder.dev/learn/typescript/cwe-79/unsafe-pipe
- **Angular Unsafe Property Binding** [HIGH]: Property bindings like [innerHTML] and [src] with untrusted data enable XSS attacks
when Angular's sanitizer is bypassed or insufficient.
  - Remediation: Use DOMPurify to sanitize content before binding to innerHTML.

```typescript
import DOMPurify from 'dompurify';

export class UserProfileComponent {
  get sanitizedBio(): string {
    return DOMPurify.sanitize(this.userBio, {
      ALLOWED_TAGS: ['p', 'br', 'strong', 'em'],
      ALLOWED_ATTR: []
    });
  }
}
```

Learn more: https://shoulder.dev/learn/typescript/cwe-79/unsafe-property-binding
- **Cross-Site Scripting (XSS) via Response** [HIGH]: Detects user input flowing into HTTP responses without proper encoding or sanitization.
  - Remediation: Use template engines with auto-escaping or sanitize user input before output.

```javascript
const sanitizeHtml = require('sanitize-html');
const clean = sanitizeHtml(userInput);
res.send(`<div>${clean}</div>`);
```

Learn more: https://shoulder.dev/learn/javascript/cwe-79/xss