Comment passer une variable du fichier Jade template vers un fichier script?

!{} est pour sans échappement code interpolation, qui est plus approprié pour objets

script var data = !{JSON.stringify(data).replace(/<\//g, '<\/')}

{ foo: 'bar' }
// becomes:
<script>var data = {"foo":"bar"}</script>

{ foo: 'bar</script><script>alert("xss")//' }
// becomes:
<script>var data = {"foo":"bar<\/script><script>alert(\"xss\")//"}</script>

L'idée est d'empêcher l'attaquant de:

1. sortir de la variable: JSON.stringify échappe à l'citations
2. sortir de la balise script: si le contenu de variable (que vous avez peut-être pas capable de contrôler si vient de la base de données pour ex.) a une chaîne de caractères </script> , l'instruction replace s'en chargera

https://github.com/pugjs/pug/blob/355d3dae/examples/dynamicscript.pug

---

#{} est pour échappée interpolation de chaîne , qui est adapté uniquement si vous travaillez avec chaîne. ne fonctionne pas avec des objets

script var data = #{JSON.stringify(data)}

//=> <script>var data = {&quot;foo&quot;:&quot;bar&quot;}</script>

dans mon cas, je tentais de passer un objet dans un gabarit via une route express (similaire à la configuration OPs). Puis j'ai voulu passer cet objet dans une fonction que j'appelais via une balise de script dans un modèle pug. Bien que la réponse de lagginreflex m'ait rapprochée, j'ai fini par la suivante:

script.
    var data = JSON.parse('!{JSON.stringify(routeObj)}');
    funcName(data)

cela assurait que l'objet était passé comme prévu, plutôt que d'avoir besoin de desérialiser dans la fonction. Aussi, les autres réponses semblaient fonctionne bien avec les primitives, mais lorsque les tableaux etc. ont été passés avec l'objet ils ont été analysés comme des valeurs de chaîne.

voir cette question: JADE + EXPRESS: itération sur objet dans le code inline JS (côté client)?

j'ai le même problème. Jade ne passe pas de variables locales dans (ou ne fait pas de templating du tout) aux scripts javascript, il passe tout simplement le bloc entier en texte littéral. Si vous utilisez les variables locales 'adresse' et 'port' dans votre fichier Jade au-dessus de la balise script, elles devraient apparaître.

les solutions possibles sont énumérés dans la question que j'ai lié ci-dessus, mais vous pouvez: - passer chaque ligne dans un texte non enregistré (!= au début de chaque ligne), et il suffit de mettre "-" avant chaque ligne de javascript qui utilise une variable locale, ou: - Passer les variables par un élément dom et accéder par JQuery (ugly)

N'y a-t-il pas de meilleur moyen? Il semble que les créateurs de Jade ne veulent pas du support de javascript multiligne, comme le montre ce fil dans GitHub: https://github.com/visionmedia/jade/pull/405

si vous êtes comme moi et que vous utilisez beaucoup cette méthode de passer des variables, voici une solution sans écriture de code.

dans votre noeud.js route, passer les variables dans un objet appelé window , comme ceci:

router.get('/', function (req, res, next) {
    res.render('index', {
        window: {
            instance: instance
        }
    });
});

puis dans votre fichier de mise en page pug/jade (juste avant le block content ), vous les sortez comme ceci:

if window
    each object, key in window
        script.
            window.!{key} = !{JSON.stringify(object)};

comme ma disposition.carlin fichier est chargé avec chaque carlin fichier, je n'ai pas besoin de "importer" mon variables et plus.

de cette façon toutes les variables/objets passés à window 'magiquement' finissent dans l'objet réel window de votre navigateur où vous pouvez les utiliser dans Reactjs, Angular, ... ou JavaScript vanille.

Voici comment j'ai résolu ce (utilisant un MOYEN de dérivés)

mes variables:

{
  NODE_ENV : development,
  ...
  ui_varables {
     var1: one,
     var2: two
  }
}

je devais D'abord m'assurer que les variables de configuration nécessaires étaient transmises. MEAN utilise le paquet node nconf, et par défaut est défini pour limiter quelles variables sont passées depuis l'environnement. J'ai dû y remédier:

config/config.js:

origine:

nconf.argv()
  .env(['PORT', 'NODE_ENV', 'FORCE_DB_SYNC'] ) // Load only these environment variables
  .defaults({
  store: {
    NODE_ENV: 'development'
  }
});

après modifications:

nconf.argv()
  .env('__') // Load ALL environment variables
  // double-underscore replaces : as a way to denote hierarchy
  .defaults({
  store: {
    NODE_ENV: 'development'
  }
});

maintenant je peux définir mes variables comme ceci:

export ui_varables__var1=first-value
export ui_varables__var2=second-value

Note: j'ai réinitialisé "heirarchy indicator" en "_ _ _ "(double underscore) parce que sa valeur par défaut était":", ce qui rend les variables plus difficiles à définir à partir de bash. Voir un autre post sur ce fil.

maintenant la partie jade: Ensuite, les valeurs doivent être rendues, afin que javascript puisse les récupérer du côté client. Un façon simple d'écrire ces valeurs dans le fichier index. Comme il s'agit d'une application d'une page (angulaire), cette page est toujours chargée en premier. Je pense qu'idéalement ce devrait être un fichier JavaScript include (juste pour garder les choses propres), mais c'est bon pour une démo.

app/controllers/index.js:

'use strict';
var config = require('../../config/config');

exports.render = function(req, res) {
  res.render('index', {
    user: req.user ? JSON.stringify(req.user) : "null",
    //new lines follow:
    config_defaults : {
       ui_defaults: JSON.stringify(config.configwriter_ui).replace(/<\//g, '<\/')  //NOTE: the replace is xss prevention
    }
  });
};

app/views/index.jade:

extends layouts/default

block content
  section(ui-view)
    script(type="text/javascript").
    window.user = !{user};
    //new line here
    defaults = !{config_defaults.ui_defaults};

dans mon html rendu, cela donne un gentil petit script:

<script type="text/javascript">
 window.user = null;         
 defaults = {"var1":"first-value","var2:"second-value"};
</script>        

A partir de là, il est facile pour angular d'utiliser le code.