NDC Oslo '18 - Prison Break - When the web escapes the browser

NDC Oslo '18 - Prison Break - When the web escapes the browser

This was an introduction to hardware hacking using JavaScript held at NDC Oslo 2018.

0722ad084c65f6177d80cf793cfbd013?s=128

Dominik Kundel

June 15, 2018
Tweet

Transcript

  1. Prison Break When the Web Escapes the Browser Dominik Kundel

    - @dkundel Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  2. How many of you have a Microcontroller? Dominik Kundel |

    @dkundel | Photo by Felipe Faria on Unsplash
  3. Did you use it? Dominik Kundel | @dkundel | Photo

    by Igor Ovsyannykov on Unsplash
  4. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  5. Hi! I'm Dominik Kundel! Developer Evangelist at ! dkundel.com "

    @dkundel # dkundel@twilio.com $ github/dkundel Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  6. I ! JavaScript Photo by Thomas William & Thomas Kvistholt

    on Unsplash
  7. Hardware Dominik Kundel | @dkundel | Photo by Felipe Faria

    on Unsplash
  8. The destiny of Hardware Dominik Kundel | @dkundel | Photo

    by Igor Ovsyannykov on Unsplash
  9. Simple LED demos Dominik Kundel | @dkundel | #ndcoslo #nodebots

    #porgjs #coffeejs
  10. It's not easy... Dominik Kundel | @dkundel | Photo by

    Nicolas Thomas on Unsplash
  11. ! Preparation Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs

    #coffeejs
  12. ! Costly ! Dominik Kundel | @dkundel | #ndcoslo #nodebots

    #porgjs #coffeejs
  13. ! ⌘ + Z / Ctrl+Z Dominik Kundel | @dkundel

    | #ndcoslo #nodebots #porgjs #coffeejs
  14. ! Rewarding " Dominik Kundel | @dkundel | #ndcoslo #nodebots

    #porgjs #coffeejs
  15. C/C ++ Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs

    #coffeejs
  16. ! C/C ++ " Dominik Kundel | @dkundel | #ndcoslo

    #nodebots #porgjs #coffeejs
  17. Three ways to combine JavaScript & Hardware Dominik Kundel |

    @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  18. ! APIs & Protocols JavaScript ➡ API ➡ C/C++ ➡

    Hardware Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  19. APIs & Protocols Option 1: Particle Cloud API Dominik Kundel

    | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  20. What is a Particle? ! particle.io Dominik Kundel | @dkundel

    | #ndcoslo #nodebots #porgjs #coffeejs
  21. Particle Cloud API Example curl https: //api.particle.io/v1/devices/0123456789abcdef/brew \ -d access_token=123412341234

    \ -d "args=coffee" void setup() { // register the cloud function Particle.function("brew", brewCoffee); } int brewCoffee(String command) { if(command == "coffee") { return 1; } else return -1; } Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  22. APIs & Protocols Option 2 MQTT Lightweight machine-to-machine publish/subscribe messaging

    protocol Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  23. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  24. MQTT ! No need for IP Address of a device

    " ⚖ Scales to multiple devices ✅ Cross-platform / Cross-language Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  25. MQTT Example in JS var mqtt = require('mqtt'); var client

    = mqtt.connect('mqtt: //test.mqttbroker.example'); client.on('connect', function() { client.subscribe('presence'); client.publish('presence', 'Hello mqtt'); }); client.on('message', function(topic, message) { // message is Buffer console.log(message.toString()); client.end(); }); Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  26. MQTT Example in C ++ #include <SPI.h> #include <Ethernet.h> #include

    <PubSubClient.h> // Update these with values suitable for your network. byte mac[] = { 0xDE, 0xED, 0xBA, 0xFE, 0xFE, 0xED }; IPAddress ip(172, 16, 0, 100); IPAddress server(172, 16, 0, 2); void callback(char* topic, byte* payload, unsigned int length) { Serial.print("Message arrived ["); Serial.print(topic); Serial.print("] "); for (int i=0;i<length;i ++) { Serial.print((char)payload[i]); } Serial.println(); } EthernetClient ethClient; PubSubClient mqttClient(ethClient); void reconnect() { // Loop until we're reconnected while (!mqttClient.connected()) { Serial.print("Attempting MQTT connection ..."); // Attempt to connect if (mqttClient.connect("arduinoClient")) { Serial.println("connected"); // Once connected, publish an announcement ... mqttClient.publish("outTopic","hello world"); // ... and resubscribe mqttClient.subscribe("inTopic"); } else { Serial.print("failed, rc="); Serial.print(client.state()); Serial.println(" try again in 5 seconds"); // Wait 5 seconds before retrying delay(5000); } } } void setup() { Serial.begin(57600); mqttClient.setServer(server, 1883); mqttClient.setCallback(callback); Ethernet.begin(mac, ip); // Allow the hardware to sort itself out delay(1500); } void loop() { if (!mqttClient.connected()) { reconnect(); } mqttClient.loop(); } Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  27. MQTT Subscribe boolean rc = mqttClient.subscribe("myTopic"); Dominik Kundel | @dkundel

    | #ndcoslo #nodebots #porgjs #coffeejs
  28. MQTT Setup void setup() { Ethernet.begin(mac, ip); // Allow the

    hardware to sort itself out delay(1500); mqttClient.setServer(server, 1883); if (mqttClient.connect("myClientID")) { // connection succeeded } } void loop() { mqttClient.loop(); } Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  29. MQTT Callback void callback(char* topic, byte* payload, unsigned int length)

    { // Allocate the correct amount of memory for the payload copy byte* p = (byte*)malloc(length); // Copy the payload to the new buffer memcpy(p,payload,length); // Republish the received message mqttClient.publish("outTopic", p, length); // Free the memory free(p); } mqttClient.setCallback(callback); Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  30. Example Twitch Live Lamp ! github.com/dkundel/twitch-live-lamp Dominik Kundel | @dkundel

    | #ndcoslo #nodebots #porgjs #coffeejs
  31. API & Protocols ! Pros ! Lightweight, intuitive ways to

    communicate between devices " Move heavy business logic off devices # Programming language independent Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  32. API & Protocols ! Cons ! Still have to write

    C ++ code for the hardware " Need to deploy/use a message broker Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  33. ! "Tethered" Nodebots Node.js ➡ Hardware Dominik Kundel | @dkundel

    | #ndcoslo #nodebots #porgjs #coffeejs
  34. serialport Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  35. johnny-five Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  36. johnny-five (J5) ! Talk to microcontrollers from Node.js " Use

    a familiar syntax # Leverage the npm ecosystem $ Often tethered to a host machine Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  37. Blink on an Arduino with C ++ // the setup

    function runs once when you press reset or power the board void setup() { // initialize digital pin LED_BUILTIN as an output. pinMode(LED_BUILTIN, OUTPUT); } // the loop function runs over and over again forever void loop() { digitalWrite(LED_BUILTIN, HIGH); // turn the LED on (HIGH is the voltage level) delay(1000); // wait for a second digitalWrite(LED_BUILTIN, LOW); // turn the LED off by making the voltage LOW delay(1000); // wait for a second } Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  38. Blink on an Arduino with J5 var five = require('johnny-five');

    var board = new five.Board(); board.on('ready', function() { var led = new five.Led(13); led.blink(500); }); Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  39. Button with C ++ const int buttonPin = 2; //

    the number of the pushbutton pin const int ledPin = 13; // the number of the LED pin int buttonState = 0; // variable for reading the pushbutton status void setup() { // initialize the LED pin as an output: pinMode(ledPin, OUTPUT); // initialize the pushbutton pin as an input: pinMode(buttonPin, INPUT); } void loop() { // read the state of the pushbutton value: buttonState = digitalRead(buttonPin); // check if the pushbutton is pressed. If it is, the buttonState is HIGH: if (buttonState == HIGH) { // turn LED on: digitalWrite(ledPin, HIGH); } else { // turn LED off: digitalWrite(ledPin, LOW); } } Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  40. Button with J5 var five = require('johnny-five'); var board =

    new five.Board(); board.on('ready', function() { var led = new five.Led(13); var button = new five.Button(2); button.on('press', () => { led.on(); }); button.on('release', () => { led.off(); }); }); Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  41. Example #porgjs Building your own custom peripheral Dominik Kundel |

    @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  42. Goal of #porgjs: Build a custom peripheral device that reacts

    on events on your computer Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  43. Goal of #porgjs: Build a custom peripheral device that reacts

    on events on your computer Hack a Porg toy to scream whenever your build fails! Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  44. ⚠ Warning You might see the insides of a (toy)

    porg Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  45. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  46. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  47. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  48. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  49. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  50. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  51. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  52. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  53. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  54. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  55. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  56. Demo of PorgJS ! github.com/dkundel/porgjs Dominik Kundel | @dkundel |

    #ndcoslo #nodebots #porgjs #coffeejs
  57. "Tethered" Nodebots ! Pros ! Hardware independent code with J5

    ⚒ Use familiar tools # Bring your Editor/IDE $ Use the npm ecosystem % Great website for beginners Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  58. "Tethered" Nodebots ! Cons ⛓ Often tethered to a "host"

    " Less examples than classic Arduino projects Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  59. ! "Untethered" Nodebots JavaScript ⚭ Microcontroller Dominik Kundel | @dkundel

    | #ndcoslo #nodebots #porgjs #coffeejs
  60. JerryScript Ultra-lightweight JavaScript engine for the Internet of Things !

    jerryscript.net Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  61. Espruino Espruino is a JavaScript interpreter for microcontrollers. ! www.espruino.com

    Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  62. Espruino Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  63. Espruino ! Can run on ESP8266 microcontrollers ($2 a piece)

    " Has its own hardware versions as well # Open Source Code & Hardware ✍ Comes with its own IDE ⛔ Limited npm support & Does not work with J5 Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  64. Neonious A microcontroller board, programmable and debuggable out of the

    box. ! www.neonious.com Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  65. Neonious Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  66. Neonious ! Currently on Indiegogo " Has its own hardware

    ✍ Comes with its own IDE $ Supports TypeScript out of the box % Full Node.js and npm support & Built-in Ethernet & WiFi Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  67. Tessel Tessel 2 is a robust IoT and robotics development

    platform. ! tessel.io Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  68. Tessel Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  69. Tessel ! Run Node.js with (almost) the entire npm ecosystem

    " Compatible with J5 ⛓ Use your favorite toolchain & editor $ Open Source Code & Hardware % Tessel 2 is fairly expensive Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  70. Example #coffeejs JavaScript meets Coffee Machine Dominik Kundel | @dkundel

    | #ndcoslo #nodebots #porgjs #coffeejs
  71. Example #coffeejs Goals ! Control an existing device programatically "

    Build a REST API implementing IETF RFC 2324 Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  72. Example #coffeejs Goals ! Control an existing device programatically "

    Build a REST API implementing IETF RFC 2324 " Build a REST API implementing HTCPCP Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  73. Example #coffeejs Goals ! Control an existing device programatically "

    Build a REST API implementing IETF RFC 2324 " Build a REST API implementing HTCPCP " Build a REST API implementing Hyper Text Coffee Pot Control Protocol Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  74. Example #coffeejs Why Tessel? !" The coffee machine should work

    untethered # Use johnny-five to easyly swap microcontrollers $ It has to be internet connected % Quick setup / easy development & We need to build a server. npm packages help Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  75. Example #coffeejs Hacking It! Dominik Kundel | @dkundel | #ndcoslo

    #nodebots #porgjs #coffeejs
  76. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  77. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  78. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  79. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  80. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  81. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  82. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  83. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  84. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  85. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  86. Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs

  87. How I hacked a coffee machine using JavaScript ! bit.ly/coffee-js

    ! github.com/dkundel/htcpcp-delonghi Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  88. "Untethered" Nodebots ! Pros ✂ Untethered systems running JavaScript "

    Familar programming language ⚒ Use familiar tools $ Bring your own Editor/IDE % (potentially) use the npm ecosystem Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  89. "Untethered" Nodebots ! Cons ⛓ Less flexible on hardware choices

    " Missing cutting edge language features # Some docs better than others Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  90. ! How to get started Dominik Kundel | @dkundel |

    #ndcoslo #nodebots #porgjs #coffeejs
  91. ! Finding a project Dominik Kundel | @dkundel | #ndcoslo

    #nodebots #porgjs #coffeejs
  92. ! Use case driven learning Dominik Kundel | @dkundel |

    #ndcoslo #nodebots #porgjs #coffeejs
  93. ⚒ Hack existing projects Dominik Kundel | @dkundel | #ndcoslo

    #nodebots #porgjs #coffeejs
  94. ⚡ Electronics basics Dominik Kundel | @dkundel | #ndcoslo #nodebots

    #porgjs #coffeejs
  95. ! Useful things ⚖ A digital multimeter (Volt, Amps, Ohm)

    " A breadboard # Plenty of jumper wires $ A set of resistors % A few LEDs & A few Solid State Relays to emulate switches/buttons Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  96. ! Johnny-Five Inventor's Kit ! Available on Sparkfun Dominik Kundel

    | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  97. ! Grove Starter Kit for Arduino ! Available at Seeed

    Studio Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  98. ! Generic Arduino Starter Kit ! Elegoo UNO Starter Kit

    Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  99. ! Resources ! d-k.im/hardware-ndcoslo ☕ bit.ly/coffeejs # d-k.im/nodebots $ nodebots.io

    % johnny-five.io & tessel.io Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs
  100. Thank You! ! Dominik Kundel " d-k.im/hardware-ndcoslo # @dkundel $

    dkundel@twilio.com % github/dkundel Dominik Kundel | @dkundel | #ndcoslo #nodebots #porgjs #coffeejs