{
  "team": {
    "id": "123e4567-e89b-12d3-a456-426614174000",
    "name": "Acme Real Estate"
  },
  "user": {
    "id": "123e4567-e89b-12d3-a456-426614174001",
    "email": "[email protected]"
  },
  "person": {
    "id": "123e4567-e89b-12d3-a456-426614174000",
    "firstName": "Jane",
    "lastName": "Doe",
    "stage": {
      "name": "Lead"
    },
    "emails": [
      {
        "id": "email-uuid",
        "email": "[email protected]",
        "value": "[email protected]",
        "isPrimary": 1,
        "created_at": "2025-10-01T12:00:00Z",
        "updated_at": "2025-10-01T12:00:00Z"
      }
    ],
    "phones": [
      {
        "id": "phone-uuid",
        "phone": "+1-555-1234",
        "type": "mobile",
        "isPrimary": 1,
        "normalized": "15551234",
        "created_at": "2025-10-01T12:00:00Z",
        "updated_at": "2025-10-01T12:00:00Z"
      }
    ]
  },
  "timestamp": "2025-10-27T15:30:00Z"
}

{
  "team": {
    "id": "123e4567-e89b-12d3-a456-426614174000",
    "name": "Acme Real Estate"
  },
  "user": {
    "id": "123e4567-e89b-12d3-a456-426614174001",
    "email": "[email protected]"
  },
  "company": {
    "id": "123e4567-e89b-12d3-a456-426614174000",
    "name": "Acme Corporation",
    "industry": "Real Estate",
    "website": "https://acme.com",
    "description": "Leading real estate development company",
    "companySize": "201-500",
    "annualRevenue": 50000000,
    "foundedDate": "2010-01-15T00:00:00Z",
    "registrationNumber": "REG-12345",
    "taxId": "TAX-67890",
    "stage": {
      "name": "Customer"
    },
    "emails": [
      {
        "id": "email-uuid",
        "email": "[email protected]",
        "value": "[email protected]",
        "isPrimary": 1,
        "created_at": "2025-10-01T12:00:00Z",
        "updated_at": "2025-10-01T12:00:00Z"
      }
    ],
    "phones": [
      {
        "id": "phone-uuid",
        "phone": "+1-555-1234",
        "type": "work",
        "isPrimary": 1,
        "normalized": "15551234",
        "created_at": "2025-10-01T12:00:00Z",
        "updated_at": "2025-10-01T12:00:00Z"
      }
    ],
    "addresses": [
      {
        "id": "address-uuid",
        "type": "office",
        "street": "123 Main Street",
        "city": "San Francisco",
        "state": "CA",
        "code": "94105",
        "country": "United States",
        "isPrimary": 1
      }
    ]
  },
  "timestamp": "2025-10-27T15:30:00Z"
}

// JavaScript example
const data = parseContext(context);
if (data.person) {
  // This is a person view context
  displayPersonWidget(data.person);
} else if (data.company) {
  // This is a company view context
  displayCompanyWidget(data.company);
} else {
  // Invalid context - should not happen
  showError('Invalid context: missing person or company data');
}

# Python example
data = parse_context(context)
if 'person' in data:
    # This is a person view context
    render_person_widget(data['person'])
elif 'company' in data:
    # This is a company view context
    render_company_widget(data['company'])
else:
    # Invalid context
    return 'Invalid context', 400

const crypto = require('crypto');

function verifySignature(context, signature, secretKey) {
  // Compute HMAC SHA-256 of the Base64-encoded context
  const computedSignature = crypto
    .createHmac('sha256', secretKey)
    .update(context)
    .digest('hex');

  // Use constant-time comparison to prevent timing attacks
  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(computedSignature)
  );
}

function parseContext(contextBase64) {
  const contextJson = Buffer.from(contextBase64, 'base64').toString('utf-8');
  return JSON.parse(contextJson);
}

// Usage in your widget
const urlParams = new URLSearchParams(window.location.search);
const context = urlParams.get('context');
const signature = urlParams.get('signature');

if (verifySignature(context, signature, YOUR_SECRET_KEY)) {
  const data = parseContext(context);
  // Check if this is a person or company context
  if (data.person) {
    console.log('Person:', data.person.firstName, data.person.lastName);
  } else if (data.company) {
    console.log('Company:', data.company.name);
  }
} else {
  console.error('Invalid signature!');
}

import hmac
import hashlib
import base64
import json
from flask import request

def verify_signature(context, signature, secret_key):
    """Verify HMAC SHA-256 signature"""
    computed_signature = hmac.new(
        secret_key.encode('utf-8'),
        context.encode('utf-8'),
        hashlib.sha256
    ).hexdigest()

    # Use constant-time comparison
    return hmac.compare_digest(signature, computed_signature)

def parse_context(context_base64):
    """Decode and parse the context"""
    context_json = base64.b64decode(context_base64).decode('utf-8')
    return json.loads(context_json)

@app.route('/widget')
def widget():
    context = request.args.get('context')
    signature = request.args.get('signature')

    if not verify_signature(context, signature, YOUR_SECRET_KEY):
        return 'Invalid signature', 403

    data = parse_context(context)
    # Check if this is a person or company context
    if 'person' in data:
        contact = data['person']
        contact_type = 'person'
    elif 'company' in data:
        contact = data['company']
        contact_type = 'company'
    else:
        return 'Invalid context', 400

    return render_template('widget.html', contact=contact, contact_type=contact_type)

require 'openssl'
require 'base64'
require 'json'

def verify_signature(context, signature, secret_key)
  computed_signature = OpenSSL::HMAC.hexdigest(
    'sha256',
    secret_key,
    context
  )

  # Use constant-time comparison
  Rack::Utils.secure_compare(signature, computed_signature)
end

def parse_context(context_base64)
  context_json = Base64.strict_decode64(context_base64)
  JSON.parse(context_json)
end

# Usage in Sinatra/Rails controller
context = params[:context]
signature = params[:signature]

if verify_signature(context, signature, YOUR_SECRET_KEY)
  data = parse_context(context)
  # Check if this is a person or company context
  if data['person']
    @contact = data['person']
    @contact_type = 'person'
  elsif data['company']
    @contact = data['company']
    @contact_type = 'company'
  else
    halt 400, 'Invalid context'
  end
  render :widget
else
  halt 403, 'Invalid signature'
end

<?php
function verifySignature($context, $signature, $secretKey) {
    $computedSignature = hash_hmac('sha256', $context, $secretKey);
    return hash_equals($signature, $computedSignature);
}

function parseContext($contextBase64) {
    $contextJson = base64_decode($contextBase64);
    return json_decode($contextJson, true);
}

// Usage
$context = $_GET['context'];
$signature = $_GET['signature'];

if (verifySignature($context, $signature, YOUR_SECRET_KEY)) {
    $data = parseContext($context);
    // Check if this is a person or company context
    if (isset($data['person'])) {
        $contact = $data['person'];
        echo "Person: " . $contact['firstName'] . " " . $contact['lastName'];
    } elseif (isset($data['company'])) {
        $contact = $data['company'];
        echo "Company: " . $contact['name'];
    }
} else {
    http_response_code(403);
    echo "Invalid signature";
}
?>

// ❌ BAD: Using context without verification
const data = parseContext(context);

// ✅ GOOD: Verify first, then use
if (verifySignature(context, signature, secretKey)) {
  const data = parseContext(context);
}

// ❌ BAD: Vulnerable to timing attacks
if (signature === computedSignature) { ... }

// ✅ GOOD: Constant-time comparison
if (crypto.timingSafeEqual(signature, computedSignature)) { ... }

function isContextFresh(context, maxAgeSeconds = 300) {
  const timestamp = new Date(context.timestamp);
  const now = new Date();
  const ageSeconds = (now - timestamp) / 1000;
  return ageSeconds <= maxAgeSeconds;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Property Recommendations</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: white;
        }
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        .error {
            background: #fee;
            border: 1px solid #fcc;
            padding: 15px;
            border-radius: 4px;
            color: #c33;
        }
        .contact-header {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .property-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            transition: box-shadow 0.2s;
        }
        .property-card:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="loading">Loading...</div>
    </div>

    <script>
        const SECRET_KEY = 'YOUR_SECRET_KEY_HERE';

        async function initWidget() {
            const urlParams = new URLSearchParams(window.location.search);
            const context = urlParams.get('context');
            const signature = urlParams.get('signature');

            if (!context || !signature) {
                showError('Missing context or signature');
                return;
            }

            if (!await verifySignature(context, signature)) {
                showError('Invalid signature');
                return;
            }

            const data = parseContext(context);
            renderWidget(data);
        }

        async function verifySignature(context, signature) {
            const encoder = new TextEncoder();
            const key = await crypto.subtle.importKey(
                'raw',
                encoder.encode(SECRET_KEY),
                { name: 'HMAC', hash: 'SHA-256' },
                false,
                ['sign']
            );

            const signatureBuffer = await crypto.subtle.sign(
                'HMAC',
                key,
                encoder.encode(context)
            );

            const computed = Array.from(new Uint8Array(signatureBuffer))
                .map(b => b.toString(16).padStart(2, '0'))
                .join('');

            return signature === computed;
        }

        function parseContext(contextBase64) {
            const contextJson = atob(contextBase64);
            return JSON.parse(contextJson);
        }

        function renderWidget(data) {
            const app = document.getElementById('app');
            let contact, contactType, contactName;

            // Determine if this is person or company context
            if (data.person) {
                contact = data.person;
                contactType = 'person';
                contactName = `${contact.firstName} ${contact.lastName}`;
            } else if (data.company) {
                contact = data.company;
                contactType = 'company';
                contactName = contact.name;
            } else {
                showError('Invalid context: missing person or company data');
                return;
            }

            app.innerHTML = `
                <div class="contact-header">
                    <h2>${contactName}</h2>
                    <p>Type: ${contactType === 'person' ? 'Person' : 'Company'}</p>
                    <p>Stage: ${contact.stage?.name || 'Unknown'}</p>
                    <p>Agent: ${data.user.email}</p>
                    ${contactType === 'company' ? `<p>Industry: ${contact.industry || 'N/A'}</p>` : ''}
                </div>

                <h3>Recommended Properties</h3>
                <div class="property-card">
                    <h4>Beautiful 3BR Home</h4>
                    <p>123 Main St, Anytown, USA</p>
                    <p><strong>$450,000</strong></p>
                    <button onclick="viewProperty('prop-123')">View Details</button>
                </div>

                <div class="property-card">
                    <h4>Spacious 4BR Colonial</h4>
                    <p>456 Oak Ave, Anytown, USA</p>
                    <p><strong>$575,000</strong></p>
                    <button onclick="viewProperty('prop-456')">View Details</button>
                </div>
            `;
        }

        function showError(message) {
            const app = document.getElementById('app');
            app.innerHTML = `<div class="error">${message}</div>`;
        }

        function viewProperty(id) {
            alert('Viewing property: ' + id);
            // In a real widget, you'd navigate or show details
        }

        // Initialize on page load
        initWidget();
    </script>
</body>
</html>

const crypto = require('crypto');

// Example: Person context
const personContext = {
  team: {
    id: "team-uuid-here",
    name: "Test Team"
  },
  user: {
    id: "user-uuid-here",
    email: "[email protected]"
  },
  person: {
    id: "123e4567-e89b-12d3-a456-426614174000",
    firstName: "Test",
    lastName: "User",
    stage: { name: "Lead" },
    emails: [{ value: "[email protected]", isPrimary: 1 }],
    phones: [{ phone: "+1-555-1234", type: "mobile", isPrimary: 1, normalized: "15551234" }]
  },
  timestamp: new Date().toISOString()
};

// Example: Company context
const companyContext = {
  team: {
    id: "team-uuid-here",
    name: "Test Team"
  },
  user: {
    id: "user-uuid-here",
    email: "[email protected]"
  },
  company: {
    id: "123e4567-e89b-12d3-a456-426614174000",
    name: "Test Company",
    industry: "Real Estate",
    website: "https://test.com",
    stage: { name: "Lead" },
    emails: [{ value: "[email protected]", isPrimary: 1 }],
    phones: [{ phone: "+1-555-1234", type: "work", isPrimary: 1, normalized: "15551234" }],
    addresses: [{
      type: "office",
      street: "123 Main St",
      city: "San Francisco",
      state: "CA",
      code: "94105",
      country: "United States",
      isPrimary: 1
    }]
  },
  timestamp: new Date().toISOString()
};

function generateTestUrl(context) {
  const contextBase64 = Buffer.from(JSON.stringify(context)).toString('base64');
  const signature = crypto.createHmac('sha256', YOUR_SECRET_KEY)
    .update(contextBase64)
    .digest('hex');
  return `http://localhost:3000/widget?context=${contextBase64}&signature=${signature}`;
}

console.log('Person view:', generateTestUrl(personContext));
console.log('Company view:', generateTestUrl(companyContext));