2121 .wrap { max-width : 1200px ; margin : 0 auto; padding : 20px ; }
2222 .title { font-size : 24px ; font-weight : 800 ; margin : 0 0 4px ; }
2323 .sub { color : var (--muted ); margin : 0 0 18px ; }
24- .tabs { display : flex; gap : 8px ; flex-wrap : wrap; margin-bottom : 14px ; }
25- .tab { background : # 151a33 ; color : var (--muted ); border : 1px solid var (--border ); padding : 8px 12px ; border-radius : 10px ; cursor : pointer; font-weight : 600 ; }
26- .tab .active { color : var (--text ); border-color : var (--accent ); background : rgba (123 , 139 , 255 , .12 ); }
24+ .tabs { display : flex; gap : 10px ; flex-wrap : wrap; margin-bottom : 20px ; }
25+ .tab {
26+ background : rgba (21 , 26 , 51 , 0.6 );
27+ color : var (--muted );
28+ border : 1px solid var (--border );
29+ padding : 10px 16px ;
30+ border-radius : 12px ;
31+ cursor : pointer;
32+ font-weight : 600 ;
33+ transition : all 0.2s cubic-bezier (0.4 , 0 , 0.2 , 1 );
34+ backdrop-filter : blur (8px );
35+ }
36+ .tab : hover { background : rgba (123 , 139 , 255 , 0.1 ); color : var (--text ); border-color : rgba (123 , 139 , 255 , 0.4 ); }
37+ .tab .active {
38+ color : # fff ;
39+ border-color : var (--accent );
40+ background : linear-gradient (135deg , rgba (123 , 139 , 255 , 0.25 ), rgba (123 , 139 , 255 , 0.1 ));
41+ box-shadow : 0 4px 15px rgba (123 , 139 , 255 , 0.15 );
42+ }
2743 .panel { display : none; }
2844 .panel .active { display : block; }
2945 .card { background : var (--card ); border : 1px solid var (--border ); border-radius : 12px ; padding : 14px ; margin-bottom : 12px ; }
5874 .xss-row : hover { background : rgba (255 , 255 , 255 , .03 ); }
5975 .xss-row : last-child { border-bottom : 0 ; }
6076 .xss-meta { display : flex; gap : 6px ; flex-wrap : wrap; margin-bottom : 6px ; align-items : center; }
61- .xss-event { font-size : 11px ; font-weight : 700 ; color : var ( --accent ) ; background : rgba ( 123 , 139 , 255 , .12 ); padding : 2 px 8 px ; border-radius : 6 px ; }
62- .xss-tag { font-size : 11px ; font-weight : 600 ; color : var ( --ok ) ; background : rgba ( 52 , 211 , 153 , .1 ); padding : 2 px 7 px ; border-radius : 6 px ; }
77+ .xss-event { font-size : 11px ; font-weight : 700 ; color : # fff ; background : linear-gradient ( 135 deg , # 6366f1 , # 8b5cf6 ); padding : 3 px 10 px ; border-radius : 8 px ; box-shadow : 0 2 px 8 px rgba ( 99 , 102 , 241 , 0.3 ) ; }
78+ .xss-tag { font-size : 11px ; font-weight : 700 ; color : # fff ; background : linear-gradient ( 135 deg , # 10b981 , # 059669 ); padding : 3 px 10 px ; border-radius : 8 px ; box-shadow : 0 2 px 8 px rgba ( 16 , 185 , 129 , 0.3 ) ; }
6379 .xss-ui { font-size : 11px ; padding : 2px 7px ; border-radius : 6px ; font-weight : 600 ; }
6480 .xss-ui .auto { background : rgba (52 , 211 , 153 , .08 ); color : var (--ok ); }
6581 .xss-ui .manual { background : rgba (245 , 158 , 11 , .08 ); color : var (--warn ); }
6682 .xss-code { font-family : ui-monospace, SFMono-Regular, Menlo, monospace; font-size : 12px ; color : # c5d0ff ; word-break : break-all; line-height : 1.5 ; flex : 1 ; }
6783 .xss-desc { font-size : 11px ; color : var (--muted ); margin-top : 4px ; }
6884 .xss-copy-btn { flex-shrink : 0 ; background : # 1a1f3b ; border : 1px solid var (--border ); color : var (--muted ); border-radius : 7px ; padding : 4px 9px ; font-size : 11px ; cursor : pointer; white-space : nowrap; }
6985 .xss-copy-btn : hover { color : var (--text ); border-color : var (--accent ); }
70- .xss-group-header { padding : 8px 10px ; background : rgba (123 , 139 , 255 , .06 ); border-bottom : 1px solid var (--border ); display : flex; justify-content : space-between; align-items : center; position : sticky; top : 0 ; z-index : 5 ; }
71- .xss-group-name { font-size : 12px ; font-weight : 800 ; text-transform : uppercase; letter-spacing : .6px ; color : var (--accent ); }
72- .xss-count-badge { font-size : 11px ; color : var (--muted ); }
73- .xss-results-box { border : 1px solid var (--border ); border-radius : 10px ; overflow : auto; max-height : 600px ; background : # 090c1a ; }
74- .copy-bulk-btn { background : linear-gradient (135deg , # 6577ff, # 7f8fff ); color : white; border : none; border-radius : 8px ; padding : 7px 14px ; cursor : pointer; font-weight : 700 ; font-size : 12px ; }
86+ .xss-group-header {
87+ padding : 12px 16px ;
88+ background : rgba (123 , 139 , 255 , 0.08 );
89+ border-bottom : 1px solid var (--border );
90+ display : flex;
91+ justify-content : space-between;
92+ align-items : center;
93+ position : sticky;
94+ top : 0 ;
95+ z-index : 10 ;
96+ backdrop-filter : blur (12px );
97+ }
98+ .xss-group-name { font-size : 13px ; font-weight : 800 ; text-transform : uppercase; letter-spacing : 1px ; color : var (--accent ); text-shadow : 0 0 10px rgba (123 , 139 , 255 , 0.3 ); }
99+ .xss-count-badge { font-size : 11px ; color : var (--muted ); background : rgba (255 , 255 , 255 , 0.05 ); padding : 2px 8px ; border-radius : 20px ; }
100+ .xss-results-box {
101+ border : 1px solid var (--border );
102+ border-radius : 14px ;
103+ overflow : auto;
104+ max-height : 650px ;
105+ background : rgba (9 , 12 , 26 , 0.7 );
106+ box-shadow : inset 0 0 40px rgba (0 , 0 , 0 , 0.4 );
107+ }
108+ .copy-bulk-btn {
109+ background : linear-gradient (135deg , # 4f46e5, # 7c3aed );
110+ color : white;
111+ border : none;
112+ border-radius : 10px ;
113+ padding : 8px 18px ;
114+ cursor : pointer;
115+ font-weight : 700 ;
116+ font-size : 13px ;
117+ transition : transform 0.1s , box-shadow 0.2s ;
118+ }
119+ .copy-bulk-btn : hover { transform : translateY (-1px ); box-shadow : 0 4px 15px rgba (124 , 58 , 237 , 0.4 ); }
120+ .copy-bulk-btn : active { transform : translateY (0 ); }
75121 </ style >
76122 < script src ="ssrf-payloads.js "> </ script >
77123 < script src ="xss-payloads.js "> </ script >
@@ -266,7 +312,7 @@ <h1 class="title">Security Lab</h1>
266312 $ ( 'jwtPayload' ) . textContent = '{}' ;
267313 checks . push ( [ 'bad' , 'Invalid JWT: ' + e . message ] ) ;
268314 }
269- $ ( 'jwtChecks' ) . innerHTML = checks . map ( ( [ cls , msg ] ) => `<div class="item"><span class="pill ${ cls } ">${ cls . toUpperCase ( ) } </span> <span style="margin-left:8px">${ msg } </span></div>` ) . join ( '' ) ;
315+ $ ( 'jwtChecks' ) . innerHTML = checks . map ( ( [ cls , msg ] ) => `<div class="item"><span class="pill ${ cls } ">${ cls . toUpperCase ( ) } </span> <span style="margin-left:8px">${ escapeHTML ( msg ) } </span></div>` ) . join ( '' ) ;
270316 } ) ;
271317
272318 $ ( 'regexRun' ) . addEventListener ( 'click' , ( ) => {
@@ -290,10 +336,10 @@ <h1 class="title">Security Lab</h1>
290336 if ( matches . length > 500 ) break ;
291337 }
292338 $ ( 'regexResults' ) . innerHTML = matches . length
293- ? matches . map ( x => `<div class="item"><span class="pill ok">MATCH</span> <span class="muted" style="margin-left:8px">@${ x . idx } </span><div style="margin-top:6px"><code>${ x . val . replace ( / < / g , '<' ) } </code></div></div>` ) . join ( '' )
339+ ? matches . map ( x => `<div class="item"><span class="pill ok">MATCH</span> <span class="muted" style="margin-left:8px">@${ x . idx } </span><div style="margin-top:6px"><code>${ escapeHTML ( x . val ) } </code></div></div>` ) . join ( '' )
294340 : '<div class="item muted">No matches.</div>' ;
295341 } catch ( e ) {
296- $ ( 'regexResults' ) . innerHTML = `<div class="item"><span class="pill bad">ERROR</span><span style="margin-left:8px">${ e . message } </span></div>` ;
342+ $ ( 'regexResults' ) . innerHTML = `<div class="item"><span class="pill bad">ERROR</span><span style="margin-left:8px">${ escapeHTML ( e . message ) } </span></div>` ;
297343 }
298344 } ) ;
299345
@@ -746,7 +792,8 @@ <h1 class="title">Security Lab</h1>
746792 return true ;
747793 } ) ;
748794
749- $ ( 'xssStats' ) . textContent = `${ xssFilteredPayloads . length } payload(s) of ${ window . XSS_PAYLOADS . length } total` ;
795+ const statsText = search ? `${ xssFilteredPayloads . length } payload(s) matching "${ escapeHTML ( search ) } "` : `${ xssFilteredPayloads . length } payload(s) of ${ window . XSS_PAYLOADS . length } total` ;
796+ $ ( 'xssStats' ) . textContent = statsText ;
750797
751798 const container = $ ( 'xssResults' ) ;
752799 // Clear safely — no innerHTML involved
0 commit comments