How to replace the deprecated javascriptEnabled option in less-loader with a new plugin

Question

I need to use inline js for my less files, and previously had a webpack config with something like this to enable inline js:

module.exports = {
  ...
  module: {
    ...
    rules: [
      ...
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: { javascriptEnabled: true },
          },
        ],
      },
    ],
  },
};

However the javascriptEnabled option has been deprecated and the replacement for this is to use the @plugin syntax and use a js plugin. However, I am a bit confused by the docs and how exactly to implement a plugin and which plugin should be implemented in my webpack config to replace this now deprecated option so I can still use inline js. How can I go about doing this? Thanks.

score 6 · Accepted Answer · answered Oct 14 '19 at 19:59

Inline javascript has been deprecated for security concerns. It was vulnerable to code injection. Therefor it is strongly advised to not use inline javascript.

You could use an older version from before javascriptEnabled was deprecated if you really wanted to use it that badly, but I suppose that answer would be too simple. So here is this.

I did some research and I guess you got your idea to use plugins from this question. My guess is that the author here didn't mean to replace javascriptEnabled from less-loader with a webpack plugin to achieve a similar way of writing inline javascript. I guess he meant that every piece of inline javascript should be rewritten as a less plugin for security reasons.

If you think about it that way, the docs suddenly make more sense.

You could replace your inline javascript with different Less plugins like the docs you provided show:

// my-plugin.js
install: function(less, pluginManager, functions) {
    functions.add('pi', function() {
        return Math.PI;
    });
}
// etc

If you were to use this in your stylesheet:

@plugin "my-plugin";
.show-me-pi {
  value: pi();
}

You would get:

.show-me-pi {
  value: 3.141592653589793;
}

If I use webpack, as noted in the question, to compile and bundle my less, is this security vulnerability a non-issue since the stylesheets should then just be turned into pure css? — Jimmy, Oct 15 '19 at 17:48
As far as my knowledge about cyber security goes it indeed shouldn't be a problem. But if they deprecated the option to use inline javascript on the loader too there either could be a security issue too, or there simply isn't a way around it to compile inline javascript in LESS code anymore with the newest version of LESS. Nevertheless you'd have to use an earlier version of `less-loader` and `less` in order for your code to work the way it does right now which is never the best solution in my opinion. — Luïs, Oct 16 '19 at 06:49

score 2 · Answer 2 · answered Mar 12 '21 at 03:00

Here is a modification/extension of @Luze's appoach, documentation here:

myPluginFile.js:

const axios = require('axios').default

module.exports = {
  install: function (less, pluginManager, functions) {
    functions.add("blue", function () {

      const headers = {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        timestamp: +new Date(),
      }  
      
      try {
        const method = 'get'
        const url = 'https://myAPI.com/myFile.json'
        const options = { headers: { ...headers } }
        const { data } = await axios[method](url, {}, options)
        return data
      } catch (error) {
        console.info('Error', { msg: error.message })
      }
    });
  },
};

myStyleFile.less:

@plugin "myPluginFile";

/* Style the body */
body {
  color: blue();
}

How to replace the deprecated javascriptEnabled option in less-loader with a new plugin

2 Answers2

Linked