Tips for setting up a Vue application (using vue-cli) to include nonce attributes in created script tags

Question

Tips for setting up a Vue application (using vue-cli) to include nonce attributes in created script tags

My vue application, compiled using vue-cli, has a vue.config.js file structured as follows:

'use strict';

module.exports = {
  publicPath: `${process.env.CDN_URL || ''}/dist/`,
  lintOnSave: true,
  transpileDependencies: [],
  outputDir: '.tmp/dist',
  pages: {
    navigator: {
      entry: 'vue/home/main.ts',
      template: 'views/home/index.ejs',
      // Will output to dist/views/home/index.ejs
      filename: 'views/home/index.ejs',
    },
  },
  chainWebpack(config) {
    config.module
      .rule('ejs')
      .test(/\.ejs$/)
      .use('html')
      .loader('html-loader');
  },
};

I want webpack to include

nonce="<%= nonce %>"

for each generated script tag. I have tried setting the __webpack_nonce__ variable in various sections of vue.config.js without success. Attempts include adding it to chainWebpack() and configWebpack(), as well as placing it in vue/home/main.ts file. None of these approaches have yielded the desired result. How can I successfully add nonce attributes to the script tags?

The specific versions being used are vue 2.6.x and vue cli 4.5.x

javascript vue.js webpack vuejs2

Answer 1

Answer №1

Due to the complexity of my requirements, I decided to create a custom webpack plugin instead of relying on the script-ext-html-webpack-plugin. Specifically, I needed to use ${nonce} for header tags and <%= nonce %> for body tags. My plugin is simple and inspired by the script-ext-html-webpack-plugin referenced by @Sphinx.

const HtmlWebpackPlugin = require('html-webpack-plugin');

class AddNonceToScriptTagsWebpackPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
      const alterAssetTagGroups = compilation.hooks.htmlWebpackPluginAlterAssetTags || HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups;
      alterAssetTagGroups.tap(this.constructor.name, (data) => {
        data.head = this._addNonceAttribute(data.head || []);
        data.body = this._addNonceAttribute(data.body || []);

        return data;
      });
    });
  }

  _addNonceAttribute(tags) {
    return tags.map((tag) => {
      if (tag.tagName === 'script') {
        tag.attributes = tag.attributes || {};
        tag.attributes.nonce = '<%= nonce %>';
      } else if (tag.tagName === 'link' && tag.attributes && tag.attributes.as === 'script') {
        tag.attributes = tag.attributes || {};
        // eslint-disable-next-line no-template-curly-in-string
        tag.attributes.nonce = '${nonce}';
      }

      return tag;
    });
  }
}

The vue.config.js file has been updated as follows:

'use strict';

module.exports = {
  publicPath: `${process.env.CDN_URL || ''}/dist/`,
  lintOnSave: true,
  transpileDependencies: [],
  outputDir: '.tmp/dist',
  pages: {
    navigator: {
      entry: 'vue/home/main.ts',
      template: 'views/home/index.ejs',
      // Will output to dist/views/home/index.ejs
      filename: 'views/home/index.ejs',
    },
  },
  configureWebpack: {
    plugins: [
      new AddNonceToScriptTagsWebpackPlugin(),
    ],
  },
  chainWebpack(config) {
    // Override the default loader for html-webpack-plugin so that it does not fallback to ejs-loader.
    // ejs-loader will use ejs syntax against the template file to inject dynamic values before html-webpack-plugin runs
    config.module
      .rule('ejs')
      .test(/\.ejs$/)
      .use('html')
      .loader('html-loader');
  },
};

Answer 2

Due to the complexity of my requirements, I decided to create a custom webpack plugin instead of relying on the script-ext-html-webpack-plugin. Specifically, I needed to use ${nonce} for header tags and <%= nonce %> for body tags. My plugin is simple and inspired by the script-ext-html-webpack-plugin referenced by @Sphinx.

const HtmlWebpackPlugin = require('html-webpack-plugin');

class AddNonceToScriptTagsWebpackPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
      const alterAssetTagGroups = compilation.hooks.htmlWebpackPluginAlterAssetTags || HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups;
      alterAssetTagGroups.tap(this.constructor.name, (data) => {
        data.head = this._addNonceAttribute(data.head || []);
        data.body = this._addNonceAttribute(data.body || []);

        return data;
      });
    });
  }

  _addNonceAttribute(tags) {
    return tags.map((tag) => {
      if (tag.tagName === 'script') {
        tag.attributes = tag.attributes || {};
        tag.attributes.nonce = '<%= nonce %>';
      } else if (tag.tagName === 'link' && tag.attributes && tag.attributes.as === 'script') {
        tag.attributes = tag.attributes || {};
        // eslint-disable-next-line no-template-curly-in-string
        tag.attributes.nonce = '${nonce}';
      }

      return tag;
    });
  }
}

The vue.config.js file has been updated as follows:

'use strict';

module.exports = {
  publicPath: `${process.env.CDN_URL || ''}/dist/`,
  lintOnSave: true,
  transpileDependencies: [],
  outputDir: '.tmp/dist',
  pages: {
    navigator: {
      entry: 'vue/home/main.ts',
      template: 'views/home/index.ejs',
      // Will output to dist/views/home/index.ejs
      filename: 'views/home/index.ejs',
    },
  },
  configureWebpack: {
    plugins: [
      new AddNonceToScriptTagsWebpackPlugin(),
    ],
  },
  chainWebpack(config) {
    // Override the default loader for html-webpack-plugin so that it does not fallback to ejs-loader.
    // ejs-loader will use ejs syntax against the template file to inject dynamic values before html-webpack-plugin runs
    config.module
      .rule('ejs')
      .test(/\.ejs$/)
      .use('html')
      .loader('html-loader');
  },
};

Answer 3

Answer №2

To solve this issue, consider incorporating the script-ext-html-webpack-plugin into the list of plugins in your webpack.prod.conf file (or whichever webpack configuration file you are using).

new ScriptExtHtmlWebpackPlugin({
  custom: {
    test: /\.js$/, // modify this regular expression as needed
    attribute: 'nonce',
    value: '<%= nonce %>'
  }
}),

Answer 4

To solve this issue, consider incorporating the script-ext-html-webpack-plugin into the list of plugins in your webpack.prod.conf file (or whichever webpack configuration file you are using).

new ScriptExtHtmlWebpackPlugin({
  custom: {
    test: /\.js$/, // modify this regular expression as needed
    attribute: 'nonce',
    value: '<%= nonce %>'
  }
}),

Answer 5

Answer №3

After 3 years of searching, I am still trying to find the perfect solution here

I have made some modifications and clarifications based on @Jim Geurts' solution

To your vue.config.js file, add the following:

class AddNonceToScriptTagsWebpackPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
      const alterAssetTagGroups = compilation.hooks.htmlWebpackPluginAlterAssetTags || HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups;
      alterAssetTagGroups.tap(this.constructor.name, (data) => {
        data.head = this._addNonceAttribute(data.head || []);
        data.body = this._addNonceAttribute(data.body || []);

        return data;
      });
    });
  }

  _addNonceAttribute(tags) {
    return tags.map((tag) => {
      if (tag.tagName === 'script' || tag.tagName === 'link' || tag.tagName === 'style') {
        tag.attributes = tag.attributes || {};
        tag.attributes.nonce = 'YOUR-SECRET-NONCE';
      }

      return tag;
    });
  }
}

However, be aware that utilizing Jim's code or mine will result in the HTML output (index.html) being minified inline, removing spaces and line breaks. The solution lies in customizing the HtmlWebpackPlugin configuration.

  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: 'public/index.html',
        inject: 'body', // Inject scripts into body
        minify: false, // Disable minification
      }),
      new AddNonceToScriptTagsWebpackPlugin(),
    ]
  }

Answer 6

After 3 years of searching, I am still trying to find the perfect solution here

I have made some modifications and clarifications based on @Jim Geurts' solution

To your vue.config.js file, add the following:

class AddNonceToScriptTagsWebpackPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
      const alterAssetTagGroups = compilation.hooks.htmlWebpackPluginAlterAssetTags || HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups;
      alterAssetTagGroups.tap(this.constructor.name, (data) => {
        data.head = this._addNonceAttribute(data.head || []);
        data.body = this._addNonceAttribute(data.body || []);

        return data;
      });
    });
  }

  _addNonceAttribute(tags) {
    return tags.map((tag) => {
      if (tag.tagName === 'script' || tag.tagName === 'link' || tag.tagName === 'style') {
        tag.attributes = tag.attributes || {};
        tag.attributes.nonce = 'YOUR-SECRET-NONCE';
      }

      return tag;
    });
  }
}

However, be aware that utilizing Jim's code or mine will result in the HTML output (index.html) being minified inline, removing spaces and line breaks. The solution lies in customizing the HtmlWebpackPlugin configuration.

  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: 'public/index.html',
        inject: 'body', // Inject scripts into body
        minify: false, // Disable minification
      }),
      new AddNonceToScriptTagsWebpackPlugin(),
    ]
  }

Tips for setting up a Vue application (using vue-cli) to include nonce attributes in created script tags

Answer №1

Answer №2

Answer №3

Similar questions

I'm currently attempting to incorporate the Material-UI InfoIcon into my code, but I'm unsure of how to properly integrate it within a TextField component

Deleting a document in Mongo with the use of an object as a value

Perform ng-repeat on an array containing several other arrays

How to use jQuery to delete the final table in an entire HTML document

Utilizing Vue.js to ensure that nested components remain within the parent component even when the store

Create JavaScript code with PHP

In order to effectively utilize React and Webpack, it is vital to have the right loader at your disposal

Using vuex-class to interact with Vuex in non-Vue components

Confirm the drag-and-drop functionality for customers by utilizing the accept feature

I created a custom discord.js-commando command to announce all the channels that my bot is currently active in, however, encountered an unexpected error

Guide to utilizing Vuex store to update values from a child component (settings page) in a Vue.js application

Is it possible to loop through a subset of a collection using *ngFor?

Execute a node script file at random intervals

Error encountered: Vue Node.js/express application is unable to set the property "render" due to

Creating arrays in JavaScript with or without the use of jQuery

Bringing joy to a JS library: Embracing both Node and the Window

Warning: Unidentified JavaScript alert(notification) encountered without declaring a

Using solely JavaScript, the process of eliminating parameter values from a URL on the subsequent page

Each time I scroll, the object reloads itself

Encountered a module build failure due to an error code: ECONNRESET was