ایجاد امنیت فایل های CSS و JavaScript

این مقاله ،با ارائه ی چند راه حل خوب برای امن سازی کدهای سمت Client، نحوه ی امن سازی کدهای JavaScript و CSS را یاد می دهد .

ایجاد امنیت فایل های CSS و JavaScript

آکادمی برنامه نویسان ، برگزار کننده دوره های آموزش برنامه نویسی با استفاده از اساتید مجرب و حرفه ای در سراسر ایران .

[ جهت مشاهده دوره های درحال ثبت نام کلیک کنید ]

ارائه مدارک معتبر آموزشی و ورود به بازار کار .

شما می توانید فایل های JavaScript و یا فایل های CSS را در سرور امن خود قرار دهید.برای جلوگیری از دسترسی غیر ضروری به فایل ها ، آن فایل ها را  ، با استفاده از کدهای مبهم JavaScript ، بخوانید .

مرحله 1:

همه ی فایل های CSS و JavaScript را از Solution که نیاز به امن سازی دارند را پاک کنید.و آن فایل ها را در سرور امن خود قرار دهید.

مرحله 2:

آدرس اولیه ی  سرور امن خود را در جدول دیتابیس خود ذخیره کنید.

مرحله 4:

یک فایل JavaScript را  در Solution ایجاد کنید جایی که متد API ، برای گرفتن آدرس اولیه ی سرور امن ، فراخوانی شود.

مرحله 5:

در داخل فایل JavaScript ،آدرس نسبی را به همراه  آدرس اولیه در فرم مربوط به آدرس اصلی بفرستید.

آدرس اصلی=آدرس اولیه + آدرس نسبی (Actual address=base address + relative address)

برای مثال:

آدرس اولیه=https://cdnjs.cloudflare.com/

آدرس نسبی= ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js

آدرس اصلی= https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js

 

مرحله 6:

برای فراخوانی موفقیت آمیز متد API ی که در فایل جاوا اسکریپت قرار دارند، تمام  فایل های CSS و JavaScript  مورد نیاز را ، با استفاده از متدهای  ضمیمه شده یJQuery  ، در قطعه کدهایی که با موفقیت اجرا شده اند ، بارگذاری کنید.

مرحله 7:

فایل ساخته شده JavaScript  درSolution ، که  برای فراخوانی متد API  ، ایجاد شده است ، را مبهم می کند.

کد نمونه:

در کد JavaScript زیر فایل CSS را به صورت داینامیک می خواند و آن را در قسمت header صفحه یHTML ، بارگذاری می کند.

 

کد JavaScript :

 

function loadCssDynamically() {
          var response = $.ajax({
                url: "style.css",
              type: 'HEAD',
                async: false
            }).status;

           var response_Status = (response != "200") ? false : true;

           if (response_Status) {
                var lblMessage = document.getElementById("lblMessage");
              lblMessage.innerHTML = "پیام با استایل";
                $('head').append('<link rel="stylesheet" type="text/css" href="style.css" />');
            }
            else
                $('head').append('<link rel="stylesheet" type="text/css" href="test.css" />');
        }
        $(function () {
           loadCssDynamically();
       });

 

 

کد مبهم(Obfuscate code):

JavaScript Obfuscator  (جاوا اسکریپت مبهم ساز) ، کدهای Java Script را به فرمتی مبهم و ناخوانا تبدیل می کند تا از تحلیل و سرقت این کد ها توسط سایر افراد جلوگیری شود.

برای متوجه شدن این قسمت شما می توانید کد JavaScript خود را در site ، مبهم کنید.

 

 

 

            var _0xe61f = ["\x73\x74\x61\x74\x75\x73", "\x73\x74\x79\x6C\x65\x2E\x63\x73\x73", "\x48\x45\x41\x44", "\x61\x6A\x61\x78",
            "\x32\x30\x30", "\x6C\x62\x6C\x4D\x65\x73\x73\x61\x67\x65", "\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64", "\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C", "\u067E\u06CC\u0627\u0645\x20\u0628\u0627\x20\u0627\u0633\u062A\u0627\u06CC\u0644", "\x3C\x6C\x69\x6E\x6B\x20\x72\x65\x6C\x3D\x22\x73\x74\x79\x6C\x65\x73\x68\x65\x65\x74\x22\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x63\x73\x73\x22\x20\x68\x72\x65\x66\x3D\x22\x73\x74\x79\x6C\x65\x2E\x63\x73\x73\x22\x20\x2F\x3E", "\x61\x70\x70\x65\x6E\x64", "\x68\x65\x61\x64", "\x3C\x6C\x69\x6E\x6B\x20\x72\x65\x6C\x3D\x22\x73\x74\x79\x6C\x65\x73\x68\x65\x65\x74\x22\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x63\x73\x73\x22\x20\x68\x72\x65\x66\x3D\x22\x74\x65\x73\x74\x2E\x63\x73\x73\x22\x20\x2F\x3E"]; function loadCssDynamically() { var _0x1e5bx2 = $[_0xe61f[3]]({ url: _0xe61f[1], type: _0xe61f[2], async: false })[_0xe61f[0]]; var _0x1e5bx3 = (_0x1e5bx2 != _0xe61f[4]) ? false : true; if (_0x1e5bx3) { var _0x1e5bx4 = document[_0xe61f[6]](_0xe61f[5]); _0x1e5bx4[_0xe61f[7]] = _0xe61f[8]; $(_0xe61f[11])[_0xe61f[10]](_0xe61f[9]) } else { $(_0xe61f[11])[_0xe61f[10]](_0xe61f[12]) } } $(function () { loadCssDynamically() })

کد کامل :

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="jquery-1.10.2.min.js"></script>

    <script type="text/javascript">


        //-----------------------------Actual Code--------------------------------
        //function loadCssDynamically() {
        //    var response = $.ajax({
        //        url: "style.css",
        //        type: 'HEAD',
        //        async: false
        //    }).status;

        //    var response_Status = (response != "200") ? false : true;

        //    if (response_Status) {
        //        var lblMessage = document.getElementById("lblMessage");
        //        lblMessage.innerHTML = "پیام با استایل";
        //        $('head').append('<link rel="stylesheet" type="text/css" href="style.css" />');
        //    }
        //    else
        //        $('head').append('<link rel="stylesheet" type="text/css" href="test.css" />');
        //}
        //$(function () {
        //    loadCssDynamically();
        //});
        //----------------------------------------------------------------------

        // -------------------------Obfuscated Code-----------------------
        var _0xe61f = ["\x73\x74\x61\x74\x75\x73", "\x73\x74\x79\x6C\x65\x2E\x63\x73\x73", "\x48\x45\x41\x44", "\x61\x6A\x61\x78",
            "\x32\x30\x30", "\x6C\x62\x6C\x4D\x65\x73\x73\x61\x67\x65", "\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64", "\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C", "\u067E\u06CC\u0627\u0645\x20\u0628\u0627\x20\u0627\u0633\u062A\u0627\u06CC\u0644", "\x3C\x6C\x69\x6E\x6B\x20\x72\x65\x6C\x3D\x22\x73\x74\x79\x6C\x65\x73\x68\x65\x65\x74\x22\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x63\x73\x73\x22\x20\x68\x72\x65\x66\x3D\x22\x73\x74\x79\x6C\x65\x2E\x63\x73\x73\x22\x20\x2F\x3E", "\x61\x70\x70\x65\x6E\x64", "\x68\x65\x61\x64", "\x3C\x6C\x69\x6E\x6B\x20\x72\x65\x6C\x3D\x22\x73\x74\x79\x6C\x65\x73\x68\x65\x65\x74\x22\x20\x74\x79\x70\x65\x3D\x22\x74\x65\x78\x74\x2F\x63\x73\x73\x22\x20\x68\x72\x65\x66\x3D\x22\x74\x65\x73\x74\x2E\x63\x73\x73\x22\x20\x2F\x3E"]; function loadCssDynamically() { var _0x1e5bx2 = $[_0xe61f[3]]({ url: _0xe61f[1], type: _0xe61f[2], async: false })[_0xe61f[0]]; var _0x1e5bx3 = (_0x1e5bx2 != _0xe61f[4]) ? false : true; if (_0x1e5bx3) { var _0x1e5bx4 = document[_0xe61f[6]](_0xe61f[5]); _0x1e5bx4[_0xe61f[7]] = _0xe61f[8]; $(_0xe61f[11])[_0xe61f[10]](_0xe61f[9]) } else { $(_0xe61f[11])[_0xe61f[10]](_0xe61f[12]) } } $(function () { loadCssDynamically() })

        //------------------------------------------------------------------
    </script>
</head>
<body>
    <h1 style="color: orangered;">سلام برنامه نویسان</h1>
    <br />
    <label id="lblMessage">پیام با استایل</label>
</body>
</html> 

خروجی:

 

 

 

 

اگر شما  کد بالا را نگاه کنید ، شما هیچ reference ی  برای “Style.CSS” پیدا نخواهید کرد اما هنوز رنگ به کنترل HTML با ID "lblMessage" اعمال می شود. زیرا ما فایل    “Style.CSS” را به قسمت Header  مربوط به فایل HTML به صورت داینامیک اضافه کرده ایم.

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب