sebadorn.de

JavaScript source protection with NW.js

You can minify and uglify JavaScript files, but technically the source code of your distributed NW.js application is still readable. But NW.js also provides the means to compile JavaScript to a binary file and then load it as part of the application. The command line tool nwjc to create the binary file is included in the SDK version.

Assuming you have a JavaScript file js/private.js:

'use strict';

function secretFunction( foo ) {
    return foo * 4;
};

Then you can compile it like this to a file js/private.bin:

$ ./nwjs-sdk-v0.30.5-linux-x64/nwjc js/private.js js/private.bin

Internally the tool uses the V8 snapshot feature, which means the versions have to match. A binary file created with NW.js 0.30 can only be loaded by 0.30. Binary files also do not work cross-platform. For each platform it is necessary to compile its own binary file with the SDK for the same platform.

To then load the binary file in your application, it works like this:

let win = nw.Window.get();
win.evalNWBin( null, 'js/private.bin' );

let value = secretFunction( 4 ); // returns 16

Note however that the loading is per window. If you open another window in your application, the file has to be loaded there again.

Using the DevTools you can of course find the functions and variables which have been loaded from the file. The function implementation however is protected:

> String( secretFunction )
< "function secretFunction() { [native code] }"

DevTools issues

Update 2018-12-15: Since NW.js 0.34 this issue seems to be fixed. Loading binary files works even with the DevTools open.


There is an issue with loading binary files and the DevTools. Basically you cannot have the DevTools open and then load the file. There will be no error, but the contents will not be available. This is a known issue.

My temporary solution is to just close the DevTools. But just closing them right before is not enough, you also have to use a timeout before loading the file:

let win = nw.Window.get();

// Function is only available in the SDK build.
if( typeof win.closeDevTools === 'function' ) {
    win.closeDevTools();
}

setTimeout( () => {
    win.evalNWBin( null, 'js/private.bin' );
}, 500 );

But why not check first if the DevTools are open? Then you could open them again afterwards. According to the API documentation there is win.isDevToolsOpen(). But it exists only in the documentation. Using the SDK build there is de facto no such function. This too is a known issue.

Wine for Windows

I successfully used Wine 3 to compile a binary file for the Windows version of a NW.js application and then load it there. So if you are on Linux or macOS you will not need Windows for your build process. You should of course still test your application to make sure it works on all targeted platforms.


Using NW.js to communicate with a DS4 controller

DS4 green light

NW.js still provides the Chrome Apps API which has been removed from Chrome, but not ChromeOS. This will allow us to access in a platform-independant manner devices which are connected with the PC per USB.

Without this API, a 3rd party Node.js module like node-hid could be used. This will however come with platform-dependant libraries and will have to be updated or rebuild each time the Node.js version changes.

This article concentrates on sending data to the controller. However it is also possible to retrieve data like pressed buttons using the established connection. Aside from using chrome.hid there is also the Gamepad API for read-only access.

Identifying the controller

First we need a way to identify the DS4. Devices come with a vendor Id and product Id. According to the Gentoo Wiki they are as follows:

Device Vendor Id Product Id
DS4 (1st gen) hex 054C / dec 1356 hex 05C4 / dec 1476
DS4 (2nd gen) hex 054C / dec 1356 hex 09CC / dec 2508

Having tested with both devices, I can also confirm the Ids.

Get the device

For all communication with the device, we will use the chrome.hid API. First we define a filter using the vendor and product Id, and then query the available devices:

var filter = {
    filter: [
        { vendorId: 1356, productId: 1476 },
        { vendorId: 1356, productId: 2508 }
    ]
};

chrome.hid.getDevices( filter, ( devices ) => {
    // Error handling.
    if( chrome.runtime.lastError ) {
        console.error( chrome.runtime.lastError );
        return;
    }
    if( !devices ) {
        return;
    }

    var device = devices[0];
    // Next: Connect to the device.
};
Read more

Standalone-Anwendungen mit node-webkit

node-webkit demo window

Gestern habe ich ein wenig in node-webkit reingeschnuppert. Damit sollen sich ganz einfach Desktop-Anwendungen auf Basis von HTML, JavaScript und Node.js erstellen lassen. Die erstellte Anwendung lässt sich dann relativ einfach für verschiedene Betriebs­systeme verpacken. Für nicht allzu rechen-intensive Spiele scheint mir das recht interessant. Tatsächlich verwendet auch das kürzlich erschiene A Wizard's Lizard node-webkit [1].

Für eine kleine Demo habe ich das Beispiel von three.js genommen und als Anwendung verpackt. Das HTML und JavaScript lasse ich hier mal aus. Mein package.json für ein Fenster ohne Toolbar sieht wie folgt aus:

{
	"main": "index.html",
	"name": "nw-demo",
	"window": {
		"frame": true,
		"height": 600,
		"kiosk": false,
		"toolbar": false,
		"width": 900
	}
}
Read more

Prüfungen zu Ende

IMG 3557

Die schriftlichen Prüfungen und ein Fachgespräch sind abgehakt. Das war es mit Lernen und schlechtem Gewissen haben, wenn man gerade doch nicht gelernt hat. Eh, naja, nächstes Semester werde ich die Computergrafik-Klausur nachschreiben müssen, die nicht ganz wie geplant verlief. Mit den Inhalten werde ich mich auseinandersetzen, bis ich jede Formel und jeden Algorithmus auswendig kann und schreibe dann nur in OpenGL „Duke Nukem Forever“ fertig … oder so.

Die überaus unspektakulären Vorhaben für die nun anstehenden Ferientage: Der Desktop-Rechner wird Bekanntschaft machen mit Ubuntu als Zweitbetriebssystem, ich versuche etwas ernsthafter Japanisch zu lernen und werde mich dem Blog widmen – von Beiträgen her, wie vor allem auch dem CMS. Joggen will ich auch mal ausprobieren, aber jedesmal wenn ich daran denke, erscheint es mir unwahrscheinlicher. Ich hoffe, ich überwinde den inneren Schweine­hund. Am Piano möchte ich mehr Stücke lernen – was in meinem Fall nicht Klassik bedeutet, sondern eher Anime-Liedgut – und auch mal schauen, wie ich das digitalisiert bekomme.

Eine Woche ist jetzt knapp noch Zeit für ein letztes FH-Projekt in Web-Anwendungen. Apache Tomcat, JavaEE, JSP, JSF … Der größte Mist, der je den Weg ins Internet gefunden hat. Der Einsatz ist vergleichbar mit PHP – Web-Anwendungen eben. Klar, Java bietet mehr Möglich­keiten und einmal übersetzt ist es wohl auch schneller als PHP. Aber der Einstieg ist ein Grauen, in jedem Winkel muss erst dies und das konfiguriert werden und von echten Erfolgs­erlebnissen kann man nicht sprechen. Läuft es nämlich endlich, ist man nur müde und genervt und froh, dass mal etwas läuft. Dreck. Ja, dieser Absatz mit Genörgel fällt vor allem so lang aus, weil ich gestern mehrer Stunden damit zugebracht habe, nur um eine kleine Text-Ausgabe zu erhalten. PHP <3.


4. Semester

Heute begann das 4. Semester mit der üblichen Einführungsveranstaltung. Anschließend wieder die versuchte Überlastung des Belegungssystems durch Studenten, die sich alle gleich­zeitig an die Rechner setzten. Aber das System hat gut standgehalten. Hoffentlich komme ich in gute Gruppen – und mit gut meine ich, dass ich nicht jeden Tag erst spät nach Hause komme. Aber der Dienstag ist schonmal frei, haha! Nur morgen nicht, weil der Prof. seine Vorlesung morgen schon halten möchte, weil sie montags häufig ausfallen wird.

All das Gute, was an Kursen auf mich wartet:

Rechnernetze und Netzwerkprogrammierung
Ist, was der Name verspricht. Es wird ein kleines Projekt darin geben.
Animation und Film
Lernen mit den Tools umzugehen und dann einen Kurzfilm erstellen. Im Gegensatz zu letztem Jahr jedoch keine Realfilme. Wozu habe ich mir jetzt die Bauchmuskeln zum Angeben antrainiert? Ein paar Kommilitonen, die meinen wahren Charakter bereits erkannt haben, wollten mich doch die Rolle eines Schlägertypen spielen lassen.
Computergrafik
Nur in der 1. Hälfte des Semesters. Wieder mit kleinem Projekt. Inhaltlich … vermutlich irgendetwas modellieren.
Web-basierte Anwendungen
Nur in der 2. Hälfte des Semesters. Tomcat und PHP vermute ich mal? Ein kleines Projekt im Semester und ein weiteres nach den Klausuren in den ersten Ferienwochen.
Softwaretechnik-Projekt
Ein großes Projekt mit involvierter Servernutzung. Geht über das gesamte Semester und hat Gruppengrößen um die 8 Personen. Unterteilung in Frontend (C# auf Windows), Backend (Java auf Ubuntu) und 1 Projektleiter je Gruppe.
Einführung in die Medienökonomie
Klingt ja „spannend“. Ach, aber uns wurde heute gesagt, der Dozent würde sein Seminar interessant gestalten. Vielleicht ist es ja okay.