[asp.net mvc 奇淫巧技] 05 - 擴展ScriptBundle，支持混淆加密javascript

一、需求：

在web開發中，經常會處理javascript的一些問題，其中就包括js的壓縮，合併，發佈版本以及混淆加密等等問題。在asp.net 開發中我們使用ScriptBundle已經可以解決javascript遇到的大部分問題，其中包括合並壓縮發佈版本的問題。

關於ScriptBundle的簡單應用，可以參考

asp.net mvc4 使用 System.Web.Optimization 對javascript和style的引入、代碼合併和壓縮的優化（ScriptBundle，StyleBundle，Bundling and Minification ）

官方文檔 Bundling and Minification

asp.net 自帶的ScriptBundle已經包含了大部分功能，但是無法實現javascript的混淆加密。在實際項目中，確實很多時候並不希望客戶直接很容易的查看到javascript的源碼，之前的做法都是把javascript的代碼複製到混淆加密的網站，然後進行混淆加密再複製粘貼到項目中。這樣做的效率及其低下，並且很容易出現不可預知的問題。

經常使用javascript混淆加密網站

http://tool.lu/js/

http://tool.chinaz.com/js.aspx

http://www.sojson.com/jscodeconfusion.html

既然asp.net ScriptBundle已經為我們做了那麼多對javascript的操作優化，可不可擴展ScriptBundle加一部混淆加密呢。答案是肯定的。

二、尋找 ScriptBundle 擴展點

首先用ilspy查找源碼，找尋擴展點，第一步打開System.Web.Optimization的dll，然後查詢ScriptBundle。

在反編譯ScriptBundle的類中，發現了一些關鍵信息(JsMinify)，那就是說自定義一個類CustomScriptBundle繼承Bundle，然後在構造函數中傳入實現IBundleTransform介面的自定義混淆加密js的類CustomJsMinify。

這句話聽起來有點繞口，簡單點就是

1、新建一個類CustomScriptBundle繼承Bundle

    public class CustomScriptBundle : Bundle
    {
        public CustomScriptBundle(string virtualPath) : this(virtualPath, null)
        {
        }

        public CustomScriptBundle(string virtualPath, string cdnPath) : base(virtualPath, cdnPath, new IBundleTransform[]
        {
           new CustomJsMinify()
        })
        {
            base.ConcatenationToken = ";";
        }
    }

2、新建一個類CustomJsMinify實現IBundleTransform介面並實現方法Process

我們需要處理的javascript的源碼就在Process方法中，在這裡我們就可以對javascript源碼進行壓縮，混淆加密，或者加上copyright都可以。

下麵的代碼對每個javascript文件加上簡單的copyright。

    public class CustomJsMinify : IBundleTransform
    {
        public void Process(BundleContext context, BundleResponse response)
        {
            if (context == null)
            {
                throw new ArgumentNullException("context");
            }
            if (response == null)
            {
                throw new ArgumentNullException("response");
            }
            if (!context.EnableInstrumentation)
            {
                try
                {
                    response.Content = "/*\r\nAuthor:Emrys\r\nVerson:1.1\r\n*/\r\n" + response.Content;
                }
                catch (Exception ex)
                {
                    response.Content = "/*\r\nError:" + ex.Message + "\r\n*/\r\n" + response.Content;
                }
            }
            response.ContentType = "text/javascript";
        }
    }

 3、在BundleConfig中配置javascript時用CustomScriptBundle

bundles.Add(new CustomScriptBundle("~/bundles/layout").Include(
                        "~/Scripts/layout.js"
                        ));

4、在cshtml中引入方式不變

 @Scripts.Render("~/bundles/layout")

運行項目得到的結果是

在javascript代碼開始處，加上了我們自定義的文字。

在運行項目時，記得把項目web.config中的debug改為false，因為預設情況下，debug模式javascript代碼是不做處理的，因為debug狀態下如果進行壓縮合併或者混淆加密的話，那程式員就很難調試js代碼了。

5、總結

新建一個類實現IBundleTransform介面並實現方法Process，在方法Process中做你需要的處理即可。

三、尋找C#混淆加密javascript的代碼或API

我們已經知道怎麼擴展ScriptBundle了，那現在要做的就是找到合理混淆加密javascript的C#代碼或者API即可。

1、http://dean.edwards.name/download/#packer 可以實現js的混淆加密，開源免費

2、http://www.javascriptobfuscator.com/ 國外的一個混淆加密網站，高級功能需要收費

3、https://github.com/aemkei/jsfuck 一個可以把javascript代碼轉成[]()!+字元

4、https://github.com/mishoo/UglifyJS2

小伙伴們可以根據需求選擇不同的方式，一般第一種就可以。 如果需要特殊加密。可以使用第二種。

我們以第一個為例子

首先現在下載代碼，然後按照上面的方式，最後實現Process方法處理javascript

   public class CustomJsMinify : IBundleTransform
    {
        public void Process(BundleContext context, BundleResponse response)
        {
            if (context == null)
            {
                throw new ArgumentNullException("context");
            }
            if (response == null)
            {
                throw new ArgumentNullException("response");
            }
            if (!context.EnableInstrumentation)
            {
                try
                {
                    ECMAScriptPacker p = new ECMAScriptPacker(ECMAScriptPacker.PackerEncoding.Normal, true, true);
                    response.Content = p.Pack(response.Content);
                }
                catch (Exception ex)
                {
                    response.Content = "/*\r\nError:" + ex.Message + "\r\n*/\r\n" + response.Content;
                }
            }
            response.ContentType = "text/javascript";
        }
    }

得到的javascript結果為：

四、總結

我們通過擴展ScriptBundle就可以很容易的對網站的javascript代碼進行混淆加密，保護了javascript代碼。

我們可以有很多種方式對javascript進行混淆加密，壓縮等等操作，比如通過實現IHttpModule，也可以實現對javascript的操作。

通過擴展ScriptBundle的優點

1、可以繼續使用ScriptBundle的壓縮，合併和版本控制功能，只是在這些功能上進一步增加了混淆加密的功能。

2、不需要每次發佈時粘貼複製至加密的網站，現在可以全部顯示自動化加密。

3、使用優秀的加密SDK，可以更高的保護javascript源碼。

4、可以隨意在javascript上進行操作，比如增加copyright版本號等。

github:https://github.com/Emrys5/Asp.MVC-05-Extended-ScriptsBundle/tree/master

oschina:http://git.oschina.net/emrys5/Asp.MVC-05-Extended-ScriptsBundle

本文原創，歡迎拍磚和推薦。   

系列課程

• [asp.net mvc 奇淫巧技] 01 - 封裝上下文 - 在View中獲取自定義的上下文
• [asp.net mvc 奇淫巧技] 02 - 巧用Razor引擎在Action內生成Html代碼
• [asp.net mvc 奇淫巧技] 03 - 枚舉特性擴展解決枚舉命名問題和支持HtmlHelper
• [asp.net mvc 奇淫巧技] 04 - 你真的會用Action的模型綁定嗎？
• [asp.net mvc 奇淫巧技] 05 - 擴展ScriptBundle，支持混淆加密javascript