WebView Injection

JavaScript injection is a technique where a user inserts their own JavaScript code into a web page. This can be done for various purposes, such as debugging, testing, or even malicious activities. In our example the script runs on a client side web form which isolates or delegates server-side scripting to a desktop rich client.

In the context of the provided source, the Leaflet library serves as the core JavaScript engine for rendering and managing the map visualization within the application.

Its primary roles include:

• Runtime Map Injection: It is used as a JavaScript OpenStreetMap (OSM) library that is injected at runtime into a native application via the Microsoft Edge WebView2 component.
• Interactive Visualization: The library is part of an HTML/JS template (referenced as HOVER_JS_SCRIPT2) that displays map coordinates and provides features like “Hover Coordinates” on the OpenStreetMap interface.
• Dynamic Data Rendering: It enables the application to take specific user inputs — such as latitude, longitude, and zoom levels — and translate them into a live, updated map view.
• Web-to-Native Integration: It allows the developer to embed complex web content (HTML, CSS, and JS) into a native Delphi or maXbox rich client, leveraging the EdgeView2 runtime to display geographic data without needing a standalone web browser.

The tutor article explains how maXbox uses WebView2 (the embedded Microsoft Edge browser) to inject JavaScript at runtime so it can display an interactive OpenStreetMap map inside a desktop application.

You type latitude, longitude, and zoom into text boxes. When you click a button, maXbox:

1. Reads your numbers
2. Inserts them into a pre‑written HTML/JavaScript template
3. Loads that updated HTML into WebView2
4. The map refreshes and shows the new location Be sure you have to copied the webview2 dll in your maXbox directory:

This solution downloads the JavaScript HTML from a host and will then be injected with simple stringreplace directives after the download on load (the advantage is the rollout and update way):

Be aware: to find L.map(‘’map’’).setView in JS you have to use double quotes, otherway stringreplace function can’t find it! (see below)

procedure TEdit1Button1Click(Sender: TObject);
 var htmlgeojs2: string;     
   begin
     writ('debc: '+edt1lat.text+' '+edt2long.text)
     htmlgeojs2:= utf8decode(HttpGetDirect2(GEOJSON4));
     htmlgeojs2:= (stringreplace((htmlgeojs2),              //also RegEx possible
                               'const map = L.map(''map'').setView([46.948, 7.447], 13);',
                               'const map = L.map("map").setView(['+(edt1lat.text)+','
                                         +(edt2long.text)+'],'+flots(zoomf)+'); //params',
                               [rfReplaceAll]));
     htmlgeojs2:= (stringreplace((htmlgeojs2),
                               '"coordinates": [7.447422, 46.947945]',
                               '"coordinates": ['+(edt2long.text)+','+(edt1lat.text)+']',
                               [rfReplaceAll]));        //}                 
      //htmlgeojs2:= utf8encode(stringreplace((HOVER_JS_SCRIPT2),LF,CRLF,[rfReplaceAll]));
     htmlgeojs2:= utf8encode(stringreplace((htmlgeojs2),LF,CRLF,[rfReplaceAll]));
     edgeviewfrm.memoHTML.Text:= utf8toansi(htmlgeojs2); ////GEOJSON_Layer; 
     edgeviewfrm.btnSetSourceClick(self);    //runs html + js engine!
   end;

There’s no evidence that WebView2 Runtime is categorically more secure than Edge. It shares the same core engine and receives similar engine-level patches, but it lacks some browser-specific protections and depends on app developers to use it safely.