index.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="generator" content="Hugo 0.36" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="/assets/css/theme.css">
  8. <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="Pleasant Programmer">
  9. <script type="text/javascript" src="//use.typekit.net/iwm5axp.js"></script>
  10. <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  11. <title>Pleasant Programmer</title>
  12. </head>
  13. <body>
  14. <header id="header" role="banner">
  15. <div id="thomas">
  16. <img src="/assets/img/thomas.gif" alt="DJ THOMAS IN DA HAUS">
  17. <img src="/assets/img/thomas.png" alt="Pleasant Programmer">
  18. </div>
  19. <h1 class="site-title"><a href="/">Pleasant Programmer</a></h1>
  20. <nav id="menu" role="navigation">
  21. <ul>
  22. <li class="twitter">
  23. <a href="http://twitter.com/pleasantprog">@pleasantprog</a>
  24. </li>
  25. <li><a href="/pages/projects.html">projects</a></li>
  26. <li><a href="/posts.html">archives</a></li>
  27. <li><a href="/tags.html">tags</a></li>
  28. <li><a href="/rss.xml">rss</a></li>
  29. </ul>
  30. </nav>
  31. </header>
  32. <div id="container">
  33. <main id="content" role="main">
  34. <div class="postindex">
  35. <article class="h-entry post-text" itemscope itemtype="http://schema.org/Blog">
  36. <header>
  37. <h1 class="p-name entry-title" itemprop="headline">
  38. <a href="/posts/audventure.html" class="u-url">Audventure</a>
  39. </h1>
  40. </header>
  41. <div class="e-content entry-content">
  42. <p>Sometime around 2013 I wrote a clone of the GBA game <a href="https://www.nintendo.co.jp/n08/bit_g/">bit Generations
  43. SoundVoyager</a> called
  44. <a href="https://audventure.pleasantprogrammer.com">audventure</a>. SoundVoyager is
  45. actually a collection of mini-games where sound is the main focus. You can
  46. actually play the game blind, and at some point, that&rsquo;s pretty much what
  47. happens.</p>
  48. <h2 id="sound-catcher">sound catcher</h2>
  49. <p>The signature mini-game in SoundVoyager is sound catcher. In the mini-game, you
  50. can only move left and right at the bottom of the stage, while a &ldquo;sound&rdquo; falls
  51. from the top. Your goal is to catch the sound which is signified by a green dot.
  52. When you catch it, the sound or beat becomes part of the BGM and a new dot
  53. appears with a different sound.</p>
  54. <p>You can of course use your eyes and move accordingly, but if you put on
  55. earphones, you can actually hear where the dot is, either on your left or right,
  56. with it getting louder as it gets close to you. As you collect more sounds, the
  57. dot gets more and more transparent. Eventually (and this is where it gets fun),
  58. you won&rsquo;t be able to see the sounds anymore and will have to rely mostly on your
  59. ears.</p>
  60. <p>You can see what the original game looks like in <a href="https://www.youtube.com/watch?v=C12WRgfIOC8">this
  61. video</a> or you can play it under
  62. <em>sound safari</em> in <a href="https://audventure.pleasantprogrammer.com">audventure</a>.</p>
  63. <h2 id="webaudio-vs-flash">WebAudio vs Flash</h2>
  64. <p>At the time I wrote audventure, only Chrome supported WebAudio. Also, the API
  65. looked (and still looks) quite complicated. Flash on the other hand, was
  66. starting to die, but still well-supported so I went with that. For the most
  67. part, it worked okay though Chrome actually had timing issues when playing
  68. sounds. Now, it doesn&rsquo;t work in any browser. I tried to debug the issues but
  69. ultimately ended up just rewriting it to use WebAudio instead.</p>
  70. <p>For the game, I needed to simulate the source of the sound in 2D/3D space. Flash
  71. only really gives you stereo panning and volume control. With some maths, we can
  72. actually get an acceptable solution. Less importantly, I needed to be able to
  73. get frequency data of the currently playing &ldquo;sound&rdquo; to pulse the background. For
  74. this, I actually had to implement the feature in the Flash library I was using.</p>
  75. <p>With WebAudio, spatial audio is already built-in and you can simply give it the
  76. coordinates of the sounds and the listener. There are some other options to
  77. tweak, but for the most part, no complex math is needed. Getting frequency data
  78. for a sound is also actually built-in and didn&rsquo;t take too long to integrate.</p>
  79. <p>Overall, I was impressed by how much you can do with WebAudio out-of-the-box. I
  80. kind of understand why it&rsquo;s complicated, but there&rsquo;s some simple functionality
  81. that I wish was included. For example, there is no API to pause and then resume
  82. playing an audio buffer. You have to manually save the elapsed time and play
  83. from there.</p>
  84. <h2 id="other-mini-games">Other mini-games</h2>
  85. <p>So far I&rsquo;ve only actually implemented the sound catcher mini-game. There are
  86. around 4 different categories with slight variations in between.</p>
  87. <h3 id="sound-catcher-sound-slalom">sound catcher / sound slalom</h3>
  88. <p>I&rsquo;ve explained sound catcher a while ago; sound slalom is a minor variation on
  89. that. Instead of waiting for the &ldquo;sound&rdquo; to reach you, you now have to guide
  90. yourself in between 2 &ldquo;poles&rdquo; of sound, as in <a href="https://en.wikipedia.org/wiki/Slalom_skiing">slalom
  91. skiing</a>. But this time, you can
  92. also accelerate forward. The goal is to finish the course before the time runs
  93. out.</p>
  94. <h3 id="sound-drive-sound-chase">sound drive / sound chase</h3>
  95. <p>In sound drive, you&rsquo;re driving against the flow on a 5 lane road. You have to
  96. avoid oncoming cars, trucks and animals until you reach the end. You&rsquo;re allowed
  97. to change lanes and accelerate, and the game tracks your best time. Sound chase
  98. is pretty much the same, except you&rsquo;re trying to catch up to a &ldquo;sound&rdquo;.</p>
  99. <h3 id="sound-cannon">sound cannon</h3>
  100. <p>In sound cannon, you&rsquo;re immobile but can rotate within a 180 degree angle. Your
  101. goal is too shoot down &ldquo;sounds&rdquo; which are heading your way. If a sound reaches
  102. you, it&rsquo;s game over. You win when you kill all the sounds.</p>
  103. <h3 id="sound-picker-sound-cock">sound picker / sound cock</h3>
  104. <p>In sound picker, you can move in a giant square field where various sounds are
  105. scattered around. Your goal is to pick up all the sounds within the time limit.
  106. Sound cock is similar, except the sounds are chickens and you have to chase them
  107. around.</p>
  108. <h2 id="source-code">Source Code</h2>
  109. <p>If you want to see the source code, you can check it out
  110. <a href="https://git.pleasantprogrammer.com/games/audventure">here</a>. The sound files
  111. aren&rsquo;t in the repo though, since I&rsquo;m not quite sure about the licensing. If you
  112. want to contribute music or sound effects, I&rsquo;d gladly appreciate it.</p>
  113. </div>
  114. <small class="dateline">Posted: <time class="published dt-published" itemprop="datePublished" datetime="2017-11-19">2017-11-19</time></small>
  115. | <small class="commentline"><a href="/posts/audventure.html#isso-thread">Comments</a></small>
  116. </article>
  117. </article>
  118. <article class="h-entry post-text" itemscope itemtype="http://schema.org/Blog">
  119. <header>
  120. <h1 class="p-name entry-title" itemprop="headline">
  121. <a href="/posts/openpreppad.html" class="u-url">OpenPrepPad</a>
  122. </h1>
  123. </header>
  124. <div class="e-content entry-content">
  125. <p>Smart electronics and IoT (Internet of Things) are all the rage these days. You
  126. have a lot of companies sprout up trying to make the next big thing, which also
  127. leads to a lot of failures big and small. Pebble, the maker of my smartwatch,
  128. got bought out by Fitbit recently. This left watch owners without any official
  129. support, but thankfully, community members <a href="http://rebble.io/">stepped up</a> to continue
  130. maintaining it.</p>
  131. <p>Another casualty of the IoT boom was the <a href="http://theorangechef.com/">Orange Chef</a> <a href="https://www.amazon.com/Orange-Chef-Smart-Scale-Silver/dp/B00KFW8L90">Prep Pad</a>. It&rsquo;s a
  132. bluetooth connected weighing scale to make it easy to track your calories and
  133. carb/fat/protein intake. My dad bought it last year only to find out that the
  134. app was incredibly buggy. The search function doesn&rsquo;t work which makes the whole
  135. thing practically useless. I also found out later that you can&rsquo;t even download
  136. the app to use the scale anymore.</p>
  137. <p><strong>Note</strong> I just found out as I was writing this post that it <em>may</em> get supported
  138. by <a href="http://www.prnewswire.com/news-releases/perfect-company-acquires-orange-chefs-prep-pad-related-ip-continues-momentum-in-the-connected-kitchen-300383178.html">another company</a>.</p>
  139. <p>So the app is useless, but at least you can use it as a scale, right?</p>
  140. <p><img src="/galleries/openpreppad/preppad.jpg" alt="Prep Pad" /></p>
  141. <p>Nope. The device has no display whatsoever. The only controls on it are the
  142. on/off button and a green LED that isn&rsquo;t even that useful at telling you whether
  143. it&rsquo;s on or not. At this point, it&rsquo;s just a giant paperweight.</p>
  144. <h2 id="reverse-engineering">Reverse Engineering</h2>
  145. <p>Since I essentially had nothing to lose, I tried poking at the thing to figure
  146. out how it works. I didn&rsquo;t really have experience with bluetooth besides trying
  147. to get my bluetooth mouse connected on Linux. The main thing I used then was
  148. <code>bluetoothctl</code> which is essentially a CLI for managing bluetooth devices so I
  149. started there.</p>
  150. <p>I started up <code>bluetoothctl</code> and turned on the Prep Pad. And it showed up!</p>
  151. <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-text" data-lang="text"><span></span>[bluetooth]# power on
  152. [CHG] Controller ... Class: 0x00010c
  153. Changing power on succeeded
  154. [CHG] Controller ... Powered: yes
  155. [bluetooth]# scan on
  156. Discovery started
  157. [CHG] Device 1C:BA:8C:21:7C:BB RSSI: -51
  158. [CHG] Device 1C:BA:8C:21:7C:BB Name: CHSLEEV_00
  159. [CHG] Device 1C:BA:8C:21:7C:BB Alias: CHSLEEV_00
  160. </code></pre></div>
  161. <p>I then connected to it, which was surprisingly easy.</p>
  162. <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-text" data-lang="text"><span></span>[bluetooth]# connect 1C:BA:8C:21:7C:BB
  163. Attempting to connect to 1C:BA:8C:21:7C:BB
  164. [CHG] Device 1C:BA:8C:21:7C:BB Connected: yes
  165. [CHG] Device 1C:BA:8C:21:7C:BB Name: CH BTScale_00
  166. [CHG] Device 1C:BA:8C:21:7C:BB Alias: CH BTScale_00
  167. </code></pre></div>
  168. <p>Now normally, when you turn the device on, the green light flashes occasionally.
  169. Once I connected to it, the green light stayed on permanently. Clearly, I was
  170. making progress. A lot of services were also discovered but I had no idea what
  171. those things were at that point.</p>
  172. <p>After a lot of poking around, I could check the general device information. You
  173. could get the hardware, software and firmware version. There&rsquo;s also the device
  174. serial number which was nowhere on the actual physical device.</p>
  175. <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-text" data-lang="text"><span></span>[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017
  176. [CH BTScale_00:/service0010/char0017]# attribute-info
  177. Characteristic - Firmware Revision String
  178. UUID: 00002a26-0000-1000-8000-00805f9b34fb
  179. Service: /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010
  180. Value: 0x31
  181. Value: 0x2e
  182. Value: 0x31
  183. Value: 0x33
  184. Value: 0x41
  185. Value: 0x00
  186. Flags: read
  187. [CH BTScale_00:/service0010/char0017]# read
  188. Attempting to read /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017
  189. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x31
  190. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x2e
  191. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x31
  192. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x33
  193. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x41
  194. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x00
  195. 31 2e 31 33 41 00 1.13A.
  196. [CH BTScale_00:/service0010/char0017]#
  197. </code></pre></div>
  198. <p>There was also a service which contained Accel Enable, Accel Range, Accel
  199. X-Coordinate, Accel Y-Coordinate, and Accel Z-Coordinate. I guess it stands for
  200. accelerometer, which is probably what it uses to weigh things.</p>
  201. <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-text" data-lang="text"><span></span>[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026
  202. [CH BTScale_00:/service0023/char0024/desc0026]# read
  203. Attempting to read /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026
  204. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x41
  205. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x63
  206. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x63
  207. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x65
  208. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6c
  209. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x20
  210. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x45
  211. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6e
  212. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x61
  213. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x62
  214. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6c
  215. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x65
  216. 41 63 63 65 6c 20 45 6e 61 62 6c 65 Accel Enable
  217. </code></pre></div>
  218. <p>I couldn&rsquo;t read from any of the Accel Coordinates. It kept saying permission
  219. denied. I could however, notify on them. But that didn&rsquo;t yield anything as well.
  220. What I <em>could</em> read was Accel Enable, which was set to 00. I guess that means it
  221. was off. After writing 01 to Accel Enable, I found I could get values out of
  222. Accel X-Coordinate! Also, the green LED which was permanently on turned off.</p>
  223. <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-text" data-lang="text"><span></span>[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024
  224. [CH BTScale_00:/service0023/char0024]# write 01
  225. Attempting to write /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024
  226. [CH BTScale_00:/service0023/char0024]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a
  227. [CH BTScale_00:/service0023/char002a]# notify on
  228. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Notifying: yes
  229. Notify started
  230. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x5b
  231. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
  232. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
  233. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00
  234. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x55
  235. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
  236. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
  237. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00
  238. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x59
  239. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
  240. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
  241. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00
  242. </code></pre></div>
  243. <p>I tried pressing the scale down a few times, and the values changed accordingly.
  244. Now, I just had to figure out how to convert the values into grams. It looked
  245. like the values were 32-bit integers sent as 4 bytes. In the above example it
  246. would be <code>0x0002a35b</code>, <code>0x0002a355</code>, <code>0x0002a359</code> or 172891, 172855, 172899. The
  247. values also decrease as you exert more effort on the scale. So assuming you take
  248. the initial value as <em>tare</em>, you simply subtract any succeeding value from that
  249. <em>tare</em> and you get the &ldquo;weight&rdquo;.</p>
  250. <p>The values I got didn&rsquo;t seem to be in grams though. After weighing some things
  251. on an actual scale and comparing the values I got, I found I can just divide the
  252. values by 14 and get something in grams. That 14 is entirely a magic number
  253. though and I have no idea whether other Prep Pad&rsquo;s would have the same constant.</p>
  254. <h2 id="openpreppad">OpenPrepPad</h2>
  255. <p>With all that figured out, I went ahead and made a <a href="https://github.com/thatsmydoing/openpreppad">simple CLI application</a>
  256. to interface with the Prep Pad. Ironically, node was the simplest thing I found
  257. that had <a href="https://github.com/sandeepmistry/noble">nice bluetooth library support</a> so that&rsquo;s what I wrote it in. I
  258. also added most of the technical details in the README for that as well.</p>
  259. <p>While this is all well and cool, I doubt the intersection of Linux users and
  260. people who <s>got ripped off</s> bought the Prep Pad is anyone besides me. In
  261. light of that, I&rsquo;m in the process of making a React Native version of the app,
  262. but that&rsquo;s still a work in progress. Who knows, if the new owners of Prep Pad
  263. are good, I might not even need to finish it.</p>
  264. </div>
  265. <small class="dateline">Posted: <time class="published dt-published" itemprop="datePublished" datetime="2017-01-15">2017-01-15</time></small>
  266. | <small class="commentline"><a href="/posts/openpreppad.html#isso-thread">Comments</a></small>
  267. </article>
  268. </article>
  269. <article class="h-entry post-text" itemscope itemtype="http://schema.org/Blog">
  270. <header>
  271. <h1 class="p-name entry-title" itemprop="headline">
  272. <a href="/posts/haproxy-charset.html" class="u-url">Haproxy Charset</a>
  273. </h1>
  274. </header>
  275. <div class="e-content entry-content">
  276. <p>A common problem we encounter is for things like <em>ñ</em> not showing up correctly. This actually caused <a href="http://www.rappler.com/nation/politics/elections/2016/132894-human-error-hash-election-results-code-mismatch">some issues</a> in the recent Philippine elections, but this isn&rsquo;t about hash codes or anything like that.</p>
  277. <p>By default, we use UTF-8 for text storage and rendering. A problem is that browsers don&rsquo;t assume UTF-8 as the default and you need to have either a <code>&lt;meta charset=&quot;utf-8&quot; /&gt;</code> in the HTML or <code>Content-Type: text/html; charset=utf-8</code> in the headers. A few of our services don&rsquo;t set the <code>Content-Type</code> with the <code>charset=utf-8</code> part so you&rsquo;d get piñata instead of piñata.</p>
  278. <p>Being lazy, we usually just correct this at the reverse proxy side. It&rsquo;s trivial to do in nginx. You just need to add <code>charset utf-8;</code> to your configuration and you&rsquo;re good. For haproxy though, I couldn&rsquo;t readily find a solution for it and had to go through the docs to see what I could do.</p>
  279. <p>After a bit of experimenting, I had success with this:</p>
  280. <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-text" data-lang="text"><span></span># set content-type to utf-8 if not already
  281. acl has_charset hdr_sub(content-type) -i charset=
  282. rspirep (Content-Type.*) \1;\ charset=utf-8 unless has_charset
  283. </code></pre></div>
  284. <p>This is probably not the best way to do it. Arguably, we should just fix our services to have the correct <code>Content-Type</code> in the first place, but I can do that some other time.</p>
  285. </div>
  286. <small class="dateline">Posted: <time class="published dt-published" itemprop="datePublished" datetime="2016-06-24">2016-06-24</time></small>
  287. | <small class="commentline"><a href="/posts/haproxy-charset.html#isso-thread">Comments</a></small>
  288. </article>
  289. </article>
  290. <article class="h-entry post-text" itemscope itemtype="http://schema.org/Blog">
  291. <header>
  292. <h1 class="p-name entry-title" itemprop="headline">
  293. <a href="/posts/cloudflare-shenanigans.html" class="u-url">Cloudflare Shenanigans</a>
  294. </h1>
  295. </header>
  296. <div class="e-content entry-content">
  297. <p>An old client of ours managed to convince a telco to zero-rate the data for their app. In order to whitelist it though, we needed to use plain HTTP for domain whitelisting. For HTTPS, they can only whitelist by IP address. Like any good developer, we were using HTTPS. Also, like any good developer, we put our server behind Cloudflare.</p>
  298. <p>Now the problem is that Cloudflare can put you behind <a href="https://www.cloudflare.com/ips/">any IP they own</a>, which is a huge range. There&rsquo;s no guarantee that the IP we have now is going to be the same later on. So we did the reasonable thing and asked them to whitelist all of the Cloudflare IPs. And the telco agreed! We were in total disbelief when that happened. But hey, if life gives you free internet, you take it.</p>
  299. <p>We never actually empirically tested whether other sites hosted on Cloudflare were also actually zero-rated. But I like to think that we saved a lot of people on their data costs from browsing Reddit and 4chan. But alas, good things must come to an end.</p>
  300. <p>A few months after we started beta testing the app, Cloudflare added more IPs to their range. Unfortunately, our server got moved to those new IPs which were not whitelisted yet. Apparently, the telco whitelisting process was incredibly convoluted and time consuming. Our client didn&rsquo;t want to bother asking them to whitelist more IPs. We also tried asking Cloudflare to move us back to the original IP range, but they could only do that if we were in their enterprise tier. We couldn&rsquo;t really afford that, so we looked for other options.</p>
  301. <p>Since Cloudflare was essentially just a giant reverse proxy, theoretically there should be no distinction between one IP address from another. The specific IP we get is probably just for load balancing. So we tried accessing the IPs in the range directly and just setting the Host header and it worked! But we get SSL errors because the IP itself doesn&rsquo;t have its own certificate.</p>
  302. <p>After more testing, we figured out that you could actually use any Cloudflare backed domain so long as we properly set the Host header. We just needed to find one still in the old range. Coincidentally, 4chan.org was. Which led to this wonderful commit</p>
  303. <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><code class="language-diff" data-lang="diff"><span></span>commit 123456789abcdef
  304. Author: ~~~~~~
  305. Date: ~~~~~~
  306. 4chan hack
  307. <span style="color: #000080; font-weight: bold">diff --git a/src/com/client/common/Util.java b/src/com/client/common/Util.java</span>
  308. <span style="color: #A00000">--- a/src/com/client/common/Util.java</span>
  309. <span style="color: #00A000">+++ b/src/com/client/common/Util.java</span>
  310. <span style="color: #800080; font-weight: bold">@@ -210,7 +210,8 @@ public class Util {</span>
  311. }
  312. public static String getServerAddress(Context context) {
  313. <span style="color: #A00000">- String address = &quot;https://backend.client.com&quot;;</span>
  314. <span style="color: #00A000">+ // String address = &quot;https://backend.client.com&quot;;</span>
  315. <span style="color: #00A000">+ String address = &quot;https://4chan.org&quot;;</span>
  316. if(!isDebug(context)) return address;
  317. try {
  318. <span style="color: #000080; font-weight: bold">diff --git a/src/com/client/common/logging/APIClient.java b/src/com/client/common/logging/APIClient.java</span>
  319. <span style="color: #A00000">--- a/src/com/client/common/logging/APIClient.java</span>
  320. <span style="color: #00A000">+++ b/src/com/client/common/logging/APIClient.java</span>
  321. <span style="color: #800080; font-weight: bold">@@ -101,6 +101,7 @@ public class APIClient {</span>
  322. private HttpResponse postInternal(String url, List&lt;NameValuePair&gt; data, boolean forRegistration) throws ClientProtocolException, IOException {
  323. HttpPost request = new HttpPost(Util.getServerAddress(mContext)+&quot;/api/&quot;+url);
  324. request.setHeader(&quot;X-API-VERSION&quot;, apiVersion);
  325. <span style="color: #00A000">+ request.setHeader(&quot;Host&quot;, &quot;backend.client.com&quot;);</span>
  326. if(data == null) {
  327. data = new ArrayList&lt;NameValuePair&gt;();
  328. </code></pre></div>
  329. <p>Eventually, we did decide to just abandon Cloudflare for the server. We probably weren&rsquo;t going to be the target of a DDOS or anything. This also allowed us to do more secure things like pinning the server certificate in the application itself. Clearly, this is what we should have just done in the first place, but at the time we just wanted a stopgap solution.</p>
  330. <p>I just still find it funny we were making people&rsquo;s phones go to 4chan.org everyday for more than a year.</p>
  331. </div>
  332. <small class="dateline">Posted: <time class="published dt-published" itemprop="datePublished" datetime="2015-12-25">2015-12-25</time></small>
  333. | <small class="commentline"><a href="/posts/cloudflare-shenanigans.html#isso-thread">Comments</a></small>
  334. </article>
  335. </article>
  336. </div>
  337. <nav class="postindexpager">
  338. <ul class="pager clearfix">
  339. <li class="next">
  340. <a href="/page/2.html">Older posts &rarr;</a>
  341. </li>
  342. </ul>
  343. </nav>
  344. </main>
  345. <footer id="footer" role="contentinfo">
  346. <p>
  347. <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">
  348. <img alt="CC-BY-SA" style="border-width:0" src="https://licensebuttons.net/l/by-sa/3.0/80x15.png">
  349. </a> &copy; 2018 Thomas Dy - Powered by <a href="http://gohugo.io">Hugo</a></p>
  350. </footer>
  351. </div>
  352. <script src="/assets/js/konami.js"></script>
  353. <script>
  354. var easter_egg = new Konami();
  355. easter_egg.code = function() {
  356. var el = document.getElementById('thomas');
  357. if(el.className == "whoa") {
  358. el.className = "";
  359. }
  360. else {
  361. el.className = "whoa";
  362. }
  363. document.body.scrollTop = document.documentElement.scrollTop = 0;
  364. }
  365. easter_egg.load();
  366. </script>
  367. <script
  368. data-isso="https://isso.pleasantprogrammer.com/"
  369. src="https://isso.pleasantprogrammer.com/js/count.min.js">
  370. </script>
  371. </body>
  372. </html>