Is there a way in webpack to restrict what files can be imported?

Say I want to be able to import files that are in the same directory, as well as the parent directory, but nothing above that parent directory? For example:

These work

import { blah } from "./script.js";

import { blah2 } from "./../gui/textbox.js";

import { blah3 } from  "./../I/can/go/as/deep/down/as/I/want/here.js";

But this wouldn't work

import { passwords } from "./../../passwords.txt";

Because that would go up two (or x number of) directories, instead of just one.

Is there a way in webpack to restrict what files can be imported?

Say I want to be able to import files that are in the same directory, as well as the parent directory, but nothing above that parent directory? For example:

These work

import { blah } from "./script.js";

import { blah2 } from "./../gui/textbox.js";

import { blah3 } from  "./../I/can/go/as/deep/down/as/I/want/here.js";

But this wouldn't work

import { passwords } from "./../../passwords.txt";

Because that would go up two (or x number of) directories, instead of just one.

• javascript
• node.js
• security
• webpack
• import

• 3 Didn't you try this plugin? webpack.js/plugins/ignore-plugin – Harshana Commented Mar 25, 2019 at 7:33
• @Harshana I didn't see that, no. Thanks for the reference, I'll look into it more – Isaac Commented Mar 25, 2019 at 18:36
• This question is tagged security. What are the security stakes here? What specific attack are you trying to prevent? – Louis Commented Mar 26, 2019 at 10:35
• @Louis I'm making an app that downloads remote code as "plugins", then webpacks them and serves them with an electron browser. Among other security precautions (electronjs/docs/tutorial/security), I have to ensure that these plugins only have access to their own directory, the API I expose, and nothing more. – Isaac Commented Mar 27, 2019 at 18:17
• 1 @Isaac Are you preventing the plugins from creating filesystem links? If not, then it would be possible for a bad actor to overe the mechanism described in the answer you accepted. – Louis Commented Mar 27, 2019 at 18:36

2 Answers 2

You can create a loader to restrict webpack imports to specific files.

// file: webpack.config.js
const path = require('path');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve('my-webpack-loader.js'),
            options: {/* ... */}
          }
        ]
      }
    ]
  }
};

Then throw if the resource file is outside ./src and ./node_modules directory or any directory of your choice.

// file: my-webpack-loader.js
const { getOptions } = require('loader-utils');
const validateOptions = require('schema-utils');
const path = require('path');

const schema = {
  type: 'object',
  properties: {
    test: {
      type: 'string'
    }
  }
};

function handler(source) {
  const options = getOptions(this);

  if(this.resourcePath.indexOf(path.resolve('./node_modules')) !== 0) {
    if(this.resourcePath.indexOf(path.resolve('./src')) !== 0) {
      throw `Reseource loading restricted for ${this.resourcePath}`;
    }
  }

  validateOptions(schema, options, 'My Webpack Loader');

  return source;
}

module.exports = handler;

For more info see writing a webpack loader.

react-dev-utils has a plugin for this.

This Webpack plugin ensures that relative imports from app's source directories don't reach outside of it.

var path = require('path');
var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = {
  // ...
  resolve: {
    // ...
    plugins: [
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
      // ...
    ],
    // ...
  },
  // ...
};