[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

本文原创,欢迎拍砖和推荐。   

系列课程

posted @ 2017-07-17 10:04 Emrys5 阅读(...) 评论(...) 编辑 收藏