Rough Study Log: Native Client & Pepper API

1. Chromium Plugin
Pepper API & Native Client

2. Chang W. Doh
<hi> </hi>
GDG Korea WebTech Organizer
HTML5Rocks/KO Contributor/Coordinator

3. What’s NaCl?
● 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.

4. What’s NaCl?
● Currently available on
○ Chrome for Windows, Mac, Linux, and Chrome OS
■ x86 and ARM architectures

5. Why NaCl?
● Native functionalities
○ 2D/3D graphics, audio, input events, multi-threads,
and access memory directly, ...
● Portability
PNaCl only!
○ OS and CPU independent
● Security
○ Double sandbox model
● Performance
○ Run at speeds comparable to desktop applications
(within 5-15% of native speed).

6. Why NaCl?
● DEMO: Bastion

7. NaCl in a web app

8. 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

9. PNaCl & its Toolchain
● 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 pexe into native code for the relevant client
architecture at runtime

10. NaCl & 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 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.

11. Sandbox model
● Security measures have to be implemented:
○ The NaCl sandbox ensures
Pepper API
■ 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.

12. Sandbox model
● 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.

13. Constraints of PNaCl
● Not support architecture-specific instructions
○ i.e., inline assembly.
Currently trying alternatives such as
PNaCl’s Portable SIMD Vectors.
● 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.

14. How NaCls work?:
PNaCl & NaCl workflow
LLVM
Bitcode

15. How PNaCl works?
Build time
● 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.

16. How PNaCl works?
Build time
● Compilation occurs in 2 steps
(1) Intermediate product, an LLVM bitcode (Toolchain)
(2) "Traditional" NaCl compilation workflow (Browser)

17. How PNaCl works?
● While chrome can load,
○ Translate a frozen pexe directly
Runtime
■ An additional tool pnacl-translate for generating
native code from either LLVM or PNaCl bitcode.
■ Useful for debugging

18. How PNaCl works?
Runtime

19. Pepper API

20. 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.

21. Misc.
● About Pepper APIs
○ PPAPI doesn’t support any feature that are out 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.

22. Process Diagram

23. How process interacts

24. Sample Code:
hello_tutorial_module.cc
#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) {
}
};

25. 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();
}
}

26. Sample Code:
hello_tutorial_module.nmf
{
"program": {
"x86-64": {"url": "hello_tutorial_x86_64.nexe"},
"x86-32": {"url": "hello_tutorial_x86_32.nexe"}
}
}

27. Sample Code:
<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>
index.html

28. Appendix.
Projects using NaCl
● 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.

29. Appendix.
● 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.
Projects using NaCl

30. Appendix.
Some games using NaCl
● Wesnoth on Native Client:
○ https://github.com/eugenis/wesnoth-nacl-build
● Quake NaCl
○ http://nacl-quake.appspot.com