1+ /*
2+ Hack using jQuery's text() method and a temporary element to escape html()
3+ utilizing jQuery.
4+ */
5+ function escapeHtml ( unsafe ) {
6+ return $ ( '<div/>' ) . text ( unsafe ) . html ( ) ;
7+ }
18function renderClientList ( data ) {
29 $ . each ( data , function ( index , obj ) {
310 // render telegram button
@@ -6,13 +13,13 @@ function renderClientList(data) {
613 telegramButton = `<div class="btn-group">
714 <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
815 data-target="#modal_telegram_client" data-clientid="${ obj . Client . id } "
9- data-clientname="${ obj . Client . name } ">Telegram</button>
16+ data-clientname="${ escapeHtml ( obj . Client . name ) } ">Telegram</button>
1017 </div>`
1118 }
1219
1320 let telegramHtml = "" ;
1421 if ( obj . Client . telegram_userid && obj . Client . telegram_userid . length > 0 ) {
15- telegramHtml = `<span class="info-box-text" style="display: none"><i class="fas fa-tguserid"></i>${ obj . Client . telegram_userid } </span>`
22+ telegramHtml = `<span class="info-box-text" style="display: none"><i class="fas fa-tguserid"></i>${ escapeHtml ( obj . Client . telegram_userid ) } </span>`
1623 }
1724
1825 // render client status css tag style
@@ -24,13 +31,13 @@ function renderClientList(data) {
2431 // render client allocated ip addresses
2532 let allocatedIpsHtml = "" ;
2633 $ . each ( obj . Client . allocated_ips , function ( index , obj ) {
27- allocatedIpsHtml += `<small class="badge badge-secondary">${ obj } </small> ` ;
34+ allocatedIpsHtml += `<small class="badge badge-secondary">${ escapeHtml ( obj ) } </small> ` ;
2835 } )
2936
3037 // render client allowed ip addresses
3138 let allowedIpsHtml = "" ;
3239 $ . each ( obj . Client . allowed_ips , function ( index , obj ) {
33- allowedIpsHtml += `<small class="badge badge-secondary">${ obj } </small> ` ;
40+ allowedIpsHtml += `<small class="badge badge-secondary">${ escapeHtml ( obj ) } </small> ` ;
3441 } )
3542
3643 let subnetRangesString = "" ;
@@ -40,7 +47,7 @@ function renderClientList(data) {
4047
4148 let additionalNotesHtml = "" ;
4249 if ( obj . Client . additional_notes && obj . Client . additional_notes . length > 0 ) {
43- additionalNotesHtml = `<span class="info-box-text" style="display: none"><i class="fas fa-additional_notes"></i>${ obj . Client . additional_notes . toUpperCase ( ) } </span>`
50+ additionalNotesHtml = `<span class="info-box-text" style="display: none"><i class="fas fa-additional_notes"></i>${ escapeHtml ( obj . Client . additional_notes . toUpperCase ( ) ) } </span>`
4451 }
4552
4653 // render client html content
@@ -56,12 +63,12 @@ function renderClientList(data) {
5663 <div class="btn-group">
5764 <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
5865 data-target="#modal_qr_client" data-clientid="${ obj . Client . id } "
59- data-clientname="${ obj . Client . name } " ${ obj . QRCode != "" ? '' : ' disabled' } >QR code</button>
66+ data-clientname="${ escapeHtml ( obj . Client . name ) } " ${ obj . QRCode != "" ? '' : ' disabled' } >QR code</button>
6067 </div>
6168 <div class="btn-group">
6269 <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
6370 data-target="#modal_email_client" data-clientid="${ obj . Client . id } "
64- data-clientname="${ obj . Client . name } ">Email</button>
71+ data-clientname="${ escapeHtml ( obj . Client . name ) } ">Email</button>
6572 </div>
6673 ${ telegramButton }
6774 <div class="btn-group">
@@ -72,30 +79,30 @@ function renderClientList(data) {
7279 <div class="dropdown-menu" role="menu">
7380 <a class="dropdown-item" href="#" data-toggle="modal"
7481 data-target="#modal_edit_client" data-clientid="${ obj . Client . id } "
75- data-clientname="${ obj . Client . name } ">Edit</a>
82+ data-clientname="${ escapeHtml ( obj . Client . name ) } ">Edit</a>
7683 <a class="dropdown-item" href="#" data-toggle="modal"
7784 data-target="#modal_pause_client" data-clientid="${ obj . Client . id } "
78- data-clientname="${ obj . Client . name } ">Disable</a>
85+ data-clientname="${ escapeHtml ( obj . Client . name ) } ">Disable</a>
7986 <a class="dropdown-item" href="#" data-toggle="modal"
8087 data-target="#modal_remove_client" data-clientid="${ obj . Client . id } "
81- data-clientname="${ obj . Client . name } ">Delete</a>
88+ data-clientname="${ escapeHtml ( obj . Client . name ) } ">Delete</a>
8289 </div>
8390 </div>
8491 <hr>
85- <span class="info-box-text"><i class="fas fa-user"></i> ${ obj . Client . name } </span>
86- <span class="info-box-text" style="display: none"><i class="fas fa-key"></i> ${ obj . Client . public_key } </span>
87- <span class="info-box-text" style="display: none"><i class="fas fa-subnetrange"></i>${ subnetRangesString } </span>
92+ <span class="info-box-text"><i class="fas fa-user"></i> ${ escapeHtml ( obj . Client . name ) } </span>
93+ <span class="info-box-text" style="display: none"><i class="fas fa-key"></i> ${ escapeHtml ( obj . Client . public_key ) } </span>
94+ <span class="info-box-text" style="display: none"><i class="fas fa-subnetrange"></i>${ escapeHtml ( subnetRangesString ) } </span>
8895 ${ telegramHtml }
8996 ${ additionalNotesHtml }
90- <span class="info-box-text"><i class="fas fa-envelope"></i> ${ obj . Client . email } </span>
97+ <span class="info-box-text"><i class="fas fa-envelope"></i> ${ escapeHtml ( obj . Client . email ) } </span>
9198 <span class="info-box-text"><i class="fas fa-clock"></i>
9299 ${ prettyDateTime ( obj . Client . created_at ) } </span>
93100 <span class="info-box-text"><i class="fas fa-history"></i>
94101 ${ prettyDateTime ( obj . Client . updated_at ) } </span>
95102 <span class="info-box-text"><i class="fas fa-server" style="${ obj . Client . use_server_dns ? "opacity: 1.0" : "opacity: 0.5" } "></i>
96103 ${ obj . Client . use_server_dns ? 'DNS enabled' : 'DNS disabled' } </span>
97104 <span class="info-box-text"><i class="fas fa-file"></i>
98- ${ obj . Client . additional_notes } </span>
105+ ${ escapeHtml ( obj . Client . additional_notes ) } </span>
99106 <span class="info-box-text"><strong>IP Allocation</strong></span>`
100107 + allocatedIpsHtml
101108 + `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
0 commit comments