About JS Source Maps //RE: Current solutions for source code protection of web pages.

Hello friends,

I think maybe there is an eclectic method for the source codes protection, which can avoid users reading the codes directly and also provide authorized users to read the original codes, especially for debugging.

The suitable tool is Javascript Source Maps. Currently chrome supports this feature. You can enable it by selecting “Enable source maps” in chrome’s developer tools setting interface.

You can use Closure Compiler(https://developers.google.com/closure/compiler/docs/gettingstarted_app) to generate the compressed JS file and the corresponding source map file. The command format is:

java -jar compiler.jar \
--js script.js \
--create_source_map ./script-min.js.map \
--source_map_format=V3 \
--js_output_file script-min.js

Users who want to read the original codes of a web app can contact the owner of the web app to fetch the source map file, and add a new line of “//@ sourceMappingURL=/path/to/file.js.map” to the end of the compressed JS file. Then they will see the original codes when debugging.

What’s your opinion about this consideration?

Thanks & regards

Gao Wenmei
Huawei Technologies Co., Ltd.

From: Gaowenmei
Sent: Monday, June 17, 2013 6:51 PM
To: 'Travis Miller Web Development'
Cc: public-webappscp@w3.org
Subject: RE: Current solutions for source code protection of web pages.

Thank you Travis,

I agree with you, openness is a very important thing.

And I’m interested in the “pull request” mechanism you mentioned. Is there any detailed description of this mechanism?

Thanks,
Gao Wenmei

From: Travis Miller Web Development [mailto:tmillerweb@gmail.com]
Sent: Saturday, June 15, 2013 11:27 PM
To: Gaowenmei
Cc: public-webappscp@w3.org
Subject: Re: Current solutions for source code protection of web pages.

Whatever solution we potentially develop shouldn't be completely shut off from others.

It still should be a sense of openness for collaboration when working directly with other developers who want to understand our code better.

A mechanism like maybe a "pull request" for approving people who want to see our code might be helpful too.


Thanks,
Travis Miller


On Jun 13, 2013, at 11:48 PM, Gaowenmei <gaowenmei@huawei.com<mailto:gaowenmei@huawei.com>> wrote:
Dear friends,
Welcome to join the webappscp CG. Hope everyone is generous with your criticism.
As we all know, the source codes of web pages loaded by browser are usually public and easily viewed. Thus, source code protection is a difficult thing in web page/web app area.
As far as I know, currently there are two main solutions to protect the web source codes: User Interface Disabling and Code Obfuscation.

1. User interface disabling: a mechanism of forbidding users to view source code by right-clicking, shortcut key pressing or menu bar selecting. Usually, it can be realized by integrating some small pieces of codes into your web page, for example:
(1) Forbid right-click button:
e.g. document.oncontextmenu = function() {return false;}
(2) Shield the shortcut key (usually F12):
e.g. document.onkeydown = function () {if(event.keyCode == 123){event.returnValue = false;}}
(3) Hide the menu bar and location bar:
e.g. function openNewpage() {window.open ('foobar.html', '', 'toolbar=no,menubar=no,location=no');}
The three methods above can be used together to maximize the protection effect. It looks like a good way to protect your web app's code, especially the hosted web app.
However, there is a fatal problem: browsers always prohibit to open pop-up windows by default, so the page will not be opened if you use "window.open()" method.

2. Code obfuscation: including JS obfuscation, html obfuscation and css obfuscation. The principle of this mechanism is that source codes are rearrangement and handled to make them difficult to read.
There are some online obfuscation tools, for example:
(1) Jasob: http://www.jasob.com/

(2) Free Javascript Obfuscator: http://www.javascriptobfuscator.com/

(3) Javascript Obfuscator: http://www.javascript-source.com/javascript-obfuscator.html

(4) YUI Compressor: http://yuilibrary.com/projects/yuicompressor/Yahoo

etc.
However, the drawback of this mechanism is that the codes are still clear text. So it is still easy for developers to get original code structure by reverse engineering.

So, are there any other better solutions for source code protection, especially for web apps (including hosted web apps and packaged web apps)?
Thank you.

郜文美 Gao Wenmei
Huawei Technologies Co., Ltd.