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 ”;

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 ”;

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 ”;

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 ”;

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 ”;

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 ”;

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 ”;

WebAssembly – Quick Guide

WebAssembly – Quick Guide ”; Previous Next WebAssembly – Overview WebAssembly is a new computer programming language for the web. WebAssembly code is a 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. Definition of WebAssembly As per the official website of WebAssembly, which is available at https://webassembly.org/, it is defined as WebAssembly (abbreviated as Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications. Web Assembly is not something that a developer will have to write, but the code is written in languages like C, C++, Rust and can be compiled to WebAssembly (wasm). The same code can be run inside the web browsers. Web Assembly is a new language, the code is low-level assembly language, but with its text format feature, the code is readable and debugging is possible, if necessary. Goals of WebAssembly The open standards for WebAssembly are developed in a W3C Community Group that includes representatives from all major browsers as well as a W3C Working Group. The main goals of WebAssembly are mentioned below βˆ’ Faster, Efficient and Portable βˆ’ WebAssembly code is meant to run faster on different platforms taking advantage of the hardware available. Easy to read and debug βˆ’ WebAssembly, being a low level assembly language, has text format support, that allows you to debug the code for any issues and also to rewrite the code, if necessary. Security βˆ’ WebAssembly is safe to run on the web browsers, as it takes care of permissions and same-origin policies. Advantages of WebAssembly The following are the advantages of WebAssembly βˆ’ Run is Modern Browsers βˆ’ WebAssembly is able to execute without any issues on the modern web browsers which are available. Multiple Language support βˆ’ Languages like C, C++, Rust, Go can now compile the code to WebAssembly and run the same in web browsers. So, the languages which were not able to run in a browser will now be able to do so. Faster, Efficient and Portable βˆ’ Due to the small size of the code, it loads and executes faster. Easy to understand βˆ’ Developers don’t have to do much stress in understanding WebAssembly coding, as they don’t have to write the code in WebAssembly. Instead compile the code in WebAssembly and execute the same on the web. Easy to Debug βˆ’ Though the final code is in low level assembly language, you can also get it in text format, that is easy to read and debug. Disadvantages of WebAssembly The following are the disadvantages of WebAssembly βˆ’ WebAssembly is still being worked on and it is too early to decide the future of it. WebAssembly is dependent on javascript to interact with the Document Object Model (DOM). WebAssembly – Introduction WebAssembly is also called WASM which was first introduced in the year 2017. The big technology companies behind the origin of WebAssembly are Google, Apple, Microsoft, Mozilla and W3C. The buzz is that WebAssembly is going to replace Javascript because of its faster execution, but that is not the case. WebAssembly and Javascript are meant to work together towards solving the complex issues. Need for WebAssembly So far, we have only Javascript that can work successfully inside the browser. There are very heavy tasks that are difficult to carry out in the browsers using javascript. To name a few they are Image recognition, Computer-Aided Design (CAD) applications, Live video augmentation, VR and augmented reality, Music applications, Scientific visualization and simulation, Games, Image / video editing etc. WebAssembly is a new language with binary instruction that can load and execute faster. The task stated above, can be easily done in high level languages like C, C++, Rust etc. We need a way that, the code we have in C, C++, Rust can be compiled and can use it in web browsers. The same is achievable using WebAssembly. When the WebAssembly code is loaded inside the browser. Then, the browser takes care of converting into machine format that can be understood by the processors. For javascript the code has to be downloaded, parsed and converted to machine format. A lot of time goes into it and for heavy tasks like, we mentioned earlier can be very slow. Working of WebAssembly High level languages like C, C++ and Rust are compiled into binary format, that is, .wasm and text format .wat. The source code written in C, C++ and Rust is compiled to .wasm using a compiler. You can make use of the Emscripten SDK for compiling C/C++ to .wasm. The flow is as follows βˆ’ C/C++ code can be compiled to .wasm using Emscripten SDK. Later, the .wasm code can be used with the help of javascript in your html file to display the output. Key Concepts of WebAssembly The Key concepts are as explained below βˆ’ Module A module is an object that is compiled by the browser to executable machine code. A module is said to be stateless and it can be shared between windows and web workers. Memory Memory in WebAssembly, is an arraybuffer that holds the data. You can allocate memory by using the Javascript api WebAssembly.memory(). Table Table in WebAssembly is a typed array that is, outside WebAssembly memory and mostly has a reference to functions. It stores the memory address of the functions. Instance Instance is an object that will have, all the exported functions that can be called from javascript to execute inside the browser. WebAssembly – WASM WebAssembly is also called wasm, which is an improvement to Javascript. It is designed to run inside browsers just like javascript and also

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 ”;

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 ”;