webassembly Archives - Donotsad where can learn any thing work project and make money

Aug 10

WebAssembly – Modules

WebAssembly – Modules ”; Previous Next We have seen how to get a .wasm file from c /c++ code. In this chapter, we will convert the wasm into a WebAssembly module and execute the same in the browser. Let us use the C++ Factorial code as shown below − int fact(int n) { if ((n==0)||(n==1)) return 1; else return n*fact(n-1); } Open Wasm Explorer which is available at https://mbebenita.github.io/WasmExplorer/ as shown below − The first column has the C++ factorial function, the 2nd column has the WebAssembly text format and the last column has x86 Assembly code. The WebAssembly Text format − (module (table 0 anyfunc) (memory $0 1) (export “memory” (memory $0)) (export “_Z4facti” (func $_Z4facti)) (func $_Z4facti (; 0 😉 (param $0 i32) (result i32) (local $1 i32) (set_local $1 (i32.const 1) ) (block $label$0 (br_if $label$0 (i32.eq (i32.or (get_local $0) (i32.const 1) ) (i32.const 1) ) ) (set_local $1 (i32.const 1) ) (loop $label$1 (set_local $1 (i32.mul (get_local $0) (get_local $1) ) ) (br_if $label$1 (i32.ne (i32.or (tee_local $0 (i32.add (get_local $0) (i32.const -1) ) ) (i32.const 1) ) (i32.const 1) ) ) ) ) (get_local $1) ) ) The C++ function fact has been exported as “_Z4facti” in WebAssembly Text format. Click on the download button to download the wasm code and save the file as factorial.wasm. Now to convert the .wasm code to the module we have to do the following − Step 1 Convert the .wasm into arraybuffer by using ArrayBuffer. The ArrayBuffer object will return you a fixed-length binary data buffer. Step 2 The bytes from ArrayBuffer have to be compiled into a module by using WebAssembly.compile(buffer) function. The WebAssembly.compile() function compiles and returns a WebAssembly.Module from the bytes given. Here, is the Javascript code that is discussed in Step 1 and 2. <script type=”text/javascript”> let factorial; fetch(“factorial.wasm”) .then(bytes => bytes.arrayBuffer()) .then(mod => WebAssembly.compile(mod)) .then(module => {return new WebAssembly.Instance(module) }) .then(instance => { factorial = instance.exports._Z4facti; console.log(”Test the output in Brower Console by using factorial(n)”); }); </script> Code Explanation Javascript browser API fetch is used to get the contents of factorial.wasm. The content is converted to bytes using arrayBuffer(). The module is created from bytes by calling WebAssembly.compile(mod). The instance of a module is created using new WebAssembly.Instance(module) The factorial function export _Z4facti is assigned to variable factorial by using WebAssembly.Module.exports(). Example Here, is the module.html along with the javascript code − module.html <!doctype html> <html> <head> <meta charset=”utf-8″> <title>WebAssembly Module</title> </head> <body> <script> let factorial; fetch(“factorial.wasm”) .then(bytes => bytes.arrayBuffer()) .then(mod => WebAssembly.compile(mod)) .then(module => {return new WebAssembly.Instance(module) }) .then(instance => { factorial = instance.exports._Z4facti; console.log(”Test the output in Browser Console by using factorial(n)”); }); </script> </body> </html> Output Execute module.html in the browser to see the output − Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – WASM

WebAssembly – WASM ”; Previous Next WebAssembly is also called wasm, which is an improvement to Javascript. It is designed to run inside browsers just like javascript and also with nodejs. You happen to get wasm output, when any high level language like C, C++, Rust is compiled. Consider the following C program − int factorial(int n) { if (n == 0) return 1; else return n * factorial(n-1); } Make use of WasmExplorer, which is available at https://mbebenita.github.io/WasmExplorer/ to get the compiled code as shown below − The WebAssembly text format for factorial program is as stated below − (module (table 0 anyfunc) (memory $0 1) (export “memory” (memory $0)) (export “factorial” (func $factorial)) (func $factorial (; 0 😉 (param $0 i32) (result i32) (local $1 i32) (local $2 i32) (block $label$0 (br_if $label$0 (i32.eqz (get_local $0) ) ) (set_local $2 (i32.const 1) ) (loop $label$1 (set_local $2 (i32.mul (get_local $0) (get_local $2) ) ) (set_local $0 (tee_local $1 (i32.add (get_local $0) (i32.const -1) ) ) ) (br_if $label$1 (get_local $1) ) ) (return (get_local $2) ) ) (i32.const 1) ) ) Using the Wat2Wasm tool, you can view the WASM code, just like how it is mentioned below − Developers are not supposed to write code in wasm or learn to code in it, as it is mostly generated when you compile high level languages. Stack Machine Model In WASM, all the instructions are pushed on to the stack. The arguments are popped and the result is pushed back to the stack. Consider the following WebAssembly Text format that adds 2 numbers − (module (func $add (param $a i32) (param $b i32) (result i32) get_local $a get_local $b i32.add ) (export “add” (func $add)) ) The name of the function is $add, it takes in 2 params $a and $b. The result is a type 32-bit integer. The local variables are accessed using get_local and the add operation is performed using i32.add. The stack representation to add 2 numbers while execution will be as follows − In step 1 − The execution of get_local $a instruction, the first parameters i.e., $a is pushed on the stack. In step 2 − During execution of get_local $b instruction, the second parameters i.e., $b is pushed on the stack. In step 3 − The execution of i32.add will pop the elements from the stack and will push the result back to the stack. The value that remains in the end inside the stack is the result of the function $add. Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – Installation

WebAssembly – Installation ”; Previous Next In this chapter, will learn how to install Emscripten SDK to compile C/C++. Emscripten is a Low level virtual machine (LLVM) that takes bytecode generated from C/C++ and compiles it into JavaScript that can easily execute inside the browser. To compile C/C++ to WebAssembly, we need to first install Emscripten sdk. Install Emscripten sdk The steps to install Emscripten sdk are as follows − Step 1 − Clone the emsdk repo : git clone https://github.com/emscripten-core/emsdk.git. E:wa>git clone https://github.com/emscripten-core/emsdk.git Cloning into ”emsdk”… remote: Enumerating objects: 14, done. remote: Counting objects: 100% (14/14), done. remote: Compressing objects: 100% (12/12), done. remote: Total 1823 (delta 4), reused 4 (delta 2), pack-reused 1809 receiving obje cts: 99% (1819/1823), 924.01 KiB | 257.00 KiB/s Receiving objects: 100% (1823/1823), 1.01 MiB | 257.00 KiB/s, done. Resolving deltas: 100% (1152/1152), done. Step 2 − Enter inside the directory emsdk. cd emsdk Step 3 − For windows: Execute following command. emsdk install latest For linux, this command will take some time to install the necessary tools like java, python etc. Follow the below mentioned code − ./emsdk install latest Step 4 − To activate latest SDK execute following command in your terminal. For windows, execute the following command − emsdk activate latest For linux, execute the below mentioned command − ./emsdk activate latest Step 5 − To activate PATH and other environment variables run following command in your terminal. For windows, execute the command − emsdk_env.bat For linux, execute the following command − source ./emsdk_env.sh We are done installing the emsdk and can now compile C or C++ code. The compiling of C/C++ will be done in the next chapters. To compile any C or C++ code following is the command − emcc source.c or source.cpp -s WASM=1 -o source.html The output will give you a source.html file, source.js and source.wasm files. The js will have the api that will fetch the source.wasm and you can see the output, when you hit source.html in the browser. To just get the wasm file you can use following command. This command will give you only source.wasm file. emcc source.c or source.cpp -s STANDALONE_WASM Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – Discussion

Discuss WebAssembly ”; Previous Next WebAssembly is a new programming language for the web. WebAssembly code is low level binary format, that is compatible with the web and can easily run in modern web browsers. The file size generated is small and it loads and executes faster. You can now compile languages like C, C++, Rust, etc. to binary format and it can run on the web just like javascript. Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – Examples

WebAssembly – Examples ”; Previous Next The chapter discusses the examples with regards to WebAssembly. Example 1 Following is the example of C Program to get the max Element − void displaylog(int n); /* function returning the max between two numbers */ int max(int num1, int num2) { /* local variable declaration */ int result; if (num1 > num2) result = num1; else result = num2; displaylog(result); return result; } Compile the code in wasm fiddle and download the .wasm and .wat code. Wat code The Wat code is as follows − (module (type $FUNCSIG$vi (func (param i32))) (import “env” “displaylog” (func $displaylog (param i32))) (table 0 anyfunc) (memory $0 1) (export “memory” (memory $0)) (export “max” (func $max)) (func $max (; 1 😉 (param $0 i32) (param $1 i32) (result i32) (call $displaylog (tee_local $0 (select (get_local $0) (get_local $1) (i32.gt_s (get_local $0) (get_local $1)) ) ) ) (get_local $0) ) ) Download .wasm code and let us use in the .html file as shown below − <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> </head> <body> <script> const importObj = { env: { displaylog: n => alert(“The max of (400, 130) is ” +n) } }; fetch(“testmax.wasm”) .then(bytes => bytes.arrayBuffer()) .then(module => WebAssembly.instantiate(module, importObj)) .then(finalcode => { console.log(finalcode); console.log(finalcode.instance.exports.max(400,130)); }); </script> </body> </html> Output The output is as follows − Example 2 Following is the C++ code to get the fibonacci series of given number. #include <iostream>> void displaylog(int n); int fibonacciSeries(int number) { int n1=0,n2=1,n3,i; for(i=2;i<number;++i) { n3=n1+n2; displaylog(n); n1=n2; n2=n3; } return 0; } I am using wasm explorer to compile the code. Download Wat and Wasm and test the same in the browser. You can use the below mentioned code − <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> </head> <body> <script> const importObj = { env: { _Z10displaylogi: n => console.log(n) } }; fetch(“fib.wasm”) .then(bytes => bytes.arrayBuffer()) .then(module => WebAssembly.instantiate(module, importObj)) .then(finalcode => { console.log(finalcode); console.log(finalcode.instance.exports._Z15fibonacciSeriesi(10)); }); </script> </body> </html> Output The output is as follows − Example 3 Following is the Rust code to add elements in a given array. fn add_array(x: i32) -> i32 { let mut sum = 0; let mut numbers = [10,20,30]; for i in 0..3 { sum += numbers[i]; } sum } We are going to make use of WebAssembly Studio to compile RUST to wasm. Build the code and download the wasm file and execute the same in the browser. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> </head> <body> <script> const importObj = { env: { } }; fetch(“add_array.wasm”) .then(bytes => bytes.arrayBuffer()) .then(module => WebAssembly.instantiate(module, importObj)) .then(finalcode => { console.log(finalcode); console.log(finalcode.instance.exports.add_array()); }); &lt/script> </body> </html> Output The output will be as given below − Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – Working with C

WebAssembly – Working with C ”; Previous Next In this chapter, we are going to compile a simple C program to javascript and execute the same in the browser. For Example − C Program #include<stdio.h> int square(int n) { return n*n; } We have done the installation of emsdk in folder wa/. In same folder, create another folder cprog/ and save above code as square.c. We have already installed emsdk in the previous chapter. Here, we are going to make use of emsdk to compile the above c code. Compile test.c in your command prompt as shown below − emcc square.c -s STANDALONE_WASM –o findsquare.wasm emcc command takes care of compiling the code as well as give you the .wasm code. We have used STANDALONE_WASM option that will give only the .wasm file. Example − findsquare.html <!doctype html> <html> <head> <meta charset=”utf-8″> <title>WebAssembly Square function</title> <style> div { font-size : 30px; text-align : center; color:orange; } </style> </head> <body> <div id=”textcontent”></div> <script> let square; fetch(“findsquare.wasm”).then(bytes => bytes.arrayBuffer()) .then(mod => WebAssembly.compile(mod)) .then(module => { return new WebAssembly.Instance(module) }) .then(instance => { square = instance.exports.square(13); console.log(“The square of 13 = ” +square); document.getElementById(“textcontent”).innerHTML = “The square of 13 = ” +square; }); </script> </body> </html> Output The output is as mentioned below − Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – “Hello World”

WebAssembly – “Hello World” ”; Previous Next In this chapter we are going to write a simple program in C and convert it into .wasm and execute the same in the browser to get the text “Hello World”. Will make use of wasm explorer tool that will convert the C program to .wasm and will make use of the .wasm inside our .html file. The Wasm explorer tool which is available at https://mbebenita.github.io/WasmExplorer/ looks as follows − The C code that we are going to use is as follows − #include <stdio.h> char *c_hello() { return “Hello World”; } Update the first block in wasm explorer with the C code as shown below − Click on COMPILE Button to compile to WASM and WAT and Firefox x86 Web Assembly as shown below − Use the DOWNLOAD to get the .wasm file and save it as firstprog.wasm. Create a .html file called firstprog.html as shown below − <!doctype html> <html> <head> <meta charset=”utf-8″> <title>WebAssembly Hello World</title> </head> <body> <div id=”textcontent”></div> <script type=”text/javascript”> //Your code from webassembly here </script> </body> </html> Let us now use firstprog.wasm to read the helloworld from the C function c_hello(). Step 1 Use fetch() api to read the firstprog.wasm code. Step 2 The .wasm code has to be converted into arraybuffer by using ArrayBuffer. The ArrayBuffer object will return you a fixed length binary data buffer. The code so far will be as follows − <script type=”text/javascript”> fetch(“firstprog.wasm”) .then(bytes => bytes.arrayBuffer()) </script> Step 3 The bytes from ArrayBuffer have to be compiled into a module by using WebAssembly.compile(buffer) function. The code will look like below − <script type=”text/javascript”> fetch(“firstprog.wasm”) .then(bytes => bytes.arrayBuffer()) .then(mod => WebAssembly.compile(mod)) </script> Step 4 To get the module we have to call the webassembly.instance constructor as shown below − <script type=”text/javascript”> fetch(“firstprog.wasm”) .then(bytes => bytes.arrayBuffer()) .then(mod => WebAssembly.compile(mod)) .then(module => {return new WebAssembly.Instance(module) }) </script> Step 5 Let us now console the instance to see the details in the browser. <script type=”text/javascript”> fetch(“firstprog.wasm”) .then(bytes => bytes.arrayBuffer()) .then(mod => WebAssembly.compile(mod)) .then(module => { return new WebAssembly.Instance(module) }) .then(instance => { console.log(instance); }); </script> The console.log details are shown below − To get the string “Hello World” from the function c_hello(), we need to add some code in javascript. First, get the memory buffer details as shown below − let buffer = instance.exports.memory.buffer;; The buffer value has to be converted to a typed array so that we can read the values from it. The buffer has the string Hello World in it. To convert to typed call the constructor Uint8Array as shown below − let buffer = new Uint8Array(instance.exports.memory.buffer); Now, we can read the value from the buffer in a for – loop. Let us now get the start point to read the buffer, by calling the function we wrote as shown below − let test = instance.exports.c_hello(); Now, the test variable has the start point to read our string. WebAssembly does not have anything for string values, everything is stored as integers. So when, we read the value from the buffer, they will be an integer value and we need to convert it into a string using fromCharCode() in javascript. The code is as follows − let mytext = “”; for (let i=test; buffer[i]; i++){ mytext += String.fromCharCode(buffer[i]); } Now, when you console mytext you should see the string “Hello World”. Example The complete code is as follows − <!doctype html> <html> <head> <meta charset=”utf-8″> <title>WebAssembly Add Function</title> <style> div { font-size : 30px; text-align : center; color:orange; } </style> </head> <body> <div id=”textcontent”></div> <script> fetch(“firstprog.wasm”) .then(bytes => bytes.arrayBuffer()) .then(mod => WebAssembly.compile(mod)) .then(module => {return new WebAssembly.Instance(module)}) .then(instance => { console.log(instance); let buffer = new Uint8Array(instance.exports.memory.buffer); let test = instance.exports.c_hello(); let mytext = “”; for (let i=test; buffer[i]; i++) { mytext += String.fromCharCode(buffer[i]); } console.log(mytext); document.getElementById(“textcontent”).innerHTML = mytext; }); </script> </body> </html> We have added a div and the content is added to the div, so the string is displayed on the browser. Output The output is mentioned below − Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – Working with Nodejs

WebAssembly – Working with Nodejs ”; Previous Next Javascript has a bunch of API that can work with wasm code. The API is also supported in nodejs. Get NODEJS installed on your system. Create a Factorialtest.js file. Let us use the C++ Factorial code as shown below − int fact(int n) { if ((n==0)||(n==1)) return 1; else return n*fact(n-1); } Open Wasm Explorer, which is available at https://mbebenita.github.io/WasmExplorer/ as shown below − The first column has the C++ factorial function, the 2nd column has the WebAssembly text format and the last column has x86 Assembly code. The WebAssembly Text format is as follows − (module (table 0 anyfunc) (memory $0 1) (export “memory” (memory $0)) (export “_Z4facti” (func $_Z4facti)) (func $_Z4facti (; 0 😉 (param $0 i32) (result i32) (local $1 i32) (set_local $1(i32.const 1)) (block $label$0 (br_if $label$0 (i32.eq (i32.or (get_local $0) (i32.const 1) ) (i32.const 1) ) ) (set_local $1 (i32.const 1) ) (loop $label$1 (set_local $1 (i32.mul (get_local $0) (get_local $1) ) ) (br_if $label$1 (i32.ne (i32.or (tee_local $0 (i32.add (get_local $0) (i32.const -1) ) ) (i32.const 1) ) (i32.const 1) ) ) ) ) (get_local $1) ) ) The C++ function fact has been exported as “_Z4facti” in WebAssembly Text format. Factorialtest.js const fs = require(”fs”); const buf = fs.readFileSync(”./factorial.wasm”); const lib = WebAssembly.instantiate(new Uint8Array(buf)). then(res => { for (var i=1;i<=10;i++) { console.log(“The factorial of “+i+” = “+res.instance.exports._Z4facti(i)) } } ); In your command line, run the command node factorialtest.js and the output is as follows − C:wasmnode>node factorialtest.js The factorial of 1 = 1 The factorial of 2 = 2 The factorial of 3 = 6 The factorial of 4 = 24 The factorial of 5 = 120 The factorial of 6 = 720 The factorial of 7 = 5040 The factorial of 8 = 40320 The factorial of 9 = 362880 The factorial of 10 = 3628800 Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – Security

WebAssembly – Security ”; Previous Next As per the official website of WebAssembly.org, which is available at https://webassembly.org/docs/security/ the main goal of WebAssembly in terms of security is as follows − The security model of WebAssembly has two important goals − Protect users from buggy or malicious modules, and Provide developers with useful primitives and mitigations for developing safe applications, within the constraints of (1). The compiled code i.e. WASM from C/C++/Rust is not directly executed inside the browser and makes use of Javascript API”s. The WASM code is sandboxed i.e. executed through Javascript API wrapper and the browser talks to WASM using the API. Here, is an example of using a .wasm file inside the browser. Example − C Program #include<stdio.h> int square(int n) { return n*n; } We will make use of WASM explorer to get the wasm code − Download WASM code and use it to test the api’s. Example <script type=”text/javascript”> const importObj = { module: {} }; fetch(“findsquare.wasm”) .then(bytes => bytes.arrayBuffer()) .then(module => WebAssembly.instantiate(module,importObj)) .then(finalcode => { console.log(finalcode); console.log(finalcode.instance.exports.square(25)); }); </script> Output You will get the following output − The exports objects have a reference to the function to be called. To call the function square, you will have to do it as follows − console.log(finalcode.instance.exports.square(25)); Issues with WASM compiled code Following are the issues with WASM compiled code − It is difficult to check, if there is any malicious code being inserted, while compiling the code to wasm. There are no tools available at this moment to validate the code. Wasm is difficult to analyse and the buggy/malicious code can be easily executed inside the browser. Print Page Previous Next Advertisements ”;

Aug 10

WebAssembly – Useful Resources

WebAssembly – Useful Resources ”; Previous Next The following resources contain additional information on WebAssembly. Please use them to get more in-depth knowledge on this. Useful Links on WebAssembly WebAssembly − Reference for WebAssembly. WebAssembly Wiki − Wikipedia Reference for WebAssembly. Useful Books on WebAssembly To enlist your site on this page, please drop an email to [email protected] Print Page Previous Next Advertisements ”;