หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

บันทึก

- ลองใช้ WebSafecompiler โครงการขั้นสูงเพื่อป้องกันเว็บไซต์ของคุณจากการคัดลอกหรือการวิเคราะห์ซอร์สโค้ดใด ๆ !

- HTML Guard

เมื่อคุณเพิ่มโมดูลคง html-guard.js มันจะทำให้งงงวยเค้าโครงหน้าโดยอัตโนมัติ ปกป้องเว็บแอปพลิเคชัน/ไซต์ของคุณ

- ทำให้สามารถใช้การโหลดทรัพยากรแบบไดนามิกโดยใช้ฟังก์ชั่นในตัวซึ่งป้องกันการดาวน์โหลดสไตล์และสคริปต์แบบคงที่

สั้น ๆ เกี่ยวกับฟังก์ชั่นของ HTML Guard:

  • - การทำให้งงงวยของ HTML (อัตโนมัติ)
  • - การเพิ่มแบบไดนามิกของ 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 การเพิ่มทรัพยากรไซต์แบบไดนามิกทำให้ไม่สามารถคัดลอกได้ในระหว่างการวิเคราะห์แบบคงที่ และในกรณีนี้เมื่อ HTML Guard ถูกลบออกจากการพึ่งพาเนื้อหาของเว็บแอปพลิเคชันจะไม่สามารถโหลดได้ด้วยเหตุผลที่ชัดเจน 

 < 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 จะโหลดองค์ประกอบนี้โดยอัตโนมัติ

วิธีการป้องกันนี้มีข้อดี 2 ข้อ:

  • รูปภาพและแหล่งข้อมูลอื่น ๆ จะไม่ถูกโหลดผ่านการดาวน์โหลดแบบคงที่ของเว็บไซต์
  • หากไม่มีแอตทริบิวต์ HTML Guard จะไม่โหลด

ตัวอย่างเช่น: 

 < 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 >

ปิดการใช้งานเอาต์พุตคอนโซล

สิ่งนี้จะเป็นประโยชน์สำหรับการซ่อนบันทึกการดีบักจากคอนโซลเบราว์เซอร์ ฟังก์ชั่น hooks เช่น log , debug , warn , error , dir , dirxml , assert , table ทำให้พวกเขาส่งคืน null 

 < 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 (และอื่น ๆ ) โครงการนี้เหมาะสำหรับคุณ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด