Quick and Easy IoT Prototyping with Involt

IoT, web apps, and connected devices are all becoming increasingly popular. But, the market still resembles a wild west apothecary, and no single IoT ecosystem or architecture seems to be the one bottle of snake oil we’ll all end up using. As such, we hackers are keen to build our own devices, instead of risking being locked into an IoT system that could become obsolete at any time. But, building an IoT device and interface takes a wide range of skills, and those who are lacking skill in the dark art of programming might have trouble creating a control app for their shiny new connected-thing.

Enter Involt, which is a framework for building hardware control interfaces using HTML and CSS. The framework is built on Node-Webkit, which means the conventions should be familiar to those with a bit of web development background. Hardware interactions (on Arduinos) are handled with simple CSS classes. For example, a button might contain a CSS class which changes an Arduino pin from high to low.

Involt can take that CSS and convert it into a function, which is then sent to the Arduino via serial or Bluetooth communication. For more advanced functionality, Javascript (or really any other language) can be used to define what functions are generated — and, in turn, sent to the Arduino. But, all that is needed for the basic functionality necessary for many IoT devices (which might only need to be turned on and off, or set to a certain value) is a bit of HTML and CSS knowledge. You’ll create both the interface and the underlying hardware interactions all within an HTML layout with CSS styling and functionality.

While Involt isn’t the only framework to simplify hardware interaction (it’s not even the only Node.js based method), the simplicity is definitely laudable. For those who are just getting started with these sorts of devices, Involt can absolutely make the process faster and less painful. And, even for those who are experienced in this arena, the speed and efficiency of prototyping with Involt is sure to be useful.

Fooling Google Search Console With Tricky PHP

When [Steve] received a notice from Google that a new owner had been added to his Google Search Console account, he knew something was wrong. He hadn’t added anyone to his account. At first he thought it might be a clever phishing tactic. Maybe the email was trying to get him to click a malicious link. Upon further investigation, he discovered that it was legitimate. Some strange email address had been added to his account. How did this happen?

When you want to add a website to Google’s services, they require that you prove that you own the actual website as a security precaution. One method to provide proof is by uploading or creating an HTML file to your website with some specific text inside. In this case, the file needed to be called “google1a74e5bf969ded17.html” and it needed to contain the string “google-site-verification: googlea174e5bf969ded17.html”.

[Steve] logged into his web server and looked in the website directory but he couldn’t find the verification file. Out of curiosity, he tried visiting the web page anyways and was surprised to find that it worked. After some experimentation, [Steve] learned that if he tried to load any web page that looked like “googleNNNNNNN.html”, he would be presented with the corresponding verification code of “google-site-verification: googleNNNNNNNN.html”. Something was automatically generating these pages.

After further investigation, [Steve] found that some malicious PHP code had been added to his website’s index.php page. Unfortunately the code was obfuscated, so he couldn’t determine exactly what was happening. After removing the new code from the index.php file, [Steve] was able to remove the hacker’s email address from [Steve’s] Google account.

This is a very interesting hack, because not only did it allow this one hacker to add himself to [Steve’s] Google account, but it would also have allowed anyone else to do the same thing. This is because each new hacker would have been able to fool Google’s servers into thinking that they had uploaded the verification file thanks to the malicious PHP code. It makes us think that perhaps Google’s verification system should use a separate randomized string inside of the verification file. Perhaps one that can’t be guessed or calculated based on known variables such as the file name.

Rendering Fractals With Just HTML and CSS

What’s better than spending hours and hours with CSS
trying to get images and text to center properly? Not [Jim], but he did notice that
CSS3 was a very powerful language. He wondered about building Tetris, a Turing Machine, or rendering fractals purely in CSS and HTML. The jury is still out if a Turing machine is possible, but he did manage to generate some simple fractals using just CSS and HTML, no JavaScript required.

Most fractals are recursive, and CSS rules can be applied to HTML objects that have already have rules applied to them. It’s not quite recursion, because there’s no way to dynamically generate HTML with CSS. However, with just a few tags, [Jim] can generate one level of a Pythagoras Tree. This method requires placing tags in the HTML for every level of the tree, greatly limiting the cool factor. That’s easily remedied by a few CTRL+Cs and CTRL+Vs.

The same technique can be used to render a Koch snowflake – seen on this page. Yes, it’s all HTML and CSS, without JavaScript. Why? Because he can, and that’s good enough for us.

HTML link tag hack sends you to the wrong place

hacking-html-a-tag

We consider ourselves fairly cautions Internet warriors. We know when to watch out for malicious links and tread lightly during those times. But this hack will still bite even the most cautions of link followers. It’s a hack that changes where a link is sending you after you click on it.

The concept is driven home right away by a link in the post which lists PayPal as the target when you hover over it with your mouse. Clicking on it will give you a warning that it could have been a malicious page you were redirected to. Of course the address line of the page shows that you were sent somewhere else, but it’s still an interesting issue. The hack is accomplished with just a few lines of JavaScript. In fact, the original example was 100 characters but a revision boils that down to just 67.

So who’s vulnerable to this kind of thing? It sounds like everyone that’s not using the Opera browser, which has been patched against the exploit. There are also some updates at the bottom of the post which mention that Firefox has been notified about it and Chrome is working on a patch.

[via Reddit]

HTML based AVR compiler aims to make Arduino development on iOS possible

It’s surprising what lengths people will go to in order to bring functionality to their smart phones. In this case, [Tadpol] wanted a way to develop for his Arduino on an iOS device like an iPad or iPhone. He figures it’s possible to rewrite the IDE as HTML5, but since that’s a pretty large mountain to climb, he started by building a browser-based AVR compiler. It’s an interesting concept, and he’s got a working prototype up on Github for you to test. Perhaps you can throw your hat in the ring and help him with development?

The web interface uses boxes to add to the code. What you see above is three sets of commands which will blink an LED. The project, named Avrian Jump, uses a simple ladder language to feed the compiler, with several different options for output. The most interesting in our mind is a WAV file which can be used to program an AVR from the audio out of your device. That would make programming as simple as connecting the specially modified AVR to your headphone jack. There’s also an ASCII output which allows you to save your programs for later alteration, S19 output for AVRdude programming, and an assembler output for debugging purposes. It’s hard to see where this project might go, but we have to admit that the concept is intriguing.

Finally, LaTeX in HTML files

Writing a paper in LaTeX will always result in beautiful output, but if you’d like to put that document up on the web you’re limited to two reasonable options: serve the document as a .PDF (with the horrors involves, although Chrome makes things much more palatable), or relying on third-party browser plugins like TeX The World. Now that [Todd Lehman] has finally cooked up a perl script to embed LaTeX in HTML documents, there’s no reason to type e^i*pi + 1 = 0 anymore.

For those not in the know, LaTeX is a document typesetting language that produces beautiful output, usually in PDF form. Unfortunately, when [Tim Berners-Lee] was inventing HTML, he decided to roll his own markup language instead of simply stealing it from [Don Knuth]. Since then, LaTeX aficionados have had to make do with putting TeX snippets into web pages as images or relying on the [; \LaTeX ;] generated from the TeX The World browser extension.

[Todd Lehman]’s perl script generates the PDF of his LaTeX file and pulls out all the weird font and math symbols into PNG files. These PNG files are carefully embedded into the HTML file generated from the normal text pulled from the LaTeX file. It’s a ton of work to get these document systems working correctly, but at least there’s a reasonable way to put good-looking LaTeX on the web now.

Abusing HTTP status codes

Concerns over privacy online are an ever growing theme. Every day we see people complaining about the policies of facebook and the like. [Mike Cardwell] points out another method of gleaning a bit of personal data from you that you may not have seen yet. By embedding a hidden image or using some really simple javascript, he can tell if you are currently logged into Gmail, Twitter, Facebook, or Digg. While this could possibly be used for more nefarious things, he points out that you could also use it for customizing your website to better suit the experience of the browser. For example, if the “reader” is already logged into Gmail, you could have any email links automatically open a gmail instance instead of the local mail client.