Opa - Safe and Secure Web Development

(c) MLstate

Web
(c) MLstate

Web browser
JS

HTTP Server Language Database

(c) MLstate

C S S X
JS

F R S c a t At ks
er f f Bu

r e ov

s w o n o i ct

Web browser

HTTP Server

e d o

e j n i

Language Database
DB injection

(c) MLstate

C S S X
JS

F R S c a t At ks
er f f Bu

r e ov

s w o n o i ct

Web browser

HTTP Server

e d o

e j n i

Language Database
DB injection

(c) MLstate

This is JavaScript
> 9 + 5 + customers 14 customers > Customers: + 9 + 5 Customers: 95

(c) MLstate

This is JavaScript
if (x == 0) retry(); else if (x == 1) success(); else error(); switch (x) { case 0: retry(); break; case 1: success(); break; default: error(); }

(c) MLstate

x = 0
if (x == 0) retry(); else if (x == 1) success(); else error(); switch (x) { case 0: retry(); break; case 1: success(); break; default: error(); } error

retry

(c) MLstate

This is JavaScript
[] [] {} {} + + + + [] {} [] {}

(c) MLstate

This is JavaScript
[] [] {} {} + + + + [] = {} = [] = {} = {} 0 NaN

(c) MLstate

Trustworthiness?

(c) MLstate

Complex Systems?

(c) MLstate

Opa is a type-safe cement for web apps.

(c) MLstate

Built on standards.

Open source core.

(c) MLstate

Client code

Server code

DB code

Configuration

(c) MLstate

Client code

Server code

DB code

Configuration

(c) MLstate

(c) MLstate

One language for the whole application Glue & checks generated automatically No impedance mismatch

(c) MLstate

One language for the whole application Glue & checks generated automatically No impedance mismatch

Clean-slate design Based on formal methods Safe languages from the bottom up

(c) MLstate

One language for the whole application Glue & checks generated automatically No impedance mismatch

Clean-slate design Based on formal methods Safe languages from the bottom up

Just a distributed system In which not all principals are trusted And communications use web standards Security is (mostly) automatic

(c) MLstate

One language for the whole application

Trustworthy

Glue & checks generated automatically No impedance mismatch

Clean-slate design Based on formal methods Safe languages from the bottom up
No knowledge required

Just a distributed system In which not all principals are trusted And communications use web standards Security is (mostly) automatic

(c) MLstate

function action(_) { #msg = <>Hello!</>; } function page() { <div class="well"> <h2 id=#msg>Click the button:</h2> <button class="btn" onclick={action}> Click! </button> </div> } Server.start( Server.http, { ~page, title: "Hello, world" } )
(c) MLstate

function action(_) { #msg = <>Hello!</>; } function page() { <div class="well"> <h2 id=#msg>Click the button:</h2> <button class="btn" onclick={action}> Click! </button> </div> } Server.start( Server.http, { ~page, title: "Hello, world" } )
(c) MLstate

Configuration

function action(_) { #msg = <>Hello!</>; } function page() { <div class="well"> <h2 id=#msg>Click the button:</h2> <button class="btn" onclick={action}> Click! </button> </div> } Server.start( Server.http, { ~page, title: "Hello, world" } )
(c) MLstate

View

Configuration

Actions

function action(_) { #msg = <>Hello!</>; } function page() { <div class="well"> <h2 id=#msg>Click the button:</h2> <button class="btn" onclick={action}> Click! </button> </div> } Server.start( Server.http, { ~page, title: "Hello, world" } )
(c) MLstate

View

Configuration

function action(_) { #msg = <>Hello!</>; } function page() { <div class="well"> <h2 id=#msg>Click the button:</h2> <button class="btn" onclick={action}> Click! </button> </div> } Server.start( Server.http, { ~page, title: "Hello, world" } )
(c) MLstate

function action(_) { #msg = <>Hello!</>; } function page() { <div class="well"> <h2 id=#msg>Click the button:</h2> <button class="btn" onclick={action}> Click! </button> </div> } Server.start( Server.http, { ~page, title: "Hello, world" } )
(c) MLstate

HTML First Class

JavaScript syntax

function action(_) { #msg = <>Hello!</>; } function page() { <div class="well"> <h2 id=#msg>Click the button:</h2> <button class="btn" onclick={action}> Click! </button> </div> } Server.start( Server.http, { ~page, title: "Hello, world" } )
(c) MLstate

HTML First Class

JavaScript syntax

function action(_) { #msg = <>Hello!</>; } function page() { <div class="well"> <h2 id=#msg>Click the button:</h2> <button class="btn" onclick={action}> Click! </button> </div> } Server.start( Server.http, { ~page, title: "Hello, world" } )
(c) MLstate

HTML First Class Event-driven

Type inference
function foo(s) { String.length(s); } function bar(x, y) { foo(x) + y; }
int function foo(string s) { String.length(s); } int function bar(string x, int y) { foo(x) + y; }

(c) MLstate

Type checking

foo = 1 + "bar";
Types int and string are not compatible

(c) MLstate

element = <div> <span>{prompt({none})}</span> <span>{expr} </div> <div>{Calc.compute(expr)}</div>;

Open and close tag mismatch <span> vs </div>

(c) MLstate

case {some: 13}: callback(get()); case {some: 37}: move({lef}); case {some: 38}: move({up}); case {some: 39}: move({right});

#status = "Enter"; #status = "Left"; #status = "Up"; #status = "Right";

First type: { Second type: { left } or { rightmost { up } or {

lef } { right } or } or down }

(c) MLstate

previous = Dom.get_content(#precaret); #precaret = String.sub(0, String.lenght(previous) - 1, previous); #postcaret += String.get(String.length(previous) - 1, previous);

No field lenght found. Most probable field: length: string -> int

(c) MLstate

previous = Dom.get_content(#postcaret); #postcaret = String.sub(1, String.length(previous) - 1, previous); #precaret =+ String.get(previous);

String.get is a string function(int, string) but application uses it as function(string)

(c) MLstate

Type blocks
int string float { label: type, ... } bool option list set map client / server

type or type

type -> type

modules

functor

abstract

(c) MLstate

1 2 3 4 5

Code distribution Data protection Impedance mismatch Blocking code Protocol bugs and vulnerabilities
(c) MLstate

Client and server

// Will be on server side: function db_update(value) { /mydb/counter <- value } // Will be on client-side: function dom_update(value) { #counter = value }

(c) MLstate

Client and server

function init() { #counter = /mydb/counter }

(c) MLstate

Client or server
client server

client function hash(pw) { Sha512.hash(pw) }

(c) MLstate

Secure access
exposed protected

exposed function get() { /mydb/counter }

(c) MLstate

Data declaration
type user = { string mail, int age, list(string) comments } database dbname { user /user[{mail}] int /user/age = 18 } // primary key // default value

(c) MLstate

Data queries
/db/col[name == v; order -score; limit 50];

== != < <= > >=

skip limit order

in [e1, e2] or and not

(c) MLstate

Data queries
/db/col[n > 10 and n < 20];

opa
use db db.col.find( {$and : [{ n : { $gt : 10 } }, { n : { $lt : 20 } } ] })
(c) MLstate

mongoDB shell

Data updates
/db/path[id == id] <- { n += 1, l <+ e }

n += 800 n++ n-n : v

l l l l

pop shift <+ e <++ [e1, e2, e3]

(c) MLstate

Blocking?
function fibonacci(n) { if (n == 0) 0 else if (n == 1) 1 else fibonacci(n-1) + fibonacci(n-2) }

(c) MLstate

Blocking? No.

(c) MLstate

Blocking? No.
Clients sockets Scheduler CPS
HTTP Server FTP Server SMTP Server

(c) MLstate

A DSL for protocols

-define -define -define -define -define -define -define -define Get (uri, v) = "GET " uri " HTTP/" v Head (uri, v) = "HEAD " uri " HTTP/" v Post (uri, v) = "POST " uri " HTTP/" v Put (uri, v) = "PUT " uri " HTTP/" v Del (uri, v) = "DELETE " uri " HTTP/" v Trace (uri, v) = "TRACE " uri " HTTP/" v Conn (uri, v) = "CONNECT " uri " HTTP/" v Opts (uri, v) = "OPTIONS " uri " HTTP/" v

Grammar

Automaton

wait_for_request(hr, timeout): receive | Crlf -> ... | Head (uri, v) -> ... | Get (uri, v) -> ... | Post (uri, v) -> ... | Put (uri, v) -> ... | Del (uri, v) -> ... | Trace (uri, v) -> ... | Conn (uri, v) -> ... catch | exn -> ... after timeout -> ...

(c) MLstate

1 2 3 4 5

Precise control on code distribution Protected data by default Transparent database mapping Non-blocking Safe protocols
(c) MLstate

Transparent protections

(c) MLstate

Transparent protections
user_update(x:mess) = ( line = <div class="opa-line"> <div class="opa-wrap"><div class="opa-user">{x.id}:</div> <div class="opa-message">{x.message}</div></div> </div> do exec([#show +<- line ]) Page.set_scroll_top(#show, Page.get_height(#show) +Page.get_scroll_top(#show)) )

All insertions are checked

(c) MLstate

Transparent protections

(c) MLstate

Transparent protections
make_broadcaster(id) = _ -> Network.broadcast({~id message=Page.get_value(#entry)}, room) All communications are checked

(c) MLstate

Transparent protections

(c) MLstate

Transparent protections

styled_page("Chat",//Display <script onload={_ -> connect()}/> <div id="header"><div id="logo"></div></div> <div id="show"></div> <input id="entry"/> <div class="opa-button" onclick={broadcast}>Send!</div> )

Per-user capability?*

(c) MLstate

Transparent protections

(c) MLstate

(c) MLstate

A1-Injection A2-Cross Site Scripting (XSS) A3-Broken Authentication and Session Management A4-Insecure Direct Object References A5-Cross Site Request Forgery (CSRF)

A6-Security Misconguration A7-Insecure Cryptographic Storage A8-Failure to Restrict URL Access A9-Insufcient Transport Layer Protection A10-Unvalidated Redirects and Forwards

(c) MLstate

(c) MLstate

(c) MLstate

(c) MLstate

(c) MLstate

Opah (Moonsh)

(c) MLstate

Opa (Language)

(c) MLstate

opalang.org
@opalang

(c) MLstate