Develop Reference

How to perform obfuscation of source code and protect source in electron js

I recently developed an app with electron framework and am now worried about source code protection after reading security concerns related to electron javascript code.
I mean reverse engineering of the code is possible even if the app is built for production. My application contains many critical information like GitHub Private Token for AutoUpdate and much more.
I just have gone through many SO post but didn't find the perfect answer so resolve the problem. Obfuscation of javascript code or source code protection is not possible with electron? However, Obfuscation doesn't protect the code completely but it can make reverse engineering complex. if there is a workaround for doing so, let me know. I didn't find more than tl;dr in the security-related post of the electron.
I found an obfuscation method by obfuscator but seems it's gonna need manual obfuscation and nothing much about the source code protection like in NW.js Is there any better way to achieve it?
I found something helpful for obfuscation on Medium post. but didn't find anything about source protection.

tl;dr You can and it is not worth the effort. Just pack your source
into a asar file, it keeps most people away from it.
Long awnser:
Use the asar option when building your app.
Obfuscating the code with a uglyfier.
Use WASM
Language bindings to grab your data from a compiled format
neonjs for Rust
edge-js for C#
N-API, NAN for C/C++
Otherwise your files are scripts, all these steps only slow down a
attacker (Tactic of many defenses), but they will not prevent them
from accessing them. The devTools are fairly easy to get opened and
people will be able to read the code in some way, shape or form. And
if someone gets your Obfuscated code it is simple to reconstruct what
is happening (see here for reference:
https://www.youtube.com/watch?v=y6Uzinz3DRU)
If you want to protect yourself from code manipulation, there are
better ways to do it. Like Hashing, Context Isolation etc. electron
has a whole chapter on the matter.
https://github.com/electron/electron/blob/master/docs/tutorial/security.md

There is a library called bytenode which allows you to convert your Javascript files into binary files so that noone can read it.
https://www.npmjs.com/package/bytenode
First install bytenode on your server and in your folder:
>npm i -g bytenode
>npm i bytenode
Create a normal nodeJS file with the following code in it. Let's imagine we name the following code: ok.js
console.log('bytenode works');
Then, compile your javascript code. The command will create a .JSC file with the same name than your file.
user#machine:~$ bytenode -c ok.js
Then, in a main JS file, you will call your binary, let's call it test.js:
const bytenode = require('bytenode');
const myFile=require('./ok.jsc');
myFile;
Save it.
Then, you will call test.js: node test.js to test it. Do a "cat ok.jsc" to see that it is really a binary and that nobody can't see your code. You can move your original plain test js file to another location.

You can use bytenode as mentioned is Nicolas Guérinet's answer.
However, the binary generated by bytenode CLI will give you runtime error when you try to use it in your electron project. The error will say something like:
"Invalid or incompatible cached data (cachedDataRejected)"
For the binary to work with electon, it must be generated by electron itself.
Here's how to get it working:
Let's say you want to protect main.js in a typical electron project.
Install bytenode
npm i bytenode
Rename main.js to something else, say temp.js.
Create a new main.js with the following code:
const { app, BrowserWindow } = require('electron')
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 400,
height: 200
})
//use bytenode to convert js files to jsc
const bytenode = require("bytenode");
let compiledFilename = bytenode.compileFile({
filename: './temp.js',
output: './main.jsc'
});
//convert other Node.js files as required
}
app.whenReady().then(() => {
createWindow()
})
Now run your electron project. When the blank window appears, look into you project directory, you will find the main.jsc file.
Change your main.js to the following three line code:
const bytenode = require('bytenode');
const myFile = require('./main.jsc');
myFile;
Remove your nodejs source file (temp.js) from your project and build your project.
You can also minify and obfuscate your code before converting it to jsc.
Credits to https://github.com/mapleby for his posts at https://github.com/bytenode/bytenode/issues/63.
I have adapted his idea to get it working.
This will make is significantly more difficult for someone to reverse engineer your code but it will still be possible.

If you're referring to code that you for some reason must have on the client-side, then obfuscation can definitely help. There's no such thing as obfuscation that's impossible to defeat; however, it can raise the cost of de-obfuscation to a point where it's just not worth it for attackers.
The OWASP Mobile Top 10 2016-M9-Reverse Engineering mentions this: "In order to prevent effective reverse engineering, you must use an obfuscation tool". Then you also may benefit from runtime self-protection, which you can also find on the OWASP list: "The mobile app must be able to detect at runtime that code has been added or changed from what it knows about its integrity at compile time. The app must be able to react appropriately at runtime to a code integrity violation".
When comparing different obfuscators, it's critical to check if they provide support and documentation and ensure that the company behind them won't add malware and hide it in the obfuscated code. Here's where free obfuscators often come short.
Check Jscrambler for an enterprise solution. They support Electron and the full list of their obfuscation transformations is available here.

Is posible to use Vanilla HTML in a React web app?

I'm currently working in a React web app and to save time, a work collegue helped me with the landing page. He did it using vanilla HTML, CSS and vanilla JS.
My question is, can I use that landing without having to adapt it to react? I know I could wrap all the code in a div and go on. But the JS librarys that he used, have to ve adapted.
I tried doing a npm build, create a index.html and place the build folder under it in a folder called "trade". I was trying to create a structure like: "http://ip-server/" is the index.html that I created. And "http://ip-server/trade/" is the react app. I used Docker with Nginx for it. But it didn't seem to work. All I could reach was the index.html, never the build folder.
Am I missing something? Or is it better to adapt the landing?

I would use the "div" technique to adapt the landing page. For that you'd could use "dangerouslySetInnerHTML" as pointed out here: https://reactjs.org/docs/dom-elements.html
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
And then you'll need to research how to make the third party javascript from that landing page work in React in case per case basis. This will be useful for you also for future cases if you can afford to invest the time now. I hope this helps!

How to deal with 'require' of files bloating up my javascript with Webpack?

I am using Webpack to pull in .svg files which I can inline and use inside my Javascript components. It looks something like this:
export default class Svg {
constructor() {
const icons = require.context('public/images/svg', true, /\.svg$/);
}
}
It works perfectly fine. Looking at the buildfile from Webpack I can see that all of these .svg files are being put inside of my main app.js javascript file.
This bloats up my Javascript file that every user on the website needs to load. Although this is only a one time load it does add up to the initial load when someone has not cached the file yet, or when it is refreshed because of changes.
I know that only at buildtime the javascript has access to the filesystem through node.js and therefore there is probably no way around this.
How do I combat the bloat of this file though?
To my knowledge there are a couple of options:
Use XHR request to retrieve the data. This might be slow and cause flashes of icons that are not loaded in time. This might be do-able if you were to have something fast like elasticsearch but otherwise probably not feasible.
Put all my .svg files into a separate file with Webpack so they will be cached longer because this files gets touched way less often than the main javascript code.
Use code splitting to split up my .svg. files and put each.svg` file into a module of its own. Then let webpack deal with it by injecting the modules asynchronously when needed.
The last approach would probably only be helpful for components and javascript code that is not directly visible since there will be loadtime?
Because not all .svg files are necessary the first step would be to remove the require.context and import only files that are needed.
Any thoughts on how to deal with this? Would love to hear from someone who might have some experience on this. Otherwise any and all suggestions are welcome as well. :)

How does hot reloading work?

I am learning React and I'm running it using create-react-app, which allows me to edit text in a file named App.js and as I save any changes in that file, the webpage with the address http://localhost:3000/ in browser automatically updates without reloading. Normally, while making html/plain js files, i need to reload the page. So how does it dynamically update itself?

There is a concept of Hot Reloading. The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. It leverages HMR and without reloading the page, replaces changed components in-place, preserving state. That means that, your change will be visible in about half a second; if it was a dialog, you wouldn't need to re-open it, your text inputs remain filled, etc. In short, it's a massive boon to iterative development where you spend much less time waiting for your app to reload. You can find more details here

The cli which you are using uses webpack to achieve this. Webpack is a module bundler it creates a bundle file from all your js/ts/jsx/tsx files which you embed into your index.html file.To achieve live reloading webpack uses webpack-dev-server(a small node.js express server).You can cofigure your webpack to watch for changes on your file and webpack will update your bundle file whenever your code is changed. You can learn more about how it does here.
All the configurations for webpack are written in webpack.config file.You can learn more about webpack here.You can also follow this link

This is actually not a standalone thing.
This happen because react use webpack dev server which reload package if you make any changes.
As if you want to do same , you need to setup a local server and always make editing in same server.
browserSync is also a option but you need to use nodejs then

Convert HTML + CSS to PDF with nodeJS or Javascript?

I have a problem. I've tried some libraries that convert html to PDF but they don't import CSS, so my PDF is invalid.
I's tried with "html2pdf" , "pdfmake", "jspdf"..
PDFMake does not help me because it need to generate a JSON with HTML data...
The structure of file that I would like to convert to PDF is:
html: www/templates/phase_one_report.html
css: www/css/phase_one_report.css
Some ideas? I am using nodeJS with sailsJS in backend and javascript with ionic in frontend.
Sorry about my english.

This is a difficult problem. I have also found that existing HTML to PDF libraries usually don't handle the HTML & CSS that I throw at them.
The best solution I have found is not Javascript at all: wkhtmltopdf. This is essentially a program that wraps up the webkit rendering engine so that you can give it any HTML + CSS that webkit can render and it will return a PDF document. It does an outstanding job, since it's actually rendering the document just like a browser would.
You mention that you're using node.js, but it's not clear exactly what your environment is, so I'm going assume that your report is available at a URL like http://my.domain/phase_one_report.html. The simplest way to get this working would be to install the wkhtmltopdf application on your server, then use child_process.exec to execute it.
For example:
import { exec } from 'child_process';
// generate the report
// execute the wkhtmltopdf command
exec(
'wkhtmltopdf http://my.domain/phase_one_report.html output_file.pdf',
(error) => {
// send the PDF file to the client
}
);
There are a lot of different command-line options for wkhtmltopdf - you'll need to look into all the different ways to configure it.
If your report is not accessible at a URL, then this becomes a little more complicated - you'll need to inline the CSS and send everything to wkhtmltopdf at once.

There are a number of options available right now:
Edit 09/2018: Use puppeteer, the JS Headless Chrome driver. Firefox now also has headless mode but I'm not sure which library corresponds to puppeteer.
wkhtmltopdf as mentioned before does the job but is slightly outdated.
You will have to watch the latest chrome releases which will have a --headless option to enable html+css+js to pdf conversion.
Then there is PhantomJS and Slimer.js. Both are possible to use with node and Javascript. Nightmare.js is also an option but sits on top of it.
However, Phantom.js is currently the only solution that is truly headless and javascript based. Slimer.JS works with Firefox but requires you to have a window manager, at least xvfb, a virtual frame buffer.
If you want the latest browser features you will have to go with slimer.js or, another option, go with one of the Electron based solutions that keep popping up. Electron is based on Chrome and is scriptable too. A fine solution that also ships with Docker containers is currently https://github.com/msokk/electron-render-service
This list is possibly incomplete and will change a lot in the near future.