Chromium PluginPepper API & Native Client

Chang W. Doh

GDG Korea WebTech OrganizerHTML5Rocks/KO Contributor/Coordinator

</hi><hi>

● Open-source technology for running native compiled code in the browser○ With the goal of

■ Maintaining the portability and safety○ Final goal

■ Enabling developers to enhance their web applications using their preferred language.

What’s NaCl?

What’s NaCl?

● Currently available on○ Chrome for Windows, Mac, Linux, and Chrome OS

■ x86 and ARM architectures

Why NaCl?

● Native functionalities○ 2D/3D graphics, audio, input events, multi-threads,

and access memory directly, ...● Portability

○ OS and CPU independent● Security

○ Double sandbox model● Performance

○ Run at speeds comparable to desktop applications (within 5-15% of native speed).

PNaCl only!

Why NaCl?

● DEMO: Bastion

NaCl in a web app

NaCl

● Toolchains○ Collections of development tools

■ Compilers, linkers, etc.■ Transform C/C++ code to (P)NaCl modules.■ There’re 2 types of toolchain for each NaCl Type

● Runtime components:○ Embedded in the browser or other host platforms○ Allow execution of NaCl modules

● Portable Native Client - a.k.a PNaCl○ With using the PNaCl toolchain to produce a single,

portable (pexe) module.■ Translator built into the browser translates the

pexe into native code for the relevant client architecture at runtime

PNaCl & its Toolchain

● Native Client - a.k.a NaCl○ With using a nacl-gcc based toolchain to produce

multiple architecture-dependent (nexe) modules○ nexe modules are packaged into an application.○ Browser decides which nexe to load based on the

architecture of the client machine at runtime from .nmf file

● Only be used as part of app/extensions that are installed from the Chrome Web Store.

NaCl & its Toolchain

● Security measures have to be implemented:○ The NaCl sandbox ensures

■ Accessing system resources only through safe, whitelisted APIs

■ Operates within its limits without attempting to

interfere with other code running either within the browser or outside it.

○ The NaCl validator■ Statically analyzes code prior to running it to

make sure it only uses code and data patterns that are permitted and safe.

Sandbox model

Pepper API

● Double sandbox design○ NaCl sandbox and Chrome sandbox

■ Security measures are in addition to the existing sandbox in the Chrome browser

○ the NaCl module always executes in a process with restricted permissions.■ The only interaction between this process and

the outside world is through sanctioned browser interfaces.

Sandbox model

● Not support architecture-specific instructions○ i.e., inline assembly.

● Only supports static linking with the newlib C standard library○ Native Client SDK provides a PNaCl port of newlib○ Dynamic linking and glibc are not yet supported.

Constraints of PNaCl

Currently trying alternatives such as PNaCl’s Portable SIMD Vectors.

How NaCls work?:PNaCl & NaCl workflow

Bitcode

LLVM

● pnacl- tools produce LLVM bc files○ The pnacl-ld linker tool produces a statically linked

LLVM pexe. ○ The pnacl-finalize tool converts an LLVM pexe to a

frozen PNaCl bitcode pexe. ○ Chrome only runs the frozen PNaCl bitcode format,

not the standard LLVM bitcode pexe.

How PNaCl works?Build time

● Compilation occurs in 2 steps(1) Intermediate product, an LLVM bitcode (Toolchain)(2) "Traditional" NaCl compilation workflow (Browser)

How PNaCl works?Build time

● While chrome can load,○ Translate a frozen pexe directly

■ An additional tool pnacl-translate for generating native code from either LLVM or PNaCl bitcode.

■ Useful for debugging

How PNaCl works?Runtime

How PNaCl works?Runtime

Pepper API

Pepper API

● Pepper Plugin API (PPAPI)○ Cross-platform API for Web Browser Plugin○ Allows C/C++ module in a safe and portable way to

■ communicate with the hosting browser■ get access to system-level functions

○ Simply, a host interface for NaCl module■ e.g. NaCl can’t make any OS-level calls directly

● Instead, PPAPI provides analogous APIs that modules can target.

Misc.

● About Pepper APIs○ PPAPI doesn’t support any feature that are out of

scope within JavaScript APIs, and will not support in the furture.

● About (P)NaCl○ (P)NaCl doesn’t support creating JS API directly

■ Use ‘postMessage()’ for communicating○ (P)NaCl is working in progress to support it on

Mobile, maybe Android.

Process Diagram

How process interacts

#include <cstdio>#include <string>#include "ppapi/cpp/instance.h"#include "ppapi/cpp/module.h"#include "ppapi/cpp/var.h"

class hello_tutorialInstance : public pp::Instance { public: explicit hello_tutorialInstance(PP_Instance instance) : pp::Instance(instance) {} virtual ~hello_tutorialInstance() {}

virtual void HandleMessage(const pp::Var& var_message) { }};

Sample Code:hello_tutorial_module.cc

Sample Code:hello_tutorial_module.cc

class hello_tutorialModule : public pp::Module { public: hello_tutorialModule() : pp::Module() {} virtual ~hello_tutorialModule() {}

virtual pp::Instance* CreateInstance(PP_Instance instance) { return new hello_tutorialInstance(instance); }};

namespace pp {Module* CreateModule() { return new hello_tutorialModule();}}

{ "program": { "x86-64": {"url": "hello_tutorial_x86_64.nexe"}, "x86-32": {"url": "hello_tutorial_x86_32.nexe"} }}

Sample Code:hello_tutorial_module.nmf

<h1>Native Client Module hello_tutorial</h1><p> <div id="listener"> <script type="text/javascript"> var listener = document.getElementById('listener'); listener.addEventListener('load', moduleDidLoad, true); listener.addEventListener('message', handleMessage, true); </script> <embed name="nacl_module" id="hello_tutorial" width=0 height=0 src="hello_tutorial.nmf" type="application/x-nacl" /> </div></p><h2>Status</h2><div id="status_field">NO-STATUS</div></body></html>

Sample Code: index.html

● Mono (http://www.mono-project.com)○ Cross-platform .NET development framework.

● naclports (http://code.google.com/p/naclports):○ A repository of example programs and library

patches such as libSDL, Mesa, OpenSceneGraph, ImageMagick, cairo, boost, libvorbis and others.

● NaTcl (http://wiki.tcl.tk/28211):○ A native client port of the TCL PL.

Appendix.Projects using NaCl

● OCaml:○ http://code.google.com/p/nacl-ocaml/○ A compiler that converts Objective Caml source

code in to Native Client compliant machine code.● Sugar/GTK on Native Cilent:

○ http://cananian.livejournal.com/tag/nativeclient● Qt

○ http://developer.qt.nokia.com/wiki/Qt_for_Google_Native_Client

○ A port of the popular application infrastructure to Native Client.

Appendix.Projects using NaCl

Appendix.Some games using NaCl

● Wesnoth on Native Client:○ https://github.com/eugenis/wesnoth-nacl-build

● Quake NaCl○ http://nacl-quake.appspot.com