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
+ }
1
8
function renderClientList ( data ) {
2
9
$ . each ( data , function ( index , obj ) {
3
10
// render telegram button
@@ -6,13 +13,13 @@ function renderClientList(data) {
6
13
telegramButton = `<div class="btn-group">
7
14
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
8
15
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>
10
17
</div>`
11
18
}
12
19
13
20
let telegramHtml = "" ;
14
21
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>`
16
23
}
17
24
18
25
// render client status css tag style
@@ -24,13 +31,13 @@ function renderClientList(data) {
24
31
// render client allocated ip addresses
25
32
let allocatedIpsHtml = "" ;
26
33
$ . 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> ` ;
28
35
} )
29
36
30
37
// render client allowed ip addresses
31
38
let allowedIpsHtml = "" ;
32
39
$ . 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> ` ;
34
41
} )
35
42
36
43
let subnetRangesString = "" ;
@@ -40,7 +47,7 @@ function renderClientList(data) {
40
47
41
48
let additionalNotesHtml = "" ;
42
49
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>`
44
51
}
45
52
46
53
// render client html content
@@ -56,12 +63,12 @@ function renderClientList(data) {
56
63
<div class="btn-group">
57
64
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
58
65
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>
60
67
</div>
61
68
<div class="btn-group">
62
69
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
63
70
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>
65
72
</div>
66
73
${ telegramButton }
67
74
<div class="btn-group">
@@ -72,30 +79,30 @@ function renderClientList(data) {
72
79
<div class="dropdown-menu" role="menu">
73
80
<a class="dropdown-item" href="#" data-toggle="modal"
74
81
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>
76
83
<a class="dropdown-item" href="#" data-toggle="modal"
77
84
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>
79
86
<a class="dropdown-item" href="#" data-toggle="modal"
80
87
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>
82
89
</div>
83
90
</div>
84
91
<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>
88
95
${ telegramHtml }
89
96
${ 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>
91
98
<span class="info-box-text"><i class="fas fa-clock"></i>
92
99
${ prettyDateTime ( obj . Client . created_at ) } </span>
93
100
<span class="info-box-text"><i class="fas fa-history"></i>
94
101
${ prettyDateTime ( obj . Client . updated_at ) } </span>
95
102
<span class="info-box-text"><i class="fas fa-server" style="${ obj . Client . use_server_dns ? "opacity: 1.0" : "opacity: 0.5" } "></i>
96
103
${ obj . Client . use_server_dns ? 'DNS enabled' : 'DNS disabled' } </span>
97
104
<span class="info-box-text"><i class="fas fa-file"></i>
98
- ${ obj . Client . additional_notes } </span>
105
+ ${ escapeHtml ( obj . Client . additional_notes ) } </span>
99
106
<span class="info-box-text"><strong>IP Allocation</strong></span>`
100
107
+ allocatedIpsHtml
101
108
+ `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
0 commit comments