Styjun

Opposite of "Concerto Grosso"?

Why is C++ template use not recommended in space/radiated environment?

What does this circuit symbol mean?

Why did Robert pick unworthy men for the White Cloaks?

How to search for Android apps without ads?

How can I detect if I'm in a subshell?

usage of mir gefallen

How can I find out about the game world without meta-influencing it?

Am I allowed to determine tenets of my contract as a warlock?

What does the "titan" monster tag mean?

My parents claim they cannot pay for my college education; what are my options?

Certain list transform

Boss making me feel guilty for leaving the company at the end of my internship

Harley Davidson clattering noise from engine, backfire and failure to start

Does every chapter have to "blow the reader away" so to speak?

Why can't we feel the Earth's revolution?

How to represent jealousy in a cute way?

Is it possible to have battery technology that can't be duplicated?

What is the theme of analysis?

Idiom for 'person who gets violent when drunk"

Why does there seem to be an extreme lack of public trashcans in Taiwan?

Can a 40amp breaker be used safely and without issue with a 40amp device on 6AWG wire?

Is it a good security practice to force employees hide their employer to avoid being targeted?

Someone who is granted access to information but not expected to read it

webpack, restrict what can be imported

How can I prevent SQL injection in PHP?What is the most efficient way to deep clone an object in JavaScript?How can I upload files asynchronously?How can I convert a string to boolean in JavaScript?What is the !! (not not) operator in JavaScript?What does “use strict” do in JavaScript, and what is the reasoning behind it?What is the difference between call and apply?What is the purpose of Node.js module.exports and how do you use it?How to import an SQL file using the command line in MySQL?NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

7

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

share|improve this question

edited Mar 25 at 1:48

Isaac

asked Mar 20 at 22:50

IsaacIsaac

558

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Didn't you try this plugin? webpack.js.org/plugins/ignore-plugin
  
  – Harshana
  Mar 25 at 7:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Harshana I didn't see that, no. Thanks for the reference, I'll look into it more
  
  – Isaac
  Mar 25 at 18:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This question is tagged security. What are the security stakes here? What specific attack are you trying to prevent?
  
  – Louis
  Mar 26 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.org/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
  Mar 27 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 overcome the mechanism described in the answer you accepted.
  
  – Louis
  Mar 27 at 18:36
  

  
  
  
  

 | 
show 2 more comments

7

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

share|improve this question

edited Mar 25 at 1:48

Isaac

asked Mar 20 at 22:50

IsaacIsaac

558

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Didn't you try this plugin? webpack.js.org/plugins/ignore-plugin
  
  – Harshana
  Mar 25 at 7:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Harshana I didn't see that, no. Thanks for the reference, I'll look into it more
  
  – Isaac
  Mar 25 at 18:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This question is tagged security. What are the security stakes here? What specific attack are you trying to prevent?
  
  – Louis
  Mar 26 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.org/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
  Mar 27 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 overcome the mechanism described in the answer you accepted.
  
  – Louis
  Mar 27 at 18:36
  

  
  
  
  

 | 
show 2 more comments

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

share|improve this question

edited Mar 25 at 1:48

Isaac

asked Mar 20 at 22:50

IsaacIsaac

558

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";

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

share|improve this question

edited Mar 25 at 1:48

Isaac

asked Mar 20 at 22:50

IsaacIsaac

558

share|improve this question

edited Mar 25 at 1:48

Isaac

asked Mar 20 at 22:50

IsaacIsaac

558

asked Mar 20 at 22:50

IsaacIsaac

558

asked Mar 20 at 22:50

IsaacIsaac

558

2 Answers
2

active

oldest

votes

2

+200

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.

share|improve this answer

answered Mar 26 at 8:51

Munim MunnaMunim Munna

11.2k41544

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Couldn't you get around this by setting your resource path to something like "./src/../../../passwords.txt"? However something like this may work if(resolvedRequestedFilePath.indexOf(allowedFilePath) !== 0)throw new Error("restricted")); where allowedFilePath would be the path to the allowed directory, and resolvedRequestedFilePath would be path.resolve(this.resourcePath)
  
  – Isaac
  Mar 27 at 19:03
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No, the resourcePath is always the absolute path of the file. It resolves ./src/../abc to ./abc.
  
  – Munim Munna
  Mar 28 at 13:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did it solve your issue or you have other queries?
  
  – Munim Munna
  Mar 31 at 18:05
  

  
  
  
  

add a comment | 

0

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]),
 // ...
 ],
 // ...
 ,
 // ...
;

share|improve this answer

answered Mar 25 at 9:39

UjinT34UjinT34

2,1101316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not using React with my website, will that be a problem?
  
  – Isaac
  Mar 25 at 18:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't think so. This plugin doesn't seem to depend on anything related to react. The code is pretty short, you can check it yourself: github.com/facebook/create-react-app/blob/master/packages/…
  
  – UjinT34
  Mar 25 at 18:49
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55271292%2fwebpack-restrict-what-can-be-imported%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

+200

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.

share|improve this answer

answered Mar 26 at 8:51

Munim MunnaMunim Munna

11.2k41544

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Couldn't you get around this by setting your resource path to something like "./src/../../../passwords.txt"? However something like this may work if(resolvedRequestedFilePath.indexOf(allowedFilePath) !== 0)throw new Error("restricted")); where allowedFilePath would be the path to the allowed directory, and resolvedRequestedFilePath would be path.resolve(this.resourcePath)
  
  – Isaac
  Mar 27 at 19:03
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No, the resourcePath is always the absolute path of the file. It resolves ./src/../abc to ./abc.
  
  – Munim Munna
  Mar 28 at 13:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did it solve your issue or you have other queries?
  
  – Munim Munna
  Mar 31 at 18:05
  

  
  
  
  

add a comment | 

2

+200

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.

share|improve this answer

answered Mar 26 at 8:51

Munim MunnaMunim Munna

11.2k41544

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Couldn't you get around this by setting your resource path to something like "./src/../../../passwords.txt"? However something like this may work if(resolvedRequestedFilePath.indexOf(allowedFilePath) !== 0)throw new Error("restricted")); where allowedFilePath would be the path to the allowed directory, and resolvedRequestedFilePath would be path.resolve(this.resourcePath)
  
  – Isaac
  Mar 27 at 19:03
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No, the resourcePath is always the absolute path of the file. It resolves ./src/../abc to ./abc.
  
  – Munim Munna
  Mar 28 at 13:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did it solve your issue or you have other queries?
  
  – Munim Munna
  Mar 31 at 18:05
  

  
  
  
  

add a comment | 

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.

share|improve this answer

answered Mar 26 at 8:51

Munim MunnaMunim Munna

11.2k41544

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

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

// 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;

share|improve this answer

answered Mar 26 at 8:51

Munim MunnaMunim Munna

11.2k41544

answered Mar 26 at 8:51

Munim MunnaMunim Munna

11.2k41544

answered Mar 26 at 8:51

Munim MunnaMunim Munna

11.2k41544

0

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]),
 // ...
 ],
 // ...
 ,
 // ...
;

share|improve this answer

answered Mar 25 at 9:39

UjinT34UjinT34

2,1101316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not using React with my website, will that be a problem?
  
  – Isaac
  Mar 25 at 18:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't think so. This plugin doesn't seem to depend on anything related to react. The code is pretty short, you can check it yourself: github.com/facebook/create-react-app/blob/master/packages/…
  
  – UjinT34
  Mar 25 at 18:49
  

  
  
  
  

add a comment | 

0

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]),
 // ...
 ],
 // ...
 ,
 // ...
;

share|improve this answer

answered Mar 25 at 9:39

UjinT34UjinT34

2,1101316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not using React with my website, will that be a problem?
  
  – Isaac
  Mar 25 at 18:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't think so. This plugin doesn't seem to depend on anything related to react. The code is pretty short, you can check it yourself: github.com/facebook/create-react-app/blob/master/packages/…
  
  – UjinT34
  Mar 25 at 18:49
  

  
  
  
  

add a comment | 

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]),
 // ...
 ],
 // ...
 ,
 // ...
;

share|improve this answer

answered Mar 25 at 9:39

UjinT34UjinT34

2,1101316

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

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

share|improve this answer

answered Mar 25 at 9:39

UjinT34UjinT34

2,1101316

answered Mar 25 at 9:39

UjinT34UjinT34

2,1101316

answered Mar 25 at 9:39

UjinT34UjinT34

2,1101316