DEV Community

Carrie
Carrie

Posted on

How to Encrypt HTML and JS code with SafeLine WAF

Introduction

SafeLine WAF is a simple, lightweight, self-hosted WAF that protects your website from cyber attacks. It has an interesting feature that we've rarely seen in other WAFs. It's called Dynamic Protection.

Dynamic Protection is a mechanism that adds dynamic characteristics to web pages, ensuring that even static pages exhibit dynamic randomness without changing the content viewed by users. Essentially, it encrypts and obfuscates the HTML and JS code of your website.

Today, we will explore and experience the effectiveness of this Dynamic Protection feature.

Installing SafeLine

To install SafeLine, visit the installation guide here. Here, we will use a one-click script for installation:

bash -c "$(curl -fsSLk https://waf-ce.chaitin.cn/release/latest/setup.sh)"
Enter fullscreen mode Exit fullscreen mode

Press Enter continuously, and finally, access IP:9443. Use the credentials provided in the log to log in.

Feature Experience

Next, we will set up a random web page, connect it to SafeLine, and then access it.

Image description

Image description
By pressing F12, we can see the source code like this:

<h1 style="text-align: center;">欢迎使用 PHP!</h1>
<h2>版本信息</h2>
<ul>
    <li>PHP版本:8.2.15</li>
</ul>
<h2>已安装扩展</h2>
<ol>
    <li>Core=8.2.15</li>
    <li>date=8.2.15</li>
    <li>libxml=8.2.15</li>
    <li>openssl=8.2.15</li>
    <li>pcre=8.2.15</li>
    <li>sqlite3=8.2.15</li>
    <li>zlib=8.2.15</li>
    <li>ctype=8.2.15</li>
    <li>curl=8.2.15</li>
    <li>dom=20031129</li>
    <li>fileinfo=8.2.15</li>
    <li>filter=8.2.15</li>
    <li>hash=8.2.15</li>
    <li>iconv=8.2.15</li>
    <li>json=8.2.15</li>
    <li>mbstring=8.2.15</li>
    <li>SPL=8.2.15</li>
    <li>session=8.2.15</li>
    <li>PDO=8.2.15</li>
    <li>pdo_sqlite=8.2.15</li>
    <li>standard=8.2.15</li>
    <li>posix=8.2.15</li>
    <li>random=8.2.15</li>
    <li>readline=8.2.15</li>
    <li>Reflection=8.2.15</li>
    <li>Phar=8.2.15</li>
    <li>SimpleXML=8.2.15</li>
    <li>tokenizer=8.2.15</li>
    <li>xml=8.2.15</li>
    <li>xmlreader=8.2.15</li>
    <li>xmlwriter=8.2.15</li>
    <li>mysqlnd=mysqlnd 8.2.15</li>
    <li>cgi-fcgi=8.2.15</li>
    <li>apcu=5.1.23</li>
    <li>exif=8.2.15</li>
    <li>igbinary=3.2.15</li>
    <li>imagick=@PACKAGE_VERSION@</li>
    <li>intl=8.2.15</li>
    <li>mysqli=8.2.15</li>
    <li>pdo_mysql=8.2.15</li>
    <li>redis=6.0.2</li>
    <li>shmop=8.2.15</li>
    <li>sodium=8.2.15</li>
    <li>zip=1.21.1</li>
    <li>memcached=3.2.0</li>
    <li>Zend OPcache=8.2.15</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Then, we enable the Dynamic Protection feature.

Image description

Click to enable Dynamic Protection and add the resources you need to protect. Note that the free version only supports protection for one resource.

Image description
Before Confusion

Image description
After Confusion

Then we visit the webpage protected by SafeLine Dynamic Protection. Initially, it shows "Decrypting."

Quickly, the web page content appears, the same as before.

Image description

By pressing F12, we can see the source code (since it's too long, I will only show a small part here):


html
<!doctype html>
<html lang=zh>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>该网页已经加密保护</title>
    <link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAC8VBMVEUAAAAqKipISEgnJydDQkIDAwMcHBw8PDw8PDwWFhYVFRUqKionJycLCws+Pz8ICAgmJiYICAhHR0cNDQ0QEBApKSksLCwbGxs9PT1HR0cjIyNDQ0MwMDA5OTlHR0cHBwdGRkYyMjIVFRUODg5AQEAYGBgxMTEDAwNJSUkfHx8lJSVBQUELCwsHBwdHR0cwMDAcHBxAQEALCws6OzsDAwMyMjL///89Pj79/v0DAgInt3UnuncoKCgFBAQICQk2NzcWFxYPDw9FRUUlvHhBQUE6PTsLCgtGSEY5OTohISESEhIuLy4slnoyl3grlHM+o21htI0rk3dIqXRCpnEzMzMwoFlgsJNEqWwroFMxMTH2+vg4oWQonUwkJiUeHR02mXxPrHotlnQrlW8ynWqEwqZnuolitoY9nX84oGs9o2o/p2Y6pmEtLCz5/Pvf7+g7nngpkHVLrXA5pGg2o10jm0xLS0selUkLAADu9fKx1sJnt5BMpoZLqXgwmnIzoGE4QT3C3dBSqYpYsINIpn1AoHtBpHc2nHU6o3AnrG4qqGw0PjkQGxYIEA5ksZZdtYFSq4FDoYBZs3xTsHc0lWEqnFo2glkvFSsaHBvn8+7b6+K43Mx5vaFasIhHooVVr344m20smmQaWEZEMT8xST642san0rtxuZhZrI4+oXIbmGEAjlRFTEg3MDgwOTRasZNvvI49sn4iuXQor3EdqGkkfGYipWEsm18npE4tV0Q5SUFDOkBFKj05IDQnAR0KFBF0v5cniG80jF0dmlUAlTiwzrqezrdpt5cns3MvoWksmmkyf1g6dFQvdVMCl1AwbVA9ZE4oZUoxY0EVAAHX5t3S5t3L39Kix66Sx6yWwKVNqIFIsHcpjm8yl24VmlosiUoAjkaBvZuBtZBZo3osk2IwpFohalMvekwvckE/LToZSTg2KDQwIC0UMyceLSUOKiFWsI92rY1IrX4rhVoAkiwiABZxr4Ihw3xfqnMmgGAMmkcAjgBUQVAtAAAANnRSTlMABP4G/v0bGjcoNyEKyEbs4NPMvEMR/fz78uzYzcG7bmxsbEsq/PT05sy4rKuVk5OTfn3v202D2tR1AAAI+UlEQVRYw7SSP2uDQBjGeyqc0OIgFBKk4pChEAiEDkIcAv7B+wqd+xk635p0Le7FjtrFqf5ZMiVoiN8ihHyAzH3vbEmTJk069IeeD+/r85x33sU/Il7jjgx08LX4dzNWjJ6uareApuo9Q8HnhyCElZ7afmQIABdttadghM6xi5eGDm5hD8jQjUsRnZ7dUAXBF+DmRFHzFHhRNU58BbpSdF+wfcm3OVEeBHnEJS8Kvq5coV/8uN+2GXUmRWz6
Enter fullscreen mode Exit fullscreen mode

Top comments (0)