Page d'accueil>Ressources de création de sites Web>Données du site Web
Télécharger

Note

? Essayez le projet le plus avancé WebSaFecompiler pour une protection fiable de votre site contre la copie ou toute analyse du code source!

? Garde html

Lorsque vous ajoutez le module statique html-guard.js il obscurcira automatiquement la mise en page de la page. Protégez votre application Web / site.

? Permet d'utiliser un chargement dynamique des ressources à l'aide de fonctions intégrées, ce qui empêche le téléchargement statique de styles et de scripts.

En bref sur les fonctions de HTML Guard:

  • ? Obfuscation de HTML (AUTO)
  • ?? Ajout dynamique de CSS / JS (nécessite une configuration)
  • ?? Attributs protégés via le préfixe _
  • ? Bloquer Devtools dans tous les navigateurs
  • ? Verrouiller le menu contextuel
  • ? Bloc glisser à partir d'une page
  • ? Bloquer la sélection du texte sur une page
  • ? Bloquer la sortie de la console

? Ajoutez-le à votre site 

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

    < body >
    </ body >
</ html >

✅ Configurer

? Style sûr / script ajoutant une protection (recommandée)

Évitez d'utiliser <link> . Chargez dynamiquement les fichiers .css et .js! Cette méthode permet de contourner les téléchargeurs de sites tels que web2zip.com. L'ajout dynamique des ressources du site rend impossible de les copier lors de l'analyse statique. Et dans ce cas, lorsque HTML Guard est retiré des dépendances, le contenu de l'application Web ne pourra pas charger pour des raisons évidentes. 

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

?? Protection des attributs dynamiques (recommandé)

Ajoutez _ préfixe avant tout attribut pour que src devienne _src . HTML Guard chargera automatiquement cet élément

Cette méthode de protection présente 2 avantages:

  • Les images et autres ressources ne seront pas chargées par un téléchargement statique du site
  • Sans HTML Guard Les attributs ne se chargeront pas

Par exemple: 

 < img _src =" image.jpg " />

Bloquer Dev-Tools (recommandé)

Cette fonction bloque toute tentative d'ouvrir des outils de développeur et, si elle est détectée, recharge la page. 

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

Désactiver le menu contextuel

Bloque l'ouverture du menu contextuel standard. 

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

Désactiver la traînée

L'utilisateur ne pourra pas faire glisser des éléments du site. 

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

Désactiver la sélection

Supprime la possibilité d'utiliser la sélection. 

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

Désactiver la sortie de la console

Cela sera utile pour cacher les journaux de débogage de la console du navigateur. Les fonctions de crochets telles que log , debug , warn , error , dir , dirxml , assert , table les faisant retourner NULL 

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

? Exemple d'utilisation 

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

Note

Ce module est davantage destiné à protéger les applications Web que pour les sites simples. Si vous développez des applications à l'aide de frameworks comme ReactJS, Vuejs (et ainsi de suite), alors ce projet est parfait pour vous

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout