Debugging and Security Testing with Firefox OS
Thanks to a lot of developers we have a wide set of tools at our hands. A good deal of security testing is reading docs and finding out how things are supposed to work. So these articles are just a summary of all the detailed docs available on wiki.mozilla.org and MDN. and you are still encouraged to visit them if you seek further information.
Requirements: Setting up b2g-desktop
Okay, did you already download your flavor of nightly build (Linux, Mac OS, Windows)? Then let's go.
Setting up b2g-desktop is as simple as extracting the archive and running the b2g binary:
tar xf b2g-something-something.tar.bz2 cd b2g ./b2g
And that's it. You can now play with a Firefox OS in a desktop window. Go play around: Open the browser (lower right window) and visit a web page, check the settings! Make yourself comfortable with b2g-desktop.
Setting up b2g-desktop with marionette is as easy as a pie, just make it that your b2g profile (like in the Firefox browser, all user settings are stored within a profile) has marionette enabled:
To do so, add the following line to your prefs.js file in gaia/profile/.
This will enable marionette-debugging to listen on port 2828 and allow the installed client to connect. This will suffice to get started, but if you want to know more look at the full Marionette docs at MDN. After we have enabled marionette-debugging, restart the b2g binary. You will see no difference in the b2g window, but it is already listening on port 2828.
For our example, we wil to remote-control the Browser App. Start it by clicking the browser icon in the b2g home screen's lower right with your mouse. Is the b2g binary showing the browser App? Good, here we go debugging it:
$ python fxos-reply.py list app://homescreen.gaiamobile.org/index.html#root app://browser.gaiamobile.org/index.html app://keyboard.gaiamobile.org/index.html
Aha, these are the running Apps and their URIs.
Now let's connect to the browser App, and investigate:
$ python fxos-reply.py connect app://browser.gaiamobile.org/index.html Connected to app://browser.gaiamobile.org/index.html
Let's use the querySelector API to find a
<menu> tag with
id="toolbar-start" and view it's HTML:
>>> document.querySelector("menu#toolbar-start").outerHTML <menu type="toolbar" id="toolbar-start"> <form id="url-bar" novalidate=""> <input id="ssl-indicator" value="" type="image"> <input id="url-input" placeholder="Enter search or address" data-l10n-id="enter-search-or-address" x-inputmode="verbatim" type="text"> <input style="background-image: url("style/images/go.png");" id="url-button" value="" type="image"> </form> <span id="tabs-badge">1<span id="more-tabs">›</span></span> <button id="awesomescreen-cancel-button"></button> <div id="throbber"></div> </menu>
Does it look familiar? It's the toolbar that contains the address bar and the New Tab button.
Let's click this button! It's
The New Tab UI should show now! Let's try something else:
Now go, play!