الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

ملحوظة

؟ جرب WebSafeCompiler الأكثر تقدماً للحماية الموثوقة لموقعك من النسخ أو أي تحليل للرمز المصدر!

؟ HTML Guard

عند إضافة الوحدة النمطية الثابتة html-guard.js فإنها ستشعر تلقائيًا بتخطيط الصفحة. حماية تطبيق الويب/الموقع.

؟ يجعل من الممكن استخدام التحميل الديناميكي للموارد باستخدام وظائف مدمجة ، مما يمنع التنزيل الثابت للأنماط والبرامج النصية.

لفترة وجيزة حول وظائف حارس HTML:

  • ؟ تعجب HTML (Auto)
  • ؟ إضافة ديناميكية من CSS/JS (يتطلب الإعداد)
  • ؟ سمات محمية عبر البادئة _
  • ؟ حظر devtools في أي متصفحات
  • ؟ قفل قائمة السياق
  • ؟ كتلة السحب من صفحة
  • ؟ حظر اختيار النص على صفحة
  • ؟ كتلة إخراج وحدة التحكم

؟ أضفه إلى موقعك 

 <!DOCTYPE  html >
< html >
    < head >
        <!-- Site protection ON! -->
        < script src =" html-guard.min.js " > </ script >
        < script >
            // Configure protection & resource loading
        </ script >
    </ head >

    < body >
    </ body >
</ html >

✅ تكوين

؟ نمط/نص آمن إضافة الحماية (موصى به)

تجنب استخدام <link> . تحميل ديناميكي. css و .js! تجعل هذه الطريقة من الممكن تجاوز تنزيل المواقع مثل web2zip.com. الإضافة الديناميكية لموارد الموقع تجعل من المستحيل نسخها أثناء التحليل الثابت. وفي هذه الحالة ، عندما تتم إزالة Guard HTML من التبعيات ، لن تكون محتويات تطبيق الويب قادرة على التحميل لأسباب واضحة. 

 < script >
    // ADDING: Add link to 'style.css'
    HtmlGuard . loader . loadStyleByRef ( "styles.css" ) ;
</ script > 
 < script >
    // ADDING: Add script "test.js" to head
    HtmlGuard . loader . loadScriptBySrc ( "test.js" ) ;

    //  OR

    // ADDING: Add script "test.js" to head after document loading
    HtmlGuard . loader . loadScriptBySrc_ContentLoaded ( "test.js" ) ;
</ script >

؟ حماية السمات الديناميكية (الموصى بها)

أضف _ بادئة قبل أي سمة بحيث يصبح src _src . سيقوم HTML Guard بتحميل هذا العنصر تلقائيًا

طريقة الحماية هذه لها مزايا:

  • لن يتم تحميل الصور والموارد الأخرى من خلال تنزيل ثابت للموقع
  • بدون سمات حراسة HTML لن يتم تحميلها

على سبيل المثال: 

 < img _src =" image.jpg " />

كتلة Dev-Tools (موصى بها)

تعمل هذه الوظيفة على حظر أي محاولات لفتح أدوات المطورين ، وإذا تم اكتشافها ، فإن إعادة تحميل الصفحة. 

 < script >
    // PROTECTION: Disable DevTools
    HtmlGuard . protections . antiDevTools ( ) ;
</ script >

تعطيل قائمة السياق

يمنع فتح قائمة السياق القياسية. 

 < script >
    // PROTECTION: Disable context menu
    HtmlGuard . protections . blockContextMenu ( ) ;
</ script >

تعطيل السحب

لن يتمكن المستخدم من سحب العناصر من الموقع. 

 < script >
    // PROTECTION: Disable drag
    HtmlGuard . protections . blockDrag ( ) ;
</ script >

تعطيل الاختيار

يزيل القدرة على الاستخدام. 

 < script >
    // PROTECTION: Disable selection
    HtmlGuard . protections . blockSelection ( ) ;
</ script >

تعطيل إخراج وحدة التحكم

سيكون هذا مفيدًا لإخفاء سجلات التصحيح من وحدة التحكم في المتصفح. وظائف السنانير مثل log ، debug ، warn ، error ، dir ، dirxml ، assert ، table يجعلها عودة فارغة 

 < script >
    // PROTECTION: Disable console output
    HtmlGuard . protections . blockConsoleOutput ( ) ;
</ script >

؟ مثال على استخدام 

 < head >
<!-- Example of HTML-Guard protection -->

<!DOCTYPE html >
< html >

< head >
    < script src =" ../html-guard.js " > </ script >
    < script >
        // PROTECTION: Disable DevTools
        HtmlGuard . protections . antiDevTools ( ) ;

        // PROTECTION: Disable context menu
        HtmlGuard . protections . blockContextMenu ( ) ;

        // PROTECTION: Disable drag
        HtmlGuard . protections . blockDrag ( ) ;

        // PROTECTION: Disable selection
        HtmlGuard . protections . blockSelection ( ) ;

        // PROTECTION: Disable console output
        HtmlGuard . protections . blockConsoleOutput ( ) ;

        // ADDING: Add link to 'style.css'
        HtmlGuard . loader . loadStyleByRef ( "styles.css" ) ;

        // ADDING: Run 'test.js' script
        HtmlGuard . loader . loadScriptBySrc ( "test.js" ) ;
    </ script >
</ head >

< body >
    < div >
        <!-- '_id' is protected variant of 'id' -->
        < p > Hello, world! Time: < span _id =" time " > </ span > </ p >

        <!-- '_src' is protected variant of 'src' -->
        < img _src =" test.jpg " _alt =" Test image " />

    </ div >

    < a _href =" https://github.com/DosX-dev/HTML-Guard " > HTML Guard in GitHub! </ a >

</ body >

</ html >

ملحوظة

تهدف هذه الوحدة إلى حماية تطبيقات الويب أكثر من المواقع البسيطة. إذا كنت تقوم بتطوير تطبيقات باستخدام أطر مثل ReactJs و Vuejs (وما إلى ذلك) ، فإن هذا المشروع مثالي لك

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل