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