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

  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
- 
- @Pipe({ name: 'safeHtml' })
- export class SafeHtmlPipe implements PipeTransform {
-   constructor(private sanitizer: DomSanitizer) {}
- 
-   transform(value: string): SafeHtml {
-     return this.sanitizer.bypassSecurityTrustHtml(value);
-   }
- }
- 
- // In template: <div [innerHTML]="userComment | safeHtml"></div>
+ import DOMPurify from 'dompurify';
+ 
+ @Pipe({ name: 'safeHtml' })
+ export class SafeHtmlPipe implements PipeTransform {
+   constructor(private sanitizer: DomSanitizer) {}
+ 
+   transform(value: string): SafeHtml {
+     const clean = DOMPurify.sanitize(value, {
+       ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a'],
+       ALLOWED_ATTR: ['href'],
+     });
+     return this.sanitizer.bypassSecurityTrustHtml(clean);
+   }
+ }
  

  import { Component, Input } from '@angular/core';
- 
- @Component({
-   selector: 'app-comment',
-   template: `
-     <div [innerHTML]="comment.body"></div>
-     <img [src]="comment.avatarUrl">
-     <a [href]="comment.profileLink">Profile</a>
-   `
- })
- export class CommentComponent {
-   @Input() comment: any;
+ import DOMPurify from 'dompurify';
+ 
+ @Component({
+   selector: 'app-comment',
+   template: `
+     <div [innerHTML]="sanitizedBody"></div>
+     <img [src]="safeAvatarUrl">
+     <a [href]="safeProfileLink">Profile</a>
+   `
+ })
+ export class CommentComponent {
+   @Input() comment: any;
+ 
+   get sanitizedBody(): string {
+     return DOMPurify.sanitize(this.comment.body, {
+       ALLOWED_TAGS: ['p', 'br', 'strong', 'em'],
+     });
+   }
+ 
+   get safeAvatarUrl(): string {
+     const url = new URL(this.comment.avatarUrl);
+     return url.protocol === 'https:' ? url.href : '/default-avatar.png';
+   }
+ 
+   get safeProfileLink(): string {
+     const url = new URL(this.comment.profileLink);
+     return url.protocol === 'https:' ? url.href : '#';
+   }
  }
  

  const http = require('http');
  const url = require('url');
- 
- http.createServer((req, res) => {
-   const name = url.parse(req.url, true).query.name;
-   // Vulnerable: user input directly in HTML
-   res.writeHead(200, { 'Content-Type': 'text/html' });
-   res.end(`<h1>Hello ${name}</h1>`);
+ const he = require('he');  // HTML entity encoder
+ 
+ http.createServer((req, res) => {
+   const name = url.parse(req.url, true).query.name;
+   // Safe: HTML-encode user input
+   const safeName = he.encode(name || '');
+   res.writeHead(200, { 'Content-Type': 'text/html' });
+   res.end(`<h1>Hello ${safeName}</h1>`);
  }).listen(3000);
  

- from flask import request, make_response
- 
- @app.route('/greet')
- def greet():
-     name = request.args.get('name')
-     return make_response(f'<h1>Hello {name}</h1>')
+ import html
+ from flask import request, render_template
+ 
+ @app.route('/greet')
+ def greet():
+     name = request.args.get('name')
+     return render_template('greet.html', name=name)