in the browser

Old school languages on new-fangled platforms

Richard Bateman

Author of FireBreath, a cross-platform framework for writing Browser Plugins

http://slides.com/taxilian/browsercpp

OpenWest 2015

C++

Why C++???

  • Never use native code when there is another option -- ever!
  • Many features aren't available in the browser/HTML5 yet
  • C++ is one of the most portable programming languages available
    • It's possible to build a library in C++ and use it on windows, linux, mac, iphone, android and more

What are the options?

  • NPAPI plugins
  • ActiveX controls
  • Emscripten / asm.js
  • Google Native Client
  • Google Native Messaging
  • others...

NPAPI

  • Allows native code to be run from the browser
  • Tight integration with Javascript
  • Decent drawing support
  • Supported by Firefox, Opera, Safari, and Chrome until 42.0
  • Well known
    • Flash, Silverlight, Quicktime, Java, etc
  • Traditional meaning of "Browser Plugin" (not to be confused with Browser Extensions, a totally different thing)

Netscape Plugin API

Pros:

Cons:

  • User must download and install the plugin
  • Many potential security implications
    • Flash and Java in particular have had a history of exploits
  • You don't own the process, so be careful what you do
  • Chrome dropped support in 42.0
    • You can re-enable, but after 45.0 you won't be able to
  • FireFox has "click-to-play", plugins disabled until user activates them
  • Allows native code to be run from the browser
  • Tight integration with Javascript
  • Excellent drawing support
  • Well known
    • Flash, Silverlight, Quicktime, Java, etc
  • COM/ActiveX controls are used by far more things than just the browser, so sharing code is easier
  • User must download and install the control
  • Many potential security implications
    • Flash and Java in particular have had a history of exploits
  • You must use COM/ActiveX, which is very difficult
  • Only works on Internet Explorer

ActiveX

Also known as COM

Pros:

Cons:

  • No installation needed!
  • The C++ compiler outputs javascript
  • Complex C++ libraries can be run natively in your browser
  • Both firefox and chrome optimize asm.js compliant code for "near-native" performance
  • With a little Javascript/HTML5 you can access files, camera, etc
  • You are actually running in the web page, so you are sandboxed
    • You are limited to the memory available to javascript
    • Filesystems, etc are virtual
    • No actual system access is possible; no direct device access is possible.
  • Many uses will require extra javascript to perform operations
  • Only FireFox and Chrome support it well, others will perform poorly
  • C++ code isn't usually async, so it's easy to lock up your web page
    • (Using web workers can help with this)

http://kripken.github.io/emscripten-site/

Emscripten

LLVM compiler - C++ to asm.js Javascript

Pros:

Cons:

How I have used it:

  • We built the GradeCam image processing code (C++) in emscripten.
     
    • We used Javascript's getUserMedia and HTML5 Canvas to get image data from the camera, then passed it into a web worker to run the emscripten version of our processing code. It takes about 4x longer to process than native code, but is usable!
       
  • We compiled libtiff with emscripten and use it with a web worker and the FileReader HTML5 API to read multi-page TIFF files

http://kripken.github.io/emscripten-site/

Emscripten

LLVM compiler - C++ to asm.js Javascript

  • No installation needed!
  • Executed as actual native code, so very fast
  • Compiler does weird things to ensure that bugs cannot lead to serious security vulnerabilities
  • pNaCl (pronounced pinnacle) compiles to an intermediate bytecode, then compiled on each platform and is thus cross platform (think Chromebook)
  • Wide range of drawing, audio, opengl, input, and network functionality available

Native code run in a "safe" sandbox

  • Only works on Google Chrome
  • You are sandboxed, so no system APIs, direct file access, advanced network access, direct device access, etc. If it isn't exposed by their APIs and you can't compile it in yourself you can't use it.
  • All communication with javascript is asynchronous via a "PostMessage" API; this can make things complicated in some cases

https://developer.chrome.com/native-client

Google Native Client

Pros:

Cons:

Uses:

  • Basically as a faster alternative to emscripten
    • We used Javascript's getUserMedia and HTML5 Canvas to get image data from the camera, then passed it into a pNaCL plugin to run the processing code.
  • Check out naclbox -- dosbox port to native client. http://www.naclbox.com/

Native code run in a "safe" sandbox

https://developer.chrome.com/native-client

Google Native Client

  • You aren't sandboxed so you can use:
    • System APIs
    • Hardware
    • Arbitrary network protocols
    • etc
       
  • The application could have its own UI, etc, and just communicate back with the browser; this allows for many interesting possibilities.
  • Only works on Google Chrome
  • Communication with browser is all JSON based
    • Binary data must be base64 encoded or similar
  • User must install both application and extension
    • App installer can install the extension, but requires browser restart
  • No direct browser access, requires an extension and support javascript
  • Security considerations

https://developer.chrome.com/extensions/nativeMessaging

Native background application launched from Chrome

Google Native Messaging

Pros:

Cons:

  • Provide functionality to the browser which is normally not possible from a sandboxed environment
    • Respond to system hotkeys outside of the browser
    • Access USB devices or use special device drivers
    • Implement a custom network protocol
    • Access files in ways FileReader doesn't allow
  • Launch an application from the browser
    • Just because it *can* communicate doesn't mean it has to

https://developer.chrome.com/extensions/nativeMessaging

Native background application launched from Chrome

Google Native Messaging

Uses:

There are other options

Mozilla js-ctypes
Web-RTC

AJAX to talk to a local server

Customize the browser
 

These are all complicated subjects that we will be ignoring for today =]

FireBreath

A Cross-platform plugin framework

NPAPI

ActiveX

Chrome

Firefox

Opera

Safari

Internet Explorer

NPAPI

ActiveX

Chrome

Firefox

Opera

Safari

Internet Explorer

April 2015

NPAPI

ActiveX

 

Firefox

Opera

Safari

Internet Explorer

FireWyrm

Let's look at code!

Native Client

Native code sandboxed

Native Client Examples

You can run these yourself!

 

http://www.naclbox.com/gallery

Now us

https://github.com/

taxilian-browsercpp

/nacl_cmake

Emscripten

C++ Compiled to Javascript

http://kripken.github.io/emscripten-site/docs/

Emscripten Examples

You can run these yourself!

Make sure you use FireFox or Chrome!

 

https://github.com/kripken/emscripten/wiki/Porting-Examples-and-Demos

Now us

https://github.com/

taxilian-browsercpp

/emsdk_cmake

C++ in the browser

By Richard Bateman

Made with Slides.com

C++ in the browser

slide deck for my C++ in the browser talk at 2015 openwest

  • 4,522

More from Richard Bateman