-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpopup-monolithic-backup.js
More file actions
4550 lines (3873 loc) ยท 158 KB
/
popup-monolithic-backup.js
File metadata and controls
4550 lines (3873 loc) ยท 158 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
// P1-NINTH-4 FIX: Validate extension context to prevent clickjacking
(function() {
'use strict';
// Detect if popup.html was opened in invalid context (not via extension icon)
if (window.opener || window.location !== window.parent.location) {
// Opened by another window or iframed (shouldn't be possible but check anyway)
document.body.innerHTML = `
<div style="padding: 20px; text-align: center; font-family: system-ui, -apple-system, sans-serif;">
<h1>โ ๏ธ Invalid Context</h1>
<p>This page must be opened via the extension icon.</p>
<p>Please close this window and click the Hera icon in your browser toolbar.</p>
</div>
`;
throw new Error('Popup opened in invalid context');
}
})();
// Security utilities for safe DOM manipulation and JWT processing
// P0-FOURTEENTH-1 FIX: All user-controlled data MUST use these helpers
// 14TH REVIEW: Fixed XSS vulnerabilities in updateSecurityAnalysis() and updateConsentTab()
// - Line 2734: JSON.stringify output now uses textContent instead of innerHTML
// - Line 2771-2831: Security issues now built with createElement() instead of template strings
const DOMSecurity = {
// Safe HTML sanitization
sanitizeHTML: (str) => {
if (typeof str !== 'string') return '';
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/\//g, '/');
},
// Safe text content setting
setTextContent: (element, text) => {
if (!element) return;
element.textContent = typeof text === 'string' ? text : String(text);
},
// Safe HTML creation with sanitization
createSafeElement: (tag, content, attributes = {}) => {
const element = document.createElement(tag);
if (content) {
element.textContent = content;
}
Object.entries(attributes).forEach(([key, value]) => {
if (key === 'className') {
element.className = value; // Class names don't need HTML escaping
} else if (key === 'title') {
element.setAttribute(key, value); // Title attributes with URLs don't need HTML escaping
} else {
element.setAttribute(key, DOMSecurity.sanitizeHTML(value));
}
});
return element;
},
// Clear and append children safely
replaceChildren: (parent, ...children) => {
if (!parent) return;
parent.innerHTML = '';
children.forEach(child => {
if (child instanceof Node) {
parent.appendChild(child);
}
});
}
};
// Secure JWT utilities
const JWTSecurity = {
// Validate JWT structure before processing
isValidJWTStructure: (token) => {
if (typeof token !== 'string') return false;
const parts = token.split('.');
return parts.length === 3 && parts.every(part => part.length > 0);
},
// Safe Base64 URL decoding
safeBase64UrlDecode: (str) => {
try {
// Validate input
if (typeof str !== 'string' || str.length === 0) {
throw new Error('Invalid input for Base64 URL decoding');
}
// Convert Base64 URL to Base64
let base64 = str.replace(/-/g, '+').replace(/_/g, '/');
// Add padding if needed
const padding = base64.length % 4;
if (padding === 2) {
base64 += '==';
} else if (padding === 3) {
base64 += '=';
}
// Validate Base64 format
if (!/^[A-Za-z0-9+/]*={0,2}$/.test(base64)) {
throw new Error('Invalid Base64 format');
}
const decoded = atob(base64);
// Validate JSON structure
const parsed = JSON.parse(decoded);
return parsed;
} catch (error) {
console.error('JWT decode error:', error);
return null;
}
},
// Safely parse JWT with validation
parseJWT: (token) => {
if (!JWTSecurity.isValidJWTStructure(token)) {
return { error: 'Invalid JWT structure' };
}
const [headerB64, payloadB64, signature] = token.split('.');
const header = JWTSecurity.safeBase64UrlDecode(headerB64);
const payload = JWTSecurity.safeBase64UrlDecode(payloadB64);
if (!header || !payload) {
return { error: 'Failed to decode JWT parts' };
}
return {
header,
payload,
signature,
raw: token
};
},
// Validate JWT claims for security issues
validateJWTSecurity: (parsedJWT) => {
const issues = [];
if (parsedJWT.error) {
return [{ severity: 'HIGH', type: 'JWT_PARSE_ERROR', message: parsedJWT.error }];
}
// Check for dangerous algorithms
if (parsedJWT.header.alg === 'none') {
issues.push({
severity: 'CRITICAL',
type: 'JWT_ALG_NONE',
message: 'JWT uses "none" algorithm - signature verification bypassed'
});
}
// Check for weak algorithms
const weakAlgs = ['HS256', 'RS256'];
if (weakAlgs.includes(parsedJWT.header.alg)) {
issues.push({
severity: 'MEDIUM',
type: 'JWT_WEAK_ALG',
message: `JWT uses potentially weak algorithm: ${parsedJWT.header.alg}`
});
}
// Check expiration
if (!parsedJWT.payload.exp) {
issues.push({
severity: 'HIGH',
type: 'JWT_NO_EXPIRATION',
message: 'JWT does not have expiration claim (exp)'
});
} else {
const expTime = parsedJWT.payload.exp * 1000;
const now = Date.now();
if (expTime < now) {
issues.push({
severity: 'MEDIUM',
type: 'JWT_EXPIRED',
message: 'JWT is expired'
});
}
}
// Check for missing critical claims
if (!parsedJWT.payload.iss) {
issues.push({
severity: 'MEDIUM',
type: 'JWT_NO_ISSUER',
message: 'JWT missing issuer claim (iss)'
});
}
if (!parsedJWT.payload.aud) {
issues.push({
severity: 'MEDIUM',
type: 'JWT_NO_AUDIENCE',
message: 'JWT missing audience claim (aud)'
});
}
return issues;
}
};
// Time formatting utilities
const TimeUtils = {
// Format time with relative display and full timestamp on hover
formatTimeWithRelative: (timestamp) => {
const date = new Date(timestamp);
const now = new Date();
const diffMs = now - date;
const diffMinutes = Math.floor(diffMs / (1000 * 60));
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
let relativeTime;
if (diffMinutes < 1) {
relativeTime = 'Just now';
} else if (diffMinutes < 60) {
relativeTime = `${diffMinutes}m ago`;
} else if (diffHours < 24) {
relativeTime = `${diffHours}h ago`;
} else if (diffDays < 7) {
relativeTime = `${diffDays}d ago`;
} else {
relativeTime = date.toLocaleDateString();
}
return {
relative: relativeTime,
full: date.toLocaleString(),
iso: date.toISOString()
};
},
// Create a time element with relative display and full timestamp on hover
createTimeElement: (timestamp, className = 'time') => {
const timeInfo = TimeUtils.formatTimeWithRelative(timestamp);
const element = DOMSecurity.createSafeElement('span', timeInfo.relative, {
className: className,
title: timeInfo.full
});
return element;
},
// Format duration in human readable format
formatDuration: (durationMs) => {
if (!durationMs || durationMs < 0) return 'Unknown';
if (durationMs < 1000) {
return `${Math.round(durationMs)}ms`;
} else if (durationMs < 60000) {
return `${(durationMs / 1000).toFixed(1)}s`;
} else {
const minutes = Math.floor(durationMs / 60000);
const seconds = ((durationMs % 60000) / 1000).toFixed(1);
return `${minutes}m ${seconds}s`;
}
}
};
document.addEventListener('DOMContentLoaded', () => {
const requestsList = document.getElementById('requestsList');
const clearBtn = document.getElementById('clearBtn');
const exportBtn = document.getElementById('exportBtn');
const exportAllBtn = document.getElementById('exportAllBtn');
const viewStorageBtn = document.getElementById('viewStorageBtn');
const refreshBtn = document.getElementById('refreshBtn');
const collapseAllBtn = document.getElementById('collapseAllBtn');
const settingsBtn = document.getElementById('settingsBtn');
const settingsPanel = document.getElementById('settingsPanel');
const closeSettingsBtn = document.getElementById('closeSettings');
const enableResponseCaptureCheckbox = document.getElementById('enableResponseCapture');
const requestDetails = document.getElementById('requestDetails');
// Debug: Check if buttons exist
console.log('Button elements found:', {
clearBtn: !!clearBtn,
exportBtn: !!exportBtn,
exportAllBtn: !!exportAllBtn,
viewStorageBtn: !!viewStorageBtn,
requestDetails: !!requestDetails
});
const closeDetailsBtn = document.getElementById('closeDetails');
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
const findingsBtn = document.getElementById('findingsBtn');
const requestsBtn = document.getElementById('requestsBtn');
const findingsList = document.getElementById('findingsList');
const extensionsBtn = document.getElementById('extensionsBtn');
const extensionsList = document.getElementById('extensionsList');
const portsBtn = document.getElementById('portsBtn');
const portsAnalysis = document.getElementById('portsAnalysis');
const repeaterPanel = document.getElementById('repeaterPanel');
const sendToRepeaterBtn = document.getElementById('sendToRepeaterBtn');
const closeRepeaterBtn = document.getElementById('closeRepeaterBtn');
const sendRepeaterBtn = document.getElementById('sendRepeaterBtn');
const repeaterRequestEl = document.getElementById('repeaterRequest');
const repeaterResponseEl = document.getElementById('repeaterResponse');
let requests = [];
let selectedRequest = null;
// Rate limiting for loadRequests
let lastLoadTime = 0;
const LOAD_COOLDOWN = 1000; // 1 second cooldown
// Load requests when popup opens
loadRequests();
// Debug: Check if detail panel elements exist
console.log('Detail panel elements check:');
console.log('detailUrl exists:', !!document.getElementById('detailUrl'));
console.log('detailMethod exists:', !!document.getElementById('detailMethod'));
console.log('chatMessages exists:', !!document.getElementById('chatMessages'));
console.log('dnsHostname exists:', !!document.getElementById('dnsHostname'));
// Auto-refresh when popup gains focus (user opens it)
window.addEventListener('focus', () => {
console.log('Popup gained focus - auto-refreshing data');
loadRequests();
});
// Also refresh when popup becomes visible
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
console.log('Popup became visible - auto-refreshing data');
loadRequests();
}
});
// Initialize collapse state variable
let allCollapsed = false;
// Set up refresh button event listener
if (refreshBtn) {
refreshBtn.addEventListener('click', () => {
console.log('Manual refresh triggered');
loadRequests();
});
}
// Set up collapse all button event listener
if (collapseAllBtn) {
collapseAllBtn.addEventListener('click', () => {
const serviceHeaders = document.querySelectorAll('.service-header.collapsible');
const sessionContainers = document.querySelectorAll('.session-container');
if (allCollapsed) {
// Expand all
sessionContainers.forEach(container => {
container.style.display = 'block';
});
serviceHeaders.forEach(header => {
const icon = header.querySelector('.collapse-icon');
if (icon) icon.textContent = 'โผ';
header.classList.remove('collapsed');
});
collapseAllBtn.textContent = 'Collapse All';
allCollapsed = false;
console.log('๐ Expanded all sessions');
} else {
// Collapse all
sessionContainers.forEach(container => {
container.style.display = 'none';
});
serviceHeaders.forEach(header => {
const icon = header.querySelector('.collapse-icon');
if (icon) icon.textContent = 'โถ';
header.classList.add('collapsed');
});
collapseAllBtn.textContent = 'Expand All';
allCollapsed = true;
console.log('๐ Collapsed all sessions');
}
});
}
// Settings panel functionality
if (settingsBtn) {
settingsBtn.addEventListener('click', () => {
settingsPanel.style.display = 'block';
loadSettings();
});
}
if (closeSettingsBtn) {
closeSettingsBtn.addEventListener('click', () => {
settingsPanel.style.display = 'none';
});
}
if (enableResponseCaptureCheckbox) {
enableResponseCaptureCheckbox.addEventListener('change', (e) => {
const enabled = e.target.checked;
chrome.storage.local.set({ enableResponseCapture: enabled }, () => {
console.log('Response capture setting:', enabled);
// Notify background script of setting change
chrome.runtime.sendMessage({
action: 'updateResponseCaptureSetting',
enabled: enabled
});
});
});
}
// P0-NEW-4: Privacy consent checkbox handler
const enablePrivacyConsentCheckbox = document.getElementById('enablePrivacyConsent');
const privacyConsentStatus = document.getElementById('privacyConsentStatus');
if (enablePrivacyConsentCheckbox) {
enablePrivacyConsentCheckbox.addEventListener('change', async (e) => {
const enabled = e.target.checked;
if (enabled) {
// Grant privacy consent
try {
const consent = {
granted: true,
timestamp: new Date().toISOString(),
version: 1
};
await chrome.storage.local.set({ heraPrivacyConsent: consent });
console.log('Privacy consent granted');
updatePrivacyConsentStatus();
} catch (error) {
console.error('Failed to grant privacy consent:', error);
e.target.checked = false;
}
} else {
// Withdraw privacy consent
try {
await chrome.storage.local.remove(['heraPrivacyConsent']);
console.log('Privacy consent withdrawn');
updatePrivacyConsentStatus();
} catch (error) {
console.error('Failed to withdraw privacy consent:', error);
}
}
});
}
// P0-NEW-4: Update privacy consent status display
async function updatePrivacyConsentStatus() {
try {
const result = await chrome.storage.local.get(['heraPrivacyConsent']);
const consent = result.heraPrivacyConsent;
if (consent && consent.granted) {
const consentDate = new Date(consent.timestamp);
const expiryDate = new Date(consentDate.getTime() + (365 * 24 * 60 * 60 * 1000)); // 1 year
if (privacyConsentStatus) {
privacyConsentStatus.textContent = `Consent granted on ${consentDate.toLocaleDateString()}. Expires ${expiryDate.toLocaleDateString()}.`;
privacyConsentStatus.style.color = '#28a745';
}
if (enablePrivacyConsentCheckbox) {
enablePrivacyConsentCheckbox.checked = true;
}
} else {
if (privacyConsentStatus) {
privacyConsentStatus.textContent = 'No consent granted. DNS and IP geolocation features are disabled.';
privacyConsentStatus.style.color = '#dc3545';
}
if (enablePrivacyConsentCheckbox) {
enablePrivacyConsentCheckbox.checked = false;
}
}
} catch (error) {
console.error('Failed to update privacy consent status:', error);
}
}
// Load current settings
function loadSettings() {
chrome.storage.local.get(['enableResponseCapture'], (result) => {
const enabled = result.enableResponseCapture !== false; // Default to true
if (enableResponseCaptureCheckbox) {
enableResponseCaptureCheckbox.checked = enabled;
}
});
// P0-NEW-4: Load privacy consent status
updatePrivacyConsentStatus();
}
// Set up event listeners with error handling
clearBtn.addEventListener('click', (e) => {
console.log('Clear button clicked');
clearRequests();
});
exportBtn.addEventListener('click', (e) => {
console.log('Export button clicked');
exportRequests();
});
if (exportAllBtn) {
exportAllBtn.addEventListener('click', (e) => {
console.log('Export All button clicked');
e.preventDefault();
exportAllSessions();
});
} else {
console.error('exportAllBtn not found!');
}
if (viewStorageBtn) {
viewStorageBtn.addEventListener('click', (e) => {
console.log('View Storage button clicked');
e.preventDefault();
viewStorageStats();
});
} else {
console.error('viewStorageBtn not found!');
}
closeDetailsBtn.addEventListener('click', (e) => {
console.log('Close details button clicked');
hideDetails();
});
// Tab switching
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const tabName = button.getAttribute('data-tab');
switchTab(tabName);
});
});
// Load requests from background
function loadRequests() {
const now = Date.now();
if (now - lastLoadTime < LOAD_COOLDOWN) {
console.log('Load requests rate limited');
return;
}
lastLoadTime = now;
console.log('Loading requests...'); // Debug log
// Add loading indicator
if (requestsList) {
const loadingDiv = DOMSecurity.createSafeElement('div', 'Loading sessions...', { className: 'loading' });
DOMSecurity.replaceChildren(requestsList, loadingDiv);
}
chrome.runtime.sendMessage({ action: 'getRequests' }, response => {
console.log('Received response:', response); // Debug log
if (chrome.runtime.lastError) {
console.error('Runtime error:', chrome.runtime.lastError);
if (requestsList) {
const errorDiv = DOMSecurity.createSafeElement('div', '', { className: 'error-state' });
const errorMsg = DOMSecurity.createSafeElement('p', `Error loading data: ${chrome.runtime.lastError.message}`);
const retryBtn = DOMSecurity.createSafeElement('button', 'Retry');
retryBtn.onclick = loadRequests;
errorDiv.appendChild(errorMsg);
errorDiv.appendChild(retryBtn);
DOMSecurity.replaceChildren(requestsList, errorDiv);
}
return;
}
if (!response) {
console.warn('No response received from background script');
if (requestsList) {
const errorDiv = DOMSecurity.createSafeElement('div', '', { className: 'error-state' });
const errorMsg = DOMSecurity.createSafeElement('p', 'No response from background script');
const retryBtn = DOMSecurity.createSafeElement('button', 'Retry');
retryBtn.onclick = loadRequests;
errorDiv.appendChild(errorMsg);
errorDiv.appendChild(retryBtn);
DOMSecurity.replaceChildren(requestsList, errorDiv);
}
return;
}
requests = Array.isArray(response) ? response : []; // Ensure it's an array
console.log('Parsed requests:', requests.length, 'items'); // Debug log
// Sort by timestamp (newest first) to ensure latest data appears first
requests.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
renderRequests();
renderFindings();
});
}
// Render the list of requests organized by sessions
function renderRequests() {
if (requests.length === 0) {
const emptyDiv = DOMSecurity.createSafeElement('div', '', { className: 'empty-state' });
const msg1 = DOMSecurity.createSafeElement('p', 'No authentication requests captured yet.');
const msg2 = DOMSecurity.createSafeElement('p', 'Navigate to a website that uses OAuth, OIDC, SAML, or SCIM.');
emptyDiv.appendChild(msg1);
emptyDiv.appendChild(msg2);
DOMSecurity.replaceChildren(requestsList, emptyDiv);
return;
}
// Group requests by service/session
const sessionGroups = {};
requests.forEach(request => {
const service = request.service || request.sessionInfo?.service || 'Unknown';
const sessionId = request.sessionId || request.sessionInfo?.sessionId || 'unknown';
if (!sessionGroups[service]) {
sessionGroups[service] = {};
}
if (!sessionGroups[service][sessionId]) {
sessionGroups[service][sessionId] = {
requests: [],
domain: request.sessionInfo?.domain || new URL(request.url).hostname,
startTime: request.timestamp,
eventCount: 0
};
}
sessionGroups[service][sessionId].requests.push(request);
sessionGroups[service][sessionId].eventCount++;
});
console.log('Session groups:', sessionGroups);
requestsList.innerHTML = '';
// Check for security issues
checkSecurityIssues(requests);
// Render each service group
Object.entries(sessionGroups).forEach(([service, sessions]) => {
// Service header with collapse functionality
const serviceHeader = document.createElement('div');
serviceHeader.className = 'service-header collapsible';
const headerContent = DOMSecurity.createSafeElement('div', '', { className: 'service-header-content' });
const collapseIcon = DOMSecurity.createSafeElement('span', 'โผ', { className: 'collapse-icon' });
const serviceTitle = DOMSecurity.createSafeElement('h3', service);
const sessionCount = DOMSecurity.createSafeElement('span', `${Object.keys(sessions).length} session(s)`, { className: 'session-count' });
headerContent.appendChild(collapseIcon);
headerContent.appendChild(serviceTitle);
headerContent.appendChild(sessionCount);
serviceHeader.appendChild(headerContent);
// Create container for sessions
const sessionContainer = document.createElement('div');
sessionContainer.className = 'session-container';
sessionContainer.style.display = 'block'; // Start expanded
// Add click handler for collapse/expand
serviceHeader.addEventListener('click', () => {
const isCollapsed = sessionContainer.style.display === 'none';
const icon = serviceHeader.querySelector('.collapse-icon');
if (isCollapsed) {
sessionContainer.style.display = 'block';
icon.textContent = 'โผ';
serviceHeader.classList.remove('collapsed');
console.log(`๐ Expanded ${service} session`);
} else {
sessionContainer.style.display = 'none';
icon.textContent = 'โถ';
serviceHeader.classList.add('collapsed');
console.log(`๐ Collapsed ${service} session`);
}
});
requestsList.appendChild(serviceHeader);
// Render each session within the service
Object.entries(sessions).forEach(([sessionId, sessionData]) => {
const sessionHeader = document.createElement('div');
sessionHeader.className = 'session-header';
// Get all unique domains for this session
const domains = [...new Set(sessionData.requests.map(r => {
try {
return new URL(r.url).hostname;
} catch {
return r.sessionInfo?.domain || 'unknown';
}
}))];
const domainDisplay = domains.length === 1
? DOMSecurity.sanitizeHTML(domains[0])
: `${domains.length} domains: ${domains.slice(0, 2).map(d => DOMSecurity.sanitizeHTML(d)).join(', ')}${domains.length > 2 ? '...' : ''}`;
const sessionInfo = DOMSecurity.createSafeElement('div', '', { className: 'session-info' });
const sessionMain = DOMSecurity.createSafeElement('div', '', { className: 'session-main' });
const sessionDomain = DOMSecurity.createSafeElement('span', domainDisplay, {
className: 'session-domain',
title: domains.map(d => DOMSecurity.sanitizeHTML(d)).join(', ')
});
const sessionEvents = DOMSecurity.createSafeElement('span', `${sessionData.eventCount} events`, { className: 'session-events' });
const sessionTimeInfo = TimeUtils.formatTimeWithRelative(sessionData.startTime);
const sessionTime = DOMSecurity.createSafeElement('span', sessionTimeInfo.relative, {
className: 'session-time',
title: sessionTimeInfo.full
});
sessionMain.appendChild(sessionDomain);
sessionMain.appendChild(sessionEvents);
sessionInfo.appendChild(sessionMain);
sessionInfo.appendChild(sessionTime);
sessionHeader.appendChild(sessionInfo);
sessionContainer.appendChild(sessionHeader);
// Render requests in this session (newest first)
sessionData.requests.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)).forEach(request => {
const requestEl = document.createElement('div');
requestEl.className = 'request-item session-request';
requestEl.dataset.id = request.id;
const statusCode = request.statusCode || 'Pending';
const statusClass = statusCode >= 400 ? 'error' : statusCode >= 200 && statusCode < 300 ? 'success' : '';
const riskCategory = request.metadata?.authAnalysis?.riskCategory || 'secure';
requestEl.classList.add(riskCategory);
// Create elements safely
const securityDot = DOMSecurity.createSafeElement('span', '', { className: 'security-dot' });
const methodDiv = DOMSecurity.createSafeElement('div', DOMSecurity.sanitizeHTML(request.method || 'GET'), {
className: `request-method ${statusClass}`
});
const urlDiv = DOMSecurity.createSafeElement('div', request.url, {
className: 'request-url',
title: request.url
});
const typeDiv = DOMSecurity.createSafeElement('div', DOMSecurity.sanitizeHTML(request.authType || 'Unknown'), {
className: 'request-type'
});
const statusDiv = DOMSecurity.createSafeElement('div', DOMSecurity.sanitizeHTML(String(statusCode)), {
className: 'request-status'
});
requestEl.appendChild(securityDot);
requestEl.appendChild(methodDiv);
requestEl.appendChild(urlDiv);
requestEl.appendChild(typeDiv);
requestEl.appendChild(statusDiv);
requestEl.addEventListener('click', () => {
console.log('๐ฑ๏ธ Request clicked:', request.id, request.url);
showRequestDetails(request.id);
});
sessionContainer.appendChild(requestEl);
});
});
// Add the session container to the main list
requestsList.appendChild(sessionContainer);
});
}
// Render the aggregated list of security findings
// Identify service from domain
function identifyService(domain) {
const servicePatterns = {
'Microsoft': ['microsoft.com', 'live.com', 'outlook.com', 'office.com', 'azure.com', 'microsoftonline.com'],
'Google': ['google.com', 'gmail.com', 'googleapis.com', 'googleusercontent.com'],
'Amazon/AWS': ['amazon.com', 'amazonaws.com', 'aws.com'],
'Facebook/Meta': ['facebook.com', 'fb.com', 'fbcdn.net', 'instagram.com', 'whatsapp.com'],
'Apple': ['apple.com', 'icloud.com'],
'GitHub': ['github.com', 'githubusercontent.com'],
'LinkedIn': ['linkedin.com', 'licdn.com'],
'Twitter/X': ['twitter.com', 'x.com', 'twimg.com'],
'Salesforce': ['salesforce.com', 'force.com'],
'Oracle': ['oracle.com', 'oraclecloud.com'],
'IBM': ['ibm.com', 'ibmcloud.com'],
'Adobe': ['adobe.com', 'adobelogin.com'],
'PayPal': ['paypal.com', 'paypalobjects.com'],
'Netflix': ['netflix.com', 'nflxvideo.net'],
'Spotify': ['spotify.com', 'spotifycdn.com'],
'Dropbox': ['dropbox.com', 'dropboxusercontent.com'],
'Zoom': ['zoom.us', 'zoom.com'],
'Slack': ['slack.com', 'slack-edge.com'],
'Atlassian': ['atlassian.com', 'jira.com', 'confluence.com', 'bitbucket.org']
};
for (const [service, patterns] of Object.entries(servicePatterns)) {
if (patterns.some(pattern => domain.includes(pattern))) {
return service;
}
}
// Check if it's a government site
if (domain.endsWith('.gov')) return 'Government';
if (domain.endsWith('.edu')) return 'Educational';
if (domain.endsWith('.mil')) return 'Military';
// Check if it's a bank or financial institution
if (domain.includes('bank') || domain.includes('credit')) return 'Banking';
return null;
}
// Get service priority (higher = more important)
function getServicePriority(service, domain) {
const priorityMap = {
'Microsoft': 100,
'Google': 95,
'Amazon/AWS': 90,
'Banking': 85,
'Government': 85,
'Military': 90,
'Apple': 80,
'GitHub': 75,
'Salesforce': 75,
'Oracle': 70,
'IBM': 70,
'PayPal': 80,
'Facebook/Meta': 65,
'LinkedIn': 60,
'Twitter/X': 55,
'Educational': 50
};
if (service && priorityMap[service]) {
return priorityMap[service];
}
// Check domain reputation
if (domain.includes('localhost') || domain.includes('127.0.0.1')) return 1;
if (domain.endsWith('.local')) return 5;
if (/^\d+\.\d+\.\d+\.\d+$/.test(domain)) return 10; // IP address
return 20; // Default for unknown domains
}
// Get the most important affected domain
function getTopAffectedDomain(affectedDomains) {
if (!affectedDomains || affectedDomains.size === 0) return null;
let topDomain = null;
let maxPriority = 0;
for (const [domain, info] of affectedDomains) {
if (info.priority > maxPriority) {
maxPriority = info.priority;
topDomain = {
domain: domain,
service: info.service,
count: info.count,
priority: info.priority
};
}
}
return topDomain;
}
// Get service icon/emoji
function getServiceIcon(service) {
const serviceIcons = {
'Microsoft': '๐ช',
'Google': '๐',
'Amazon/AWS': '๐ฆ',
'Banking': '๐ฆ',
'Government': '๐๏ธ',
'Military': '๐ช',
'Apple': '๐',
'GitHub': '๐',
'Salesforce': 'โ๏ธ',
'Oracle': '๐ฎ',
'IBM': '๐ผ',
'PayPal': '๐ฐ',
'Facebook/Meta': '๐',
'LinkedIn': '๐ผ',
'Twitter/X': '๐ฆ',
'Educational': '๐',
'Netflix': '๐บ',
'Spotify': '๐ต',
'Dropbox': '๐',
'Zoom': '๐น',
'Slack': '๐ฌ',
'Atlassian': '๐ง',
'Adobe': '๐จ'
};
return serviceIcons[service] || '๐';
}
function renderFindings() {
if (requests.length === 0) {
const emptyDiv = DOMSecurity.createSafeElement('div', '', { className: 'empty-state' });
const emptyMsg = DOMSecurity.createSafeElement('p', 'No security findings yet.');
emptyDiv.appendChild(emptyMsg);
DOMSecurity.replaceChildren(findingsList, emptyDiv);
return;
}
const allIssues = {};
requests.forEach(request => {
const issues = request.metadata?.authAnalysis?.issues || [];
issues.forEach(issue => {
const key = `${issue.type}|${issue.severity}`;
if (!allIssues[key]) {
allIssues[key] = {
...issue,
count: 0,
requests: [],
affectedDomains: new Map()
};
}
allIssues[key].count++;
allIssues[key].requests.push(request.id);
// Track affected domains
try {
const url = new URL(request.url);
const domain = url.hostname;
const service = request.service || identifyService(domain);
if (!allIssues[key].affectedDomains.has(domain)) {
allIssues[key].affectedDomains.set(domain, {
count: 0,
service: service,
priority: getServicePriority(service, domain)
});
}
allIssues[key].affectedDomains.get(domain).count++;
} catch (e) {
// Invalid URL
}
});
});
const sortedIssues = Object.values(allIssues).sort((a, b) => {
const severityOrder = { 'CRITICAL': 4, 'HIGH': 3, 'MEDIUM': 2, 'LOW': 1 };
return (severityOrder[b.severity] || 0) - (severityOrder[a.severity] || 0);
});
if (sortedIssues.length === 0) {
const emptyDiv = DOMSecurity.createSafeElement('div', '', { className: 'empty-state' });
const emptyMsg = DOMSecurity.createSafeElement('p', 'No security issues detected.');
emptyDiv.appendChild(emptyMsg);
DOMSecurity.replaceChildren(findingsList, emptyDiv);
return;
}
findingsList.innerHTML = '';
sortedIssues.forEach(issue => {
const findingEl = document.createElement('div');
findingEl.className = `finding-item ${issue.severity.toLowerCase()}`;
const findingHeader = DOMSecurity.createSafeElement('div', '', { className: 'finding-header' });
const findingType = DOMSecurity.createSafeElement('span', issue.type, { className: 'finding-type' });
const findingCount = DOMSecurity.createSafeElement('span', `${issue.count} found`, { className: 'finding-count' });
// Add action buttons
const findingActions = DOMSecurity.createSafeElement('div', '', { className: 'finding-actions' });
const copyBtn = DOMSecurity.createSafeElement('button', '๐', {
className: 'action-btn copy-btn',
title: 'Copy finding details'
});
const exportBtn = DOMSecurity.createSafeElement('button', '๐ฅ', {
className: 'action-btn export-btn',
title: 'Export for investigation'
});
copyBtn.addEventListener('click', (e) => {
e.stopPropagation();
copyFindingDetails(issue);
});
exportBtn.addEventListener('click', (e) => {
e.stopPropagation();
exportFindingForInvestigation(issue);
});
findingActions.appendChild(copyBtn);
findingActions.appendChild(exportBtn);
// Get the most important affected domain
const topDomain = getTopAffectedDomain(issue.affectedDomains);
// Create affected service line
const affectedService = DOMSecurity.createSafeElement('div', '', { className: 'affected-service' });
if (topDomain) {
const serviceIcon = getServiceIcon(topDomain.service);
const serviceName = topDomain.service || 'Unknown Service';
const domainText = topDomain.domain;
const serviceDisplay = `${serviceIcon} ${serviceName}${serviceName !== domainText ? ` (${domainText})` : ''}`;
const additionalCount = issue.affectedDomains.size - 1;
affectedService.textContent = serviceDisplay;
if (additionalCount > 0) {
const additionalSpan = DOMSecurity.createSafeElement('span', ` +${additionalCount} more`, {
className: 'additional-domains'
});
affectedService.appendChild(additionalSpan);
}
// Add priority indicator for high-value targets
if (topDomain.priority >= 80) {
const priorityBadge = DOMSecurity.createSafeElement('span', 'โ ๏ธ', {
className: 'priority-badge high-priority',