[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
• [asp.net mvc 奇淫巧技] 06 - 也许你的项目同一个用户的请求都是同步的