· 5 years ago · Aug 25, 2020, 07:54 AM
1
2
3/*
4 # CleanImageURL( url )
5
6 This parser checks to ensure the src has a file extension.
7 If it does not, it'll replace the image with the emerald logo.
8
9 Based on scraping all img.src from emerald, I found no images that did not have an extension.
10
11 As an added measure, query paramters are removed
12 The only images that have query parameters are from robohash.
13 An exception is made in this parser for robohash.
14
15 Therefore, this should be safe to implement without defect.
16*/
17
18
19
20window.CleanImageURL = function(u){
21 if (typeof u !== 'string') return u;
22 if (u.startsWith('https://robohash.org')) return u;
23 u=u.split('?')[0];
24 if (!/\.(gif|jpe?g|tiff?|png|webp|bmp|svg)$/i.test(u)) u = '/logo7.svg';
25 return u;
26};
27
28
29
30/*
31 #Implementation Example
32
33
34 Most important: picture.url
35
36 Preferable: display_picture
37
38
39
40 Though I'm sure this looks much different in development,
41 the key point here is to pass props.picture.url to CleanImageURL so that it can return a valid image.
42
43
44 Example A: MessagePicture component.
45
46 The MessagePicture component allows any image sent through the socket
47 to apply to the "src" attribute of an image.
48
49 Evern though api requests like /karma_give are not images, the browser
50 will still issue the request, and therefore the api request will be run
51 from anyone that sees that MessagePicture component render.
52
53
54 ...
55 key: "open_picture",
56 value: function() {
57 element = React.createElement(Picture, {
58 data: {
59
60 // <fix>
61
62 src: CleanImageURL(this.props.picture.url)
63
64 // </fix>
65
66 }
67 }),
68 ReactDOM.render(element, document.getElementById("ui-hatch-2"))
69 }
70 }, {
71 key: "render",
72 value: function() {
73 return React.createElement("div", {
74 className: "room-component-message-picture-container"
75 }, React.createElement("img", {
76 onMouseDown: this.open_picture.bind(this),
77 className: "room-component-message-picture",
78
79 // <fix>
80
81 src: CleanImageURL(his.props.picture.url)
82
83 // </fix>
84
85
86 }))
87 }
88 }]),
89 ...
90*/
91
92
93
94
95
96/*
97
98 # Example B:
99
100 It isn't known for sure if there's possibility of exploit here,
101 However it is better safe than sorry.
102 Any "src" attributes to images should be run through CleanImageURL.
103
104
105
106 ...
107 value: function() {
108 return React.createElement("div", {
109 className: "notification-unit-body"
110 }, React.createElement("img", {
111 className: "navigation-notification-unit-image",
112
113 // <fix>
114 src: CleanImageURL(this.props.data.display_picture)
115 // </fix>
116
117 }), React.createElement(Flair, {
118 data: {
119 string: this.props.data.display_name,
120 flair: this.props.data.flair
121 }
122 }))
123 }
124 ...
125
126*/
127
128
129
130
131
132/**
133
134 # Samples
135
136 Scraped from img elements on emerald during runtime,
137 this list shows an example of this parser's results.
138
139 Notice that most examples are left unchanged,
140 while the api requests like karma_give are effectively replaced.
141
142
143
144
145
146
147 https://emeraldchat.com/logo7.svg
148 -> https://emeraldchat.com/logo7.svg
149
150 https://emeraldchat.com/karma_give?id=13599448&polarity=-1
151 -> https://www.emeraldchat.com/logo7.svg
152
153 https://emeraldchat.com/graphic_assets/hashtag.svg
154 -> https://emeraldchat.com/graphic_assets/hashtag.svg
155
156 https://static.emeraldchat.com/uploads/picture/image/5904252/n.jpg
157 -> https://static.emeraldchat.com/uploads/picture/image/5904252/n.jpg
158
159 https://robohash.org/ac0078461324c90be25a23b83c9ee484.png?set=set4
160 -> https://robohash.org/ac0078461324c90be25a23b83c9ee484.png?set=set4
161
162 https://emeraldchat.com/karma_give?id=13755419&polarity=1
163 -> https://www.emeraldchat.com/logo7.svg
164
165 https://emeraldchat.com/karma_give?id=13755419&polarity=-1
166 -> https://www.emeraldchat.com/logo7.svg
167
168 https://emeraldchat.com/karma_give?id=14019794&polarity=-1
169 -> https://www.emeraldchat.com/logo7.svg
170
171 https://emeraldchat.com/karma_give?id=14008355&polarity=1
172 -> https://www.emeraldchat.com/logo7.svg
173
174 https://robohash.org/e8a4c8c0d17eac9437a2f11dbed8dfe7.png?set=set4
175 -> https://robohash.org/e8a4c8c0d17eac9437a2f11dbed8dfe7.png?set=set4
176
177 https://robohash.org/9a94d3b9390cd3318c26295141b36251.png?set=set4
178 -> https://robohash.org/9a94d3b9390cd3318c26295141b36251.png?set=set4
179
180 https://static.emeraldchat.com/uploads/picture/image/5879714/IMG_20200818_212545-01.jpeg
181 -> https://static.emeraldchat.com/uploads/picture/image/5879714/IMG_20200818_212545-01.jpeg
182
183 https://emeraldchat.com/karma_give?id=undefined&polarity=1
184 -> https://www.emeraldchat.com/logo7.svg
185
186 https://robohash.org/1f18b883288b0bef3c09819c1f7ad742.png?set=set4
187 -> https://robohash.org/1f18b883288b0bef3c09819c1f7ad742.png?set=set4
188
189 https://robohash.org/91ea8674955b90537a64082dece6fc86.png?set=set4
190 -> https://robohash.org/91ea8674955b90537a64082dece6fc86.png?set=set4
191
192 https://static.emeraldchat.com/uploads/picture/image/5910633/Screenshot_20200823-192032_Chrome.jpg
193 -> https://static.emeraldchat.com/uploads/picture/image/5910633/Screenshot_20200823-192032_Chrome.jpg
194
195 https://robohash.org/a4220d59f6ef5a9611de8c34d6c4a599.png?set=set4
196 -> https://robohash.org/a4220d59f6ef5a9611de8c34d6c4a599.png?set=set4
197
198 https://robohash.org/cbe31fbaee373b1fde65e98ffb98e74d.png?set=set4
199 -> https://robohash.org/cbe31fbaee373b1fde65e98ffb98e74d.png?set=set4
200
201 https://static.emeraldchat.com/uploads/picture/image/5808331/wallpaperflare.com_wallpaper__14_.jpg
202 -> https://static.emeraldchat.com/uploads/picture/image/5808331/wallpaperflare.com_wallpaper__14_.jpg
203
204 https://emeraldchat.com/karma_give?id=13599448&polarity=1
205 -> https://www.emeraldchat.com/logo7.svg
206
207 https://emeraldchat.com/karma_give?id=14020290&polarity=1
208 -> https://www.emeraldchat.com/logo7.svg
209
210 https://emeraldchat.com/karma_give?id=13310649&polarity=1
211 -> https://www.emeraldchat.com/logo7.svg
212
213 https://emeraldchat.com/karma_give?id=12068538&polarity=1
214 -> https://www.emeraldchat.com/logo7.svg
215
216 https://static.emeraldchat.com/uploads/picture/image/5903290/d39a52c56b3a6a7cda1db49ea5bbea06ikj12345678iuhgvrtghj.jpg
217 -> https://static.emeraldchat.com/uploads/picture/image/5903290/d39a52c56b3a6a7cda1db49ea5bbea06ikj12345678iuhgvrtghj.jpg
218
219 https://www.emeraldchat.com/karma_give?id=12068538&polarity=1
220 -> https://www.emeraldchat.com/logo7.svg
221
222 https://static.emeraldchat.com/uploads/picture/image/5844780/wallpaperflare.com_wallpaper__24_.jpg
223 -> https://static.emeraldchat.com/uploads/picture/image/5844780/wallpaperflare.com_wallpaper__24_.jpg
224
225 https://emeraldchat.com/karma_give?id=13736449&polarity=1
226 -> https://www.emeraldchat.com/logo7.svg
227
228 https://robohash.org/eb2c7c4969f62f080a50f5511efc05de.png?set=set4
229 -> https://robohash.org/eb2c7c4969f62f080a50f5511efc05de.png?set=set4
230
231 https://static.emeraldchat.com/uploads/picture/image/5275769/F14C4E30-8E3D-43D6-BE63-CCA16CD99856.jpeg
232 -> https://static.emeraldchat.com/uploads/picture/image/5275769/F14C4E30-8E3D-43D6-BE63-CCA16CD99856.jpeg
233
234**/