Blazor Web App

Blazor applications can be protected using Babel Obfuscator, which provides several advantages. One of the main advantages of using Blazor's razor pages is the ability to combine HTML markup and C# code, allowing for more concise and readable code. This is particularly useful for developers who are more familiar with C# and prefer to work with it directly rather than relying on JavaScript or other front-end languages.

Obfuscation can rename classes, methods, and variables to obscure their original names, making it harder for potential attackers to understand and modify the code. In the case of a Blazor application, obfuscating the razor pages can also protect the HTML and C# code from being viewed or manipulated by end-users, providing an additional layer of security.

The GitHub repository at https://github.com/dotnet/blazor-samples contains several example applications that demonstrate various features and capabilities of Blazor technology. We will use one of these samples to show how to effectively integrate Babel Obfuscator to obfuscate a Blazor Web application.

git clone https://github.com/dotnet/blazor-samples

To get started with the Blazor app samples, you can clone the project repository available on GitHub. Once you have cloned the repository, navigate to the 7.0\BlazorServerSignalRApp folder, and then open the project file named BlazorServerSignalRApp.csproj using Visual Studio.

If you have the Company license, you can obfuscate the application during the build process by adding a reference to the Babel.Obfuscator nuget. This can make the obfuscation process more straightforward and streamlined, allowing you to protect your application more effectively.

Open the project file by double-clicking on the BlazorServerSignalRApp project node in the Solution Explorer window and append the following MSBuild code snippet before the </Project> close tag.

<UsingTask TaskName="Babel" AssemblyName="Babel.Build, Version=10.0.0.0, Culture=neutral, PublicKeyToken=138d17b5bd621ab7" />

<Target Name="Obfuscate" AfterTargets="Compile">

   <Babel InputFile="$(ProjectDir)$(IntermediateOutputPath)$(TargetFileName)" OutputFile="$(ProjectDir)$(IntermediateOutputPath)$(TargetFileName)" ObfuscateTypes="true" ObfuscateEvents="true" ObfuscateMethods="true" ObfuscateProperties="true"  ObfuscateFields="true" VirtualFunctions="true" UnicodeNormalization="false" FlattenNamespaces="true" StringEncryption="hash" ResourceEncryption="true" ControlFLowObfuscation="if=on;switch=on;case=on;call=on" ControlFLowIterations="3" />
   
</Target>

Save the file and rebuild the solution. During the build process, Babel Obfuscator will automatically run and process the target assembly. You can test the obfuscated application by pressing F5 to launch the Visual Studio debugger.

In Blazor, each web page is a Razor component implemented as a .razor file which mixes HTML and C# code. When the component is compiled, Visual Studio generates a public class that corresponds to the Razor component, and this class is used to build the web page in the browser. Babel Obfuscator, by default, does not rename any externally visible symbol to avoid breaking the public interface of the assembly. Therefore, the public classes that correspond to the Blazor Web page will not be obfuscated.

However, you can protect these web pages by configuring Babel Obfuscator using XML rules to obfuscate the classes explicitly. By doing so, you can prevent unauthorized access and modification of your code, making it more difficult for attackers to reverse-engineer or steal your application's logic.

To create an XML rule for protecting the code behind Razor pages with Babel Obfuscator, you first need to open the application assembly using any .NET inspection tool of your choice. This can be done using tools such as ILSpy, DotPeek, or dnSpy, which allow you to decompile the assembly and inspect its contents. Once you have opened the assembly, you can look for the class representing the code behind the Razor page you want to protect, which should have the same name as the Razor page and be located in the namespace name ending with Pages or Shared.

Once you have located the class, you can create an XML rule for Babel Obfuscator that targets the classes you want to obfuscate. The XML rule should specify the name of the namespace you want to protect. In this case

Create a new XML project item named babelRules.xml and add the following rule:

<?xml version="1.0" encoding="utf-8" ?>
<Rules>
  <Rule name="rule1" feature="renaming" exclude="false">
    <Target>Classes</Target>
    <Pattern>*</Pattern>
    <Namespace>BlazorServerSignalRApp.Pages,BlazorServerSignalRApp.Shared</Namespace>
  </Rule>
</Rules>

Then add the babelRules.xml file to the Babel task as follow:

<Babel RulesFiles="$(ProjectDir)babelRules.xml" ... />

Run the build and inspect the newly generated target assembly.

The public classes corresponding to the web pages are no more visible.

Configuring Babel Obfuscator using XML rules allows for granular control over which classes to obfuscate and how they should be renamed, giving you greater flexibility and customization options.

Generally, you can use Visual Studio's Publish feature to deploy the application to a folder. Once you have published the app, you can execute the BlazorServerSignalRApp.exe executable to launch the application. This will allow you to test the obfuscated application and ensure that it is functioning as expected.

The sample application with Babel Obfuscator already integrated can be downloaded here.

Last updated