如何将变量从玉石模板文件传递到脚本文件?

2022-08-30 04:43:15

我在 jade 模板文件 (index.jade) 中声明的变量 (config) 中遇到问题,该变量未传递到 javascript 文件,这会使我的 javascript 崩溃。以下是文件(views/index.jade):

h1 #{title}

script(src='./socket.io/socket.io.js')
script(type='text/javascript')
  var config = {};
  config.address = '#{address}';
  config.port = '#{port}';
script(src='./javascripts/app.js')

这是我的应用程序的一部分.js(服务器端):

  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.set('address', 'localhost');
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', function(req, res){
  res.render('index', {
    address: app.settings.address,
    port: app.settings.port
});
});

if (!module.parent) {
  app.listen(app.settings.port);
  console.log("Server listening on port %d",
app.settings.port);
}

// Start my Socket.io app and pass in the socket
require('./socketapp').start(io.listen(app));

这是我的javascript文件的一部分崩溃(public/javascripts/app.js):

(function() {
        var socket = new io.Socket(config.address, {port: config.port, rememberTransport: false});

我在localhost(我自己的机器)上以开发模式(NODE_ENV=开发)运行站点。我正在使用node-inspector进行调试,它告诉我配置变量在public / javascripts / app中未定义.js。

任何想法??谢谢!!


答案 1

有点晚了,但是...

script.
  loginName="#{login}";

这在我的脚本中工作正常。在Express中,我正在这样做:

exports.index = function(req, res){
  res.render( 'index',  { layout:false, login: req.session.login } );
};

我猜最新的玉石不一样?

美客。

编辑:在脚本后添加“.”,以防止玉警告。


答案 2

#{}用于转义字符串插值,它会自动转义输入,因此更适合纯字符串而不是JS对象:

script var data = #{JSON.stringify(data)}
<script>var data = {&quot;foo&quot;:&quot;bar&quot;} </script>

!{}用于未转义代码插值,这更适合对象

script var data = !{JSON.stringify(data)}
<script>var data = {"foo":"bar"} </script>

警告未转义的代码可能很危险。必须确保清理任何用户输入,以避免跨站点脚本 (XSS)。

例如:

{ foo: 'bar </script><script> alert("xss") //' }

将成为:

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

可能的解决方案:使用.replace(/<\//g, '<\\/')

script var data = !{JSON.stringify(data).replace(/<\//g, '<\\/')}
<script>var data = {"foo":"bar<\/script><script>alert(\"xss\")//"}</script>

其目的是防止攻击者:

  1. 突破变量:转义引号JSON.stringify
  2. 分解脚本标记:如果变量内容(您可能无法控制它是否来自数据库)有一个字符串,则 replace 语句将处理它</script>

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