Spaces:

Naresh1993
/

deepsitetest

Running

File size: 28,750 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Salesforce PII Analyzer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .pii-high {
            background-color: #fee2e2;
            border-left: 4px solid #ef4444;
        }
        
        .pii-medium {
            background-color: #fef3c7;
            border-left: 4px solid #f59e0b;
        }
        
        .pii-low {
            background-color: #dbeafe;
            border-left: 4px solid #3b82f6;
        }
        
        .slide-in {
            animation: slideIn 0.3s ease-out forwards;
        }
        
        @keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .progress-bar {
            height: 6px;
            background-color: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background-color: #10b981;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <header class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800 flex items-center">
                        <i class="fas fa-shield-alt text-blue-500 mr-3"></i>
                        Salesforce PII Analyzer
                    </h1>
                    <p class="text-gray-600 mt-2">Identify potential Personally Identifiable Information in your Salesforce org</p>
                </div>
                <div id="loginButton" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md transition-colors cursor-pointer flex items-center">
                    <i class="fab fa-salesforce mr-2"></i>
                    Login with Salesforce
                </div>
                <div id="userInfo" class="hidden items-center">
                    <img id="userPhoto" class="w-10 h-10 rounded-full mr-3" src="" alt="User photo">
                    <div>
                        <div id="userName" class="font-medium text-gray-800"></div>
                        <div id="orgName" class="text-sm text-gray-500"></div>
                    </div>
                    <button id="logoutButton" class="ml-4 text-gray-500 hover:text-gray-700">
                        <i class="fas fa-sign-out-alt"></i>
                    </button>
                </div>
            </div>
        </header>

        <div id="appContent" class="hidden">
            <div class="bg-white rounded-xl shadow-md p-6 mb-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">Org Analysis</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                        <div class="text-gray-500 text-sm mb-1">Total Objects</div>
                        <div id="totalObjects" class="text-2xl font-bold text-gray-800">0</div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                        <div class="text-gray-500 text-sm mb-1">Potential PII Fields</div>
                        <div id="piiFields" class="text-2xl font-bold text-red-600">0</div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                        <div class="text-gray-500 text-sm mb-1">Analysis Progress</div>
                        <div class="progress-bar mt-2">
                            <div id="progressFill" class="progress-fill" style="width: 0%"></div>
                        </div>
                        <div id="progressText" class="text-sm text-gray-600 mt-1 text-right">0%</div>
                    </div>
                </div>
                
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-medium text-gray-700">Object Analysis Results</h3>
                    <div class="relative">
                        <select id="filterSelect" class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="all">All Objects</option>
                            <option value="pii">Only PII Objects</option>
                            <option value="standard">Standard Objects</option>
                            <option value="custom">Custom Objects</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                            <i class="fas fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                </div>
                
                <div id="resultsContainer" class="space-y-3">
                    <!-- Results will be populated here -->
                </div>
            </div>
            
            <div id="piiGuidance" class="bg-white rounded-xl shadow-md p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">PII Identification Guidance</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="p-4 rounded-lg pii-high">
                        <div class="flex items-center mb-2">
                            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                            <h3 class="font-medium">High Risk PII</h3>
                        </div>
                        <p class="text-sm text-gray-700">Fields that clearly contain personal data like SSN, credit card numbers, full names, etc.</p>
                    </div>
                    <div class="p-4 rounded-lg pii-medium">
                        <div class="flex items-center mb-2">
                            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                            <h3 class="font-medium">Potential PII</h3>
                        </div>
                        <p class="text-sm text-gray-700">Fields that might contain personal data based on naming patterns or field types.</p>
                    </div>
                    <div class="p-4 rounded-lg pii-low">
                        <div class="flex items-center mb-2">
                            <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                            <h3 class="font-medium">Low Risk</h3>
                        </div>
                        <p class="text-sm text-gray-700">Fields that are unlikely to contain personal data but should still be reviewed.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="loginState" class="flex flex-col items-center justify-center py-20">
            <div class="bg-white rounded-xl shadow-md p-8 max-w-md w-full text-center">
                <i class="fab fa-salesforce text-5xl text-blue-500 mb-4"></i>
                <h2 class="text-2xl font-bold text-gray-800 mb-2">Salesforce PII Analyzer</h2>
                <p class="text-gray-600 mb-6">Login with your Salesforce account to analyze your org for potential Personally Identifiable Information (PII) data.</p>
                <div id="loginButtonCenter" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md transition-colors cursor-pointer flex items-center justify-center mx-auto w-full max-w-xs">
                    <i class="fab fa-salesforce mr-2"></i>
                    Login with Salesforce
                </div>
            </div>
        </div>
        
        <div id="loadingState" class="hidden flex flex-col items-center justify-center py-20">
            <div class="bg-white rounded-xl shadow-md p-8 max-w-md w-full text-center">
                <div class="loading-spinner mx-auto mb-4"></div>
                <h2 class="text-xl font-bold text-gray-800 mb-2" id="loadingText">Connecting to Salesforce...</h2>
                <p class="text-gray-600" id="loadingSubtext">Please wait while we authenticate your session.</p>
            </div>
        </div>
    </div>

    <script>
        // Configuration
        const CLIENT_ID = '3MVG9pRzvMkjMb6lZlt3YjDQwe2tA1wWE4jHVJ.VZJj4i8T6gJQBWmwdVJZqgNrm4sY.sp0SJQCH2TfULXjG_';
        const CALLBACK_URL = 'https://login.salesforce.com/services/oauth2/success';
        const LOGIN_URL = 'https://login.salesforce.com';
        const API_VERSION = '56.0';
        
        // DOM elements
        const loginButton = document.getElementById('loginButton');
        const loginButtonCenter = document.getElementById('loginButtonCenter');
        const logoutButton = document.getElementById('logoutButton');
        const userInfo = document.getElementById('userInfo');
        const userName = document.getElementById('userName');
        const userPhoto = document.getElementById('userPhoto');
        const orgName = document.getElementById('orgName');
        const appContent = document.getElementById('appContent');
        const loginState = document.getElementById('loginState');
        const loadingState = document.getElementById('loadingState');
        const loadingText = document.getElementById('loadingText');
        const loadingSubtext = document.getElementById('loadingSubtext');
        const resultsContainer = document.getElementById('resultsContainer');
        const totalObjects = document.getElementById('totalObjects');
        const piiFields = document.getElementById('piiFields');
        const progressFill = document.getElementById('progressFill');
        const progressText = document.getElementById('progressText');
        const filterSelect = document.getElementById('filterSelect');
        
        // State
        let accessToken = null;
        let instanceUrl = null;
        let userId = null;
        let orgId = null;
        let objectsData = [];
        let piiCount = 0;
        
        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            // Check for OAuth response in URL
            if (window.location.hash) {
                handleOAuthResponse();
            }
            
            // Set up event listeners
            loginButton.addEventListener('click', initiateOAuth);
            loginButtonCenter.addEventListener('click', initiateOAuth);
            logoutButton.addEventListener('click', logout);
            filterSelect.addEventListener('change', filterResults);
        });
        
        // OAuth Functions
        function initiateOAuth() {
            const authUrl = `${LOGIN_URL}/services/oauth2/authorize?response_type=token` +
                           `&client_id=${CLIENT_ID}` +
                           `&redirect_uri=${encodeURIComponent(CALLBACK_URL)}` +
                           `&scope=api%20refresh_token%20web` +
                           `&prompt=login%20consent`;
            
            // Show loading state
            loginState.classList.add('hidden');
            loadingState.classList.remove('hidden');
            loadingText.textContent = 'Redirecting to Salesforce...';
            loadingSubtext.textContent = 'Please login with your Salesforce credentials';
            
            // Redirect to Salesforce login
            window.location.href = authUrl;
        }
        
        function handleOAuthResponse() {
            const hash = window.location.hash.substring(1);
            const params = new URLSearchParams(hash);
            
            if (params.has('access_token')) {
                // Get OAuth parameters
                accessToken = params.get('access_token');
                instanceUrl = params.get('instance_url');
                userId = params.get('id').split('/').pop();
                orgId = params.get('id').split('/')[4];
                
                // Clean up URL
                history.replaceState({}, document.title, window.location.pathname);
                
                // Show loading state
                loginState.classList.add('hidden');
                loadingState.classList.remove('hidden');
                loadingText.textContent = 'Loading org data...';
                loadingSubtext.textContent = 'Fetching object metadata from your Salesforce org';
                
                // Fetch user info and start analysis
                fetchUserInfo();
            } else if (params.has('error')) {
                // Handle OAuth error
                console.error('OAuth error:', params.get('error_description'));
                showLoginState();
            }
        }
        
        async function fetchUserInfo() {
            try {
                const response = await fetch(`${instanceUrl}/services/data/v${API_VERSION}/query?q=` + 
                    encodeURIComponent(`SELECT Name, Username, SmallPhotoUrl FROM User WHERE Id = '${userId}'`), {
                    headers: {
                        'Authorization': `Bearer ${accessToken}`
                    }
                });
                
                const data = await response.json();
                
                if (data.records && data.records.length > 0) {
                    const user = data.records[0];
                    
                    // Update UI with user info
                    userName.textContent = user.Name;
                    userPhoto.src = user.SmallPhotoUrl;
                    orgName.textContent = `Org: ${orgId}`;
                    userInfo.classList.remove('hidden');
                    loginButton.classList.add('hidden');
                    
                    // Start analysis
                    analyzeOrg();
                }
            } catch (error) {
                console.error('Error fetching user info:', error);
                showLoginState();
            }
        }
        
        // Analysis Functions
        async function analyzeOrg() {
            try {
                loadingText.textContent = 'Analyzing your Salesforce org...';
                loadingSubtext.textContent = 'This may take a few moments depending on your org size';
                
                // Get all objects in the org
                const objectsResponse = await fetch(`${instanceUrl}/services/data/v${API_VERSION}/sobjects`, {
                    headers: {
                        'Authorization': `Bearer ${accessToken}`
                    }
                });
                
                const objects = await objectsResponse.json();
                objectsData = objects.sobjects.filter(obj => obj.queryable && !obj.name.endsWith('ChangeEvent'));
                totalObjects.textContent = objectsData.length;
                
                // Update progress
                updateProgress(0);
                
                // Analyze each object
                for (let i = 0; i < objectsData.length; i++) {
                    const obj = objectsData[i];
                    await analyzeObject(obj);
                    updateProgress(((i + 1) / objectsData.length) * 100);
                }
                
                // Show results
                loadingState.classList.add('hidden');
                appContent.classList.remove('hidden');
                renderResults();
            } catch (error) {
                console.error('Error analyzing org:', error);
                loadingText.textContent = 'Error analyzing org';
                loadingSubtext.textContent = error.message;
            }
        }
        
        async function analyzeObject(obj) {
            try {
                // Get object describe
                const describeResponse = await fetch(`${instanceUrl}/services/data/v${API_VERSION}/sobjects/${obj.name}/describe`, {
                    headers: {
                        'Authorization': `Bearer ${accessToken}`
                    }
                });
                
                const describe = await describeResponse.json();
                obj.fields = describe.fields;
                
                // Analyze fields for PII
                obj.piiFields = [];
                obj.piiScore = 0;
                
                for (const field of obj.fields) {
                    const piiRisk = detectPII(field);
                    if (piiRisk.level > 0) {
                        obj.piiFields.push({
                            ...field,
                            piiRisk
                        });
                        
                        // Add to PII count if high or medium risk
                        if (piiRisk.level >= 2) {
                            piiCount++;
                            piiFields.textContent = piiCount;
                        }
                    }
                }
                
                // Calculate object PII score (0-100)
                if (obj.piiFields.length > 0) {
                    const highRiskCount = obj.piiFields.filter(f => f.piiRisk.level === 3).length;
                    const medRiskCount = obj.piiFields.filter(f => f.piiRisk.level === 2).length;
                    obj.piiScore = Math.min(100, (highRiskCount * 5) + (medRiskCount * 2));
                }
            } catch (error) {
                console.error(`Error analyzing object ${obj.name}:`, error);
                obj.error = error.message;
            }
        }
        
        function detectPII(field) {
            const fieldName = field.name.toLowerCase();
            const fieldLabel = field.label.toLowerCase();
            const fieldType = field.type;
            
            // Common PII patterns
            const piiPatterns = {
                high: [
                    'ssn', 'social', 'security', 'taxid', 'tax id', 'creditcard', 'credit card', 
                    'cardnumber', 'card number', 'passport', 'drivinglicense', 'driving license',
                    'bankaccount', 'bank account', 'routingnumber', 'routing number', 'dob', 
                    'dateofbirth', 'date of birth', 'mothersmaiden', 'mothers maiden'
                ],
                medium: [
                    'name', 'firstname', 'first name', 'lastname', 'last name', 'middlename', 
                    'middle name', 'email', 'phone', 'mobile', 'address', 'street', 'city', 
                    'state', 'zip', 'postalcode', 'postal code', 'country', 'gender', 'race', 
                    'ethnicity', 'salary', 'income', 'health', 'medical', 'insurance'
                ]
            };
            
            // Check for high risk PII
            for (const pattern of piiPatterns.high) {
                if (fieldName.includes(pattern) || fieldLabel.includes(pattern)) {
                    return {
                        level: 3,
                        reason: `Field name suggests high risk PII (${pattern})`
                    };
                }
            }
            
            // Check for medium risk PII
            for (const pattern of piiPatterns.medium) {
                if (fieldName.includes(pattern) || fieldLabel.includes(pattern)) {
                    return {
                        level: 2,
                        reason: `Field name suggests potential PII (${pattern})`
                    };
                }
            }
            
            // Check field types that might contain PII
            if (fieldType === 'email') {
                return {
                    level: 2,
                    reason: 'Email field type may contain PII'
                };
            }
            
            if (fieldType === 'phone' || fieldType === 'textarea') {
                return {
                    level: 1,
                    reason: `${fieldType} field type may contain PII`
                };
            }
            
            // No PII detected
            return {
                level: 0,
                reason: 'No obvious PII indicators'
            };
        }
        
        // UI Functions
        function updateProgress(percent) {
            progressFill.style.width = `${percent}%`;
            progressText.textContent = `${Math.round(percent)}%`;
        }
        
        function renderResults() {
            resultsContainer.innerHTML = '';
            
            // Sort objects by PII score (descending)
            const sortedObjects = [...objectsData].sort((a, b) => b.piiScore - a.piiScore);
            
            for (const obj of sortedObjects) {
                if (obj.piiFields.length > 0) {
                    const objectCard = document.createElement('div');
                    objectCard.className = 'bg-gray-50 rounded-lg border border-gray-200 overflow-hidden slide-in';
                    
                    // Object header
                    const header = document.createElement('div');
                    header.className = 'flex items-center justify-between p-4 bg-white border-b border-gray-200 cursor-pointer';
                    header.innerHTML = `
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full ${getPiiColorClass(obj.piiScore)} mr-3"></div>
                            <div>
                                <h4 class="font-medium text-gray-800">${obj.label} (${obj.name})</h4>
                                <div class="text-xs text-gray-500">${obj.piiFields.length} potential PII fields</div>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <span class="text-sm font-medium ${getPiiTextColorClass(obj.piiScore)} mr-2">
                                PII Score: ${obj.piiScore}
                            </span>
                            <i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
                        </div>
                    `;
                    
                    // Fields container (initially hidden)
                    const fieldsContainer = document.createElement('div');
                    fieldsContainer.className = 'hidden p-4 bg-white';
                    
                    // Add fields to container
                    obj.piiFields.sort((a, b) => b.piiRisk.level - a.piiRisk.level).forEach(field => {
                        const fieldDiv = document.createElement('div');
                        fieldDiv.className = `p-3 mb-2 rounded-md ${getPiiFieldClass(field.piiRisk.level)}`;
                        fieldDiv.innerHTML = `
                            <div class="flex justify-between items-start">
                                <div>
                                    <div class="font-medium">${field.label} (${field.name})</div>
                                    <div class="text-sm text-gray-600 mt-1">${field.piiRisk.reason}</div>
                                </div>
                                <span class="text-xs font-medium px-2 py-1 rounded-full ${getPiiRiskBadgeClass(field.piiRisk.level)}">
                                    ${getPiiRiskLabel(field.piiRisk.level)}
                                </span>
                            </div>
                            <div class="text-xs text-gray-500 mt-2">
                                <span class="font-medium">Type:</span> ${field.type} | 
                                <span class="font-medium">Length:</span> ${field.length || 'N/A'} | 
                                <span class="font-medium">API Name:</span> ${field.name}
                            </div>
                        `;
                        fieldsContainer.appendChild(fieldDiv);
                    });
                    
                    // Toggle fields visibility on header click
                    header.addEventListener('click', () => {
                        const icon = header.querySelector('i');
                        fieldsContainer.classList.toggle('hidden');
                        icon.classList.toggle('fa-chevron-down');
                        icon.classList.toggle('fa-chevron-up');
                    });
                    
                    objectCard.appendChild(header);
                    objectCard.appendChild(fieldsContainer);
                    resultsContainer.appendChild(objectCard);
                }
            }
        }
        
        function filterResults() {
            const filterValue = filterSelect.value;
            const allCards = resultsContainer.querySelectorAll('.bg-gray-50');
            
            allCards.forEach(card => {
                const objectName = card.querySelector('h4').textContent;
                const isStandard = !objectName.includes('__c');
                const hasPII = !card.querySelector('.hidden');
                
                switch (filterValue) {
                    case 'all':
                        card.style.display = 'block';
                        break;
                    case 'pii':
                        card.style.display = hasPII ? 'block' : 'none';
                        break;
                    case 'standard':
                        card.style.display = isStandard ? 'block' : 'none';
                        break;
                    case 'custom':
                        card.style.display = isStandard ? 'none' : 'block';
                        break;
                }
            });
        }
        
        function getPiiColorClass(score) {
            if (score >= 60) return 'bg-red-500';
            if (score >= 30) return 'bg-yellow-500';
            return 'bg-blue-500';
        }
        
        function getPiiTextColorClass(score) {
            if (score >= 60) return 'text-red-600';
            if (score >= 30) return 'text-yellow-600';
            return 'text-blue-600';
        }
        
        function getPiiFieldClass(level) {
            if (level === 3) return 'pii-high';
            if (level === 2) return 'pii-medium';
            return 'pii-low';
        }
        
        function getPiiRiskBadgeClass(level) {
            if (level === 3) return 'bg-red-100 text-red-800';
            if (level === 2) return 'bg-yellow-100 text-yellow-800';
            return 'bg-blue-100 text-blue-800';
        }
        
        function getPiiRiskLabel(level) {
            if (level === 3) return 'High Risk';
            if (level === 2) return 'Medium Risk';
            return 'Low Risk';
        }
        
        function showLoginState() {
            loadingState.classList.add('hidden');
            appContent.classList.add('hidden');
            loginState.classList.remove('hidden');
            loginButton.classList.remove('hidden');
            userInfo.classList.add('hidden');
        }
        
        function logout() {
            // Clear OAuth data
            accessToken = null;
            instanceUrl = null;
            userId = null;
            orgId = null;
            objectsData = [];
            piiCount = 0;
            
            // Reset UI
            showLoginState();
            totalObjects.textContent = '0';
            piiFields.textContent = '0';
            progressFill.style.width = '0%';
            progressText.textContent = '0%';
        }
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Naresh1993/deepsitetest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>