使用BundleTransformer.UglifyJs实现Javascript混淆

Question

我刚刚在我的MVC项目中添加了BundleTransformer.UglifyJs NuGet包，以混淆Javascript代码。

但是结果看起来并不是很丑陋：

function onDeckenstaerkeChanged(){validateCorrectDeckenstaerke();$("#dropdown-bta").empty();$.each(getBelagtraegerAbstand(

这是我的web.config文件中配置压缩工具的部分：

```html

这是我的web.config文件中配置压缩工具的部分：

```

<bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <core>
        <css>
            <minifiers>
                <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />
              <add name="YuiCssMinifier" type="BundleTransformer.Yui.Minifiers.YuiCssMinifier, BundleTransformer.Yui" /></minifiers>
            <translators>
                <add name="NullTranslator" type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core" enabled="false" />
            </translators>
        </css>
        <js defaultMinifier="UglifyJsMinifier">
    <minifiers>
      <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />
      <add name="YuiJsMinifier" type="BundleTransformer.Yui.Minifiers.YuiJsMinifier, BundleTransformer.Yui" />
      <add name="UglifyJsMinifier" type="BundleTransformer.UglifyJs.Minifiers.UglifyJsMinifier, BundleTransformer.UglifyJs" />
    </minifiers>
    <translators>
      <add name="NullTranslator" type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core" enabled="false" />
    </translators>
  </js>
    </core>
</bundleTransformer>

对我来说，结果看起来是缩小了，但并没有混淆。

我错过了什么，结果应该是什么样子的？

有没有一种方法可以调试使用哪个模块？

- mklieber

Answer 1

如此文所述：

引擎使用了JavaScript Engine Switcher库。为了使该模块正常工作，建议安装以下NuGet包之一：JavaScriptEngineSwitcher.Msie 或 JavaScriptEngineSwitcher.V8。 安装该包后，需要将JavaScript引擎的名称（例如MsieJsEngine）设置为/configuration/bundleTransformer/uglify/jsEngine配置元素的名称属性。

对于bundle transformer UglifyJS的工作，您需要安装JS引擎并在您的web.config片段中定义它。因此，请安装JavaScriptEngineSwitcher.Msie或JavaScriptEngineSwitcher.V8包。

重要提示！

根据您安装的包，您将不得不手动添加V8的web.config片段的末尾：

...
</core>
  <uglify>
    <jsEngine name="V8JsEngine"></jsEngine>
  </uglify>
</bundleTransformer>

或者对于MsieJsEngine：

...
</core>
  <uglify>
    <jsEngine name="MsieJsEngine"></jsEngine>
  </uglify>
</bundleTransformer>

- HRKoder

Answer 2

onDeckenstaerkeChanged函数是全局的，因此它的名称不会被处理。

你需要将它变成局部的。为了做到这一点，将代码包裹在一个IIFE（立即调用的函数表达式）中：

(function(){
    ...
    function onDeckenstaerkeChanged(){
        ...
    }
    ...
})();

还有另一种变体。如果你启用了mangling.topLevel选项，那么你可以混淆所有的全局变量。在mangling.except选项中，你可以指定不需要应用混淆的变量名称：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
        ...
        <uglify>
            <js ...>
                <mangling topLevel="true" except="$,ko,myVar" />
            </js>
            ...
        </uglify>
        ...
    </bundleTransformer>
</configuration>

- Andrey Taritsyn