import React from 'react';

function UserProfile({ username, bio }) {
  // WARNING: THIS IS VULNERABLE TO XSS! DO NOT USE IN PRODUCTION WITHOUT SANITIZATION.
  // Directly injecting untrusted user input into dangerouslySetInnerHTML without escaping
  // allows attackers to execute arbitrary scripts in the user's browser.
  // This component demonstrates a clear XSS vulnerability.

  return (
    <div>
      <h1>Welcome, {username}!</h1>
      <p>About you:</p>
      {/* 
        If 'bio' contains a malicious script (e.g., "<script>alert('XSS!')</script>"),
        it will execute when rendered here. This bypasses React's default escaping.
      */}
      <div dangerouslySetInnerHTML={{ __html: bio }} />
      
      <p>
        <strong>Note on React's Default Behavior:</strong> 
        If we rendered the bio as plain text using JSX interpolation (e.g., &lt;p&gt;Your default bio: {bio}&lt;/p&gt;),
        React would automatically escape HTML entities (&lt; becomes &amp;lt;, &gt; becomes &amp;gt;),
        preventing script execution. The vulnerability here stems specifically from 'dangerouslySetInnerHTML'.
      </p>
    </div>
  );
}

export default UserProfile;

// How to test this vulnerability:
// 1. Create a React app (e.g., with Create React App).
// 2. Replace App.js content with this UserProfile component.
// 3. In index.js or App.js, render the component like this:
//    &lt;UserProfile username="Attacker" bio="&lt;img src='x' onerror='alert(\&quot;XSS Attack!\&quot;)'&gt;" /&gt;
// 4. Run your React app. You should see an alert box pop up, demonstrating the XSS.
//    The 'bio' prop here is simulating untrusted user input.

import React from 'react';

function ArticleContent({ htmlContent }) {
  // WARNING: This component demonstrates the usage of dangerouslySetInnerHTML.
  // Direct usage with UNTRUSTED 'htmlContent' is a severe security risk.
  // Always ensure 'htmlContent' is thoroughly sanitized BEFORE reaching this point.

  const createMarkup = () => {
    // In a production application, 'htmlContent' MUST be sanitized here 
    // (e.g., using DOMPurify as shown in the next content part) 
    // if it originates from an untrusted source.
    // For this example, we're explicitly showing the raw HTML injection to highlight the risk.
    return { __html: htmlContent };
  };

  return (
    <div className="article-body">
      <h2>Article Body (Demonstrating dangerouslySetInnerHTML)</h2>
      <p>
        <strong>Unsanitized Raw HTML Output:</strong> (Observe carefully, this section is vulnerable if 'htmlContent' is untrusted)
      </p>
      {/* 
        If htmlContent contains something like "<script>alert('Malicious Code!')</script>", 
        it will execute directly within the browser when this component renders.
        This is the primary XSS vector React developers must actively mitigate.
      */}
      <div dangerouslySetInnerHTML={createMarkup()} />

      <p>
        <strong>React's Default Escaping (for comparison):</strong> 
        When text is rendered via standard JSX interpolation (e.g., &lt;p&gt;{htmlContent}&lt;/p&gt;),
        React automatically escapes HTML entities. This means &lt;script&gt; becomes &amp;lt;script&amp;gt;,
        rendering the script harmlessly as plain text, not executable code.
        This is React's fundamental, built-in XSS protection.
      </p>
      &lt;p&gt;{htmlContent}&lt;/p&gt; 
    </div>
  );
}

export default ArticleContent;

// How to test this:
// 1. Render &lt;ArticleContent htmlContent="&lt;p&gt;Hello &lt;strong&gt;World&lt;/strong&gt;!&lt;/p&gt;" /&gt; 
//    - Both sections render as expected.
// 2. Render &lt;ArticleContent htmlContent="&lt;img src='x' onerror='alert(\&quot;XSS via dangerouslySetInnerHTML!\&quot;)'&gt;" /&gt;
//    - The 'dangerouslySetInnerHTML' section will trigger the alert.
//    - The default JSX text interpolation will display the &lt;img&gt; tag as plain text, proving its safety.

// --- Code Example 1: Using DOMPurify for client-side HTML sanitization in React ---
import React from 'react';
import DOMPurify from 'dompurify'; // Ensure DOMPurify is installed: npm install dompurify

function SanitizedContentDisplay({ rawHtml }) {
  // Step 1: Sanitize the raw HTML string using DOMPurify.
  // DOMPurify is highly recommended for client-side HTML sanitization.
  // It removes any potentially malicious scripts, event handlers, and other dangerous elements.
  // We can configure DOMPurify to be as strict or permissive as needed.
  const sanitizedHtml = DOMPurify.sanitize(rawHtml, {
    USE_PROFILES: { html: true }, // Use a profile for common HTML elements like links, images, etc.
    FORBID_TAGS: ['style', 'iframe'], // Example: Explicitly forbid <style> and <iframe> tags
    FORBID_ATTR: ['id', 'class']      // Example: Forbid 'id' and 'class' attributes on all elements
  });

  // Step 2: Create a markup object suitable for dangerouslySetInnerHTML.
  const createMarkup = () => {
    return { __html: sanitizedHtml };
  };

  return (
    <div className="safe-content-display">
      <h2>Sanitized User-Generated Content Display</h2>
      <p>Content rendered using <strong>DOMPurify</strong> for XSS protection:</p>
      {/* 
        Now, rendering with dangerouslySetInnerHTML is significantly safer 
        because the content has been rigorously purified by DOMPurify. 
        Malicious scripts or attributes are stripped out before injection.
      */}
      <div dangerouslySetInnerHTML={createMarkup()} />
      
      <hr />
      <p><strong>Sanitized HTML Output:</strong> &lt;pre&gt;{sanitizedHtml}&lt;/pre&gt;</p>
      <p><strong>Original (Raw) HTML Input:</strong> &lt;pre&gt;{rawHtml}&lt;/pre&gt;</p>
    </div>
  );
}

export default SanitizedContentDisplay;

// How to test this:
// 1. In your React app (e.g., App.js), render:
//    &lt;SanitizedContentDisplay rawHtml="&lt;img src='x' onerror='alert(\&quot;XSS!\&quot;)'&gt;&lt;p&gt;Hello &lt;script&gt;alert('Malicious Script!')&lt;/script&gt;&lt;strong&gt;World&lt;/strong&gt;!&lt;/p&gt;&lt;style&gt;body{background:red;}&lt;/style&gt;" /&gt;
// 2. Observe the output: the 'onerror' attribute, '&lt;script&gt;' tag, and '&lt;style&gt;' tag will be removed or neutralized by DOMPurify.
//    The 'alert' will NOT execute.


// --- Code Example 2: Conceptual Content Security Policy (CSP) Header for a web server ---
// CSP is configured at the web server level (e.g., Nginx, Apache) or via a server-side framework (e.g., Express).
// It's not React component code, but a crucial HTTP header for overall application security.

/*
// Example: Nginx configuration snippet for a strict CSP
// Add this to your server block or location block in nginx.conf or a site-specific config file.

add_header Content-Security-Policy "
    default-src 'self';
    script-src 'self' https://cdn.jsdelivr.net;   # Allow scripts from your domain and trusted CDNs
    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; # Allow styles from your domain, inline styles (often needed for React development),
                                                                 # and Google Fonts. 'unsafe-inline' should be avoided in production if possible via nonces.
    img-src 'self' data:;                         # Allow images from your domain and data URIs
    font-src 'self' https://fonts.gstatic.com;    # Allow fonts from your domain and trusted font providers
    connect-src 'self' ws://localhost:*;          # Allow WebSocket connections (e.g., for development hot-reloading)
    object-src 'none';                            # Disallow &lt;object&gt;, &lt;embed&gt;, &lt;applet&gt; tags
    base-uri 'self';                              # Restrict the &lt;base&gt; tag
    form-action 'self';                           # Restrict form submissions to same origin
    frame-ancestors 'self';                       # Prevent clickjacking by disallowing embedding in iframes from other origins
    report-uri /csp-report-endpoint;              # Send violation reports to a monitoring endpoint
    block-all-mixed-content;
";

// Key considerations for CSP:
// - 'self': Refers to the origin from which the document is being served.
// - 'unsafe-inline': Often required for React's dynamic style injections during development.
//                    For production, aim for hash-based or nonce-based CSP for scripts and styles.
// - 'report-uri': Essential for monitoring CSP violations and refining your policy.
// - Test thoroughly: A poorly configured CSP can break your application.
*/

// --- Code Example 1: Setting Secure and HttpOnly cookies on the server-side ---
// This example uses Node.js with Express.js and 'cookie-parser' middleware.
// These flags are crucial for protecting session cookies from client-side script access.

/*
// First, install necessary packages: npm install express cookie-parser
import express from 'express';
import cookieParser from 'cookie-parser';

const app = express();
app.use(cookieParser());

// Example login route where a session cookie would be set
app.post('/api/login', (req, res) => {
  // Simulate user authentication logic here
  const authenticatedUserId = 'user123'; // Replace with actual user ID after authentication

  // Forging a secure session cookie with critical flags:
  res.cookie('session_token', `jwt_token_for_${authenticatedUserId}`, {
    httpOnly: true,                               // ACTIVATE: Prevents client-side JavaScript (including XSS) from accessing the cookie.
    secure: process.env.NODE_ENV === 'production', // ACTIVATE: Ensures the cookie is sent only over HTTPS. Crucial for production.
    sameSite: 'Lax',                               // OPTIMIZE: Mitigates Cross-Site Request Forgery (CSRF). 'Lax' is a good default.
    maxAge: 3600000,                               // Set cookie expiration (e.g., 1 hour in milliseconds)
    path: '/'                                      // Defines the path from which the cookie is accessible
  });

  res.status(200).json({ message: 'Login successful', userId: authenticatedUserId });
});

app.listen(3001, () => {
  console.log('Backend server with secure cookie example running on http://localhost:3001');
});

// How to test this (conceptually):
// 1. Run this Node.js server.
// 2. Perform a POST request to /api/login.
// 3. Inspect browser cookies: you will see 'session_token' but JavaScript code
//    in your React app (e.g., document.cookie) will NOT be able to read it due to HttpOnly.
*/

// --- Code Example 2: Implementing common HTTP Security Headers on the server-side ---
// This example uses Node.js with Express.js and the 'helmet' middleware.
// Helmet sets various HTTP headers to enhance overall application security.

/*
// First, install necessary packages: npm install express helmet
import express from 'express';
import helmet from 'helmet';

const app = express();

// ACTIVATE: Use Helmet middleware to set a collection of security-focused HTTP headers.
// This simplifies the process of configuring a robust set of defenses.
app.use(helmet());

// We can customize specific headers if the default Helmet configuration doesn't meet needs:
// For example, to explicitly set X-Frame-Options to DENY (prevents embedding in <iframe>):
app.use(helmet.frameguard({ action: 'deny' })); 

// To enforce X-Content-Type-Options to 'nosniff' (prevents MIME-sniffing attacks):
app.use(helmet.noSniff());

// X-XSS-Protection header (partially deprecated by CSP, but good for older browsers):
app.use(helmet.xssFilter());

// For more granular control over CSP, we can configure it within Helmet:
// app.use(helmet.contentSecurityPolicy({
//   directives: {
//     defaultSrc: ["'self'"],
//     scriptSrc: ["'self'", "'unsafe-inline'"], // 'unsafe-inline' often needed for React dev
//     // ... other CSP directives as discussed previously
//   },
// }));

app.get('/api/data', (req, res) => {
  res.status(200).json({ message: 'Secure data from API.' });
});

app.listen(3000, () => {
  console.log('Server with Helmet security headers running on http://localhost:3000');
});

// How to test this (conceptually):
// 1. Run this Node.js server.
// 2. Access /api/data in your browser or via a tool like Postman.
// 3. Inspect the HTTP response headers. You will see headers like:
//    - X-Frame-Options: DENY
//    - X-Content-Type-Options: nosniff
//    - X-XSS-Protection: 0 (or 1; Helmet's default is 0 for modern browsers as CSP is preferred)
//    - Referrer-Policy: no-referrer
//    - Content-Security-Policy (if explicitly configured via helmet.contentSecurityPolicy)
// These headers provide browser-level protections that complement your React application's security.
*/