div divisés pour "javascript paresseux" loading? Sécurité possible/autres problèmes?

Question

Je suis curieux de savoir ce que pensent les gens de cette situation. La raison pour laquelle je voudrais charger javascript paresseux est en raison de la performance. Le chargement de javascript à la fin du corps réduit le blocage du navigateur et aboutit à des chargements de pages beaucoup plus rapides.

Mais il y a une certaine automation que j'utilise pour générer le html (django spécifiquement). Cette automatisation a la commodité de permettre la construction de formulaires avec des "Widgets" qui produisent le contenu dont ils ont besoin pour rendre le widget entier (extra javascript, css, ...). Le problème est que le widget veut sortir javascript immédiatement au milieu du document, mais je veux assurer toutes les charges javascript à la fin du corps.

Lorsque le widget suivant est ajouté à un formulaire, vous pouvez le voir rend quelques <script>...</script> tags:

class AutoCompleteTagInput(forms.TextInput): 
    class Media:              
     css = { 
      'all': ('css/jquery.autocomplete.css',) 
     }            
     js = (
      'js/jquery.bgiframe.js', 
      'js/jquery.ajaxQueue.js',        
      'js/jquery.autocomplete.js', 
     )  

    def render(self, name, value, attrs=None):   
     output = super(AutoCompleteTagInput, self).render(name, value, attrs) 
     page_tags = Tag.objects.usage_for_model(DataSet) 
     tag_list = simplejson.dumps([tag.name for tag in page_tags], 
            ensure_ascii=False) 
     return mark_safe(u'''<script type="text/javascript">     
      jQuery("#id_%s").autocomplete(%s, { 
       width: 150,           
       max: 10, 
       highlight: false, 
       scroll: true, 
       scrollHeight: 100, 
       matchContains: true, 
       autoFill: true    
     });        
     </script>''' % (name, tag_list,)) + output 

Ce que je propose est que si quelqu'un utilise un <div class=".lazy-js">...</div> avec quelques css (.lazy-js { display: none; }) et quelques-uns javascript (jQuery('.lazy-js').each(function(index) { eval(jQuery(this).text()); }), vous pouvez forcer efficacement tous javascript pour charger à la fin de chargement de la page:

class AutoCompleteTagInput(forms.TextInput): 
    class Media:              
     css = { 
      'all': ('css/jquery.autocomplete.css',) 
     }            
     js = (
      'js/jquery.bgiframe.js', 
      'js/jquery.ajaxQueue.js',        
      'js/jquery.autocomplete.js', 
     )  

    def render(self, name, value, attrs=None):   
     output = super(AutoCompleteTagInput, self).render(name, value, attrs) 
     page_tags = Tag.objects.usage_for_model(DataSet) 
     tag_list = simplejson.dumps([tag.name for tag in page_tags], 
            ensure_ascii=False) 
     return mark_safe(u'''<div class="lazy-js">     
      jQuery("#id_%s").autocomplete(%s, { 
       width: 150,           
       max: 10, 
       highlight: false, 
       scroll: true, 
       scrollHeight: 100, 
       matchContains: true, 
       autoFill: true    
     });        
     </div>''' % (name, tag_list,)) + output 

tous les détails de Nevermind de ma mise en œuvre spécifique (les médias spécifiques impliqués), je Je suis à la recherche d'un consensus sur la question de savoir si la méthode d'utilisation de javascript par chargement paresseux par le biais d'une balise cachée peut poser des problèmes de sécurité ou d'autres connexes? L'une des parties les plus pratiques à ce sujet est qu'il suit plutôt bien le principe DRY car il n'est pas nécessaire de hacker une charge paresseuse spécifique pour chaque instance de la page. Cela "fonctionne" simplement.

MISE À JOUR: Je ne sais pas si django doit être sortie juste avant la fin de la </body> la capacité de la file d'attente des choses (par héritage de modèle de fantaisie ou quelque chose?)?

Answer 1

Je préférerais un outil qui me permet de « append » contenu dans le flux de sortie (ou ) ajouter à un tampon, qui sera émis à la fin de la page, juste avant la balise </body>.

Je ne sais pas quels outils commerciaux supportent cela (ou django?) Mais c'est comme ça que j'ai construit mes frameworks. En ce qui concerne votre sécurité/autres problèmes ... le script traitera chaque fois qu'il est lu (sauf si vous produisez une balise de script avec l'attribut defer (dans les navigateurs IE/plus récents)), sauf si elle est déplacée physiquement, cela ne change pas le comportement ou le rend "paresseux".

En ce qui concerne la sécurité, extraire le contenu de l'étiquette de script et appeler le eval() ouvre la possibilité d'exécuter quelque chose que vous n'aviez pas prévu. (peu probable, mais possible)

Answer 2

The problem is that the widget wants to output javascript immediately into the middle of the document, but I want to ensure all javascript loads at the end of the body.

Je ne voudrais pas utiliser ce widget. Le script côté client fourni de manière dynamique par le client est un désastre qui va rompre la sécurité sans que vous ou votre utilisateur soyez plus sage. Comment sauriez-vous si ce code a été compromis, par exemple?