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