Webpack and terser reveal the names of the source files in the compressed output

Is there a way to stop source filenames from appearing in webpack output even when using Terser for minification?

Illustration

After minifying my production React app build, the resulting .js output file still contains original source filenames rather than obfuscated ones.

Snippet:

[...]
({"../js/dashboard/lib/MyApiClient.js":function(e,t,n){"use
strict";n.r(t),n.d(t,"default",function(){return c});var
o=n("../node_modules/axios/index.js"),r=n.n(o),
s=n("../node_modules/@sentry/browser/esm/index.js");
[...]

Observations:

  • A module named MyApiClient.js is visible in the proprietary code
  • Dependencies like axios and Sentry are being used

Webpack setup

This snippet shows the relevant part of our webpack configuration for production:

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        extractComments: false,
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
  },

The Issue

I'm worried about the potential information leakage regarding our app's internal architecture through these clear source filenames which I couldn't figure out how to hide within the webpack or Terser settings.

While the examples shown may seem harmless, exposing too much structural detail could make it easier for others to analyze and uncover hidden features.

Appreciate any advice or tips!

javascriptwebpackterser

Answer №1

There's a connection to webpack's optimization.namedModules setting, which is typically set to false by default. It's possible that it's enabled in your current configuration.

// Don't forget to adjust webpack.config.js
module.exports = {
  //...
  optimization: {
    namedModules: false
  }
};

Answer №2

It may be worth considering disabling sourceMap: false during production to help map code to file names more efficiently.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add a new element to the page with a smooth fade-in animation using jQuery

var content = "<div id='blah'>Hello stuff here</div>" $("#mycontent").append(content).fadeIn(999); Unfortunately, the desired effect is not achieved with this code. I am trying to create a sleek animation when adding new content. ...

javascriptjqueryhtmlcss

What are the steps for integrating mongoDB with an angular2 application?

I currently have my angular2 & mongoDB setup successfully. While I've managed to read JSON files using the HTTP service, my goal is to create a fully functional application with database connectivity as well. I'm seeking advice on how to con ...

javascriptmongodbtypescriptangular

Steps to update the first set of x documents in MongoDB using Mongoose

Is there an efficient way to update the first five documents in mongoose? While I am familiar with updating multiple documents based on a condition, I specifically want to target the first five documents for updating in mongoose. I understand that I can a ...

javascriptnode.jsmongodbexpressmongoose

Creating dynamic routes in react-router-dom using conditions

I'm currently developing an application using react-router-dom for navigation. I've encapsulated all my <Routes> inside a container provided by Material UI. However, I want my home page to be outside of this container so that I can display ...

javascriptreactjsmaterial-uireact-router-dom

working with JSON array information

I have a JSON array retrieved from a database that I need to manipulate. Currently, it consists of 8 separate elements and I would like to condense it down to just 2 elements while nesting the rest. The current structure of my JSON looks like this: { "i ...

javascriptarraysjson

What is the best way to incorporate a Bootstrap modal for delete confirmation before proceeding with data deletion through a POST request?

As a beginner in web development, I am currently learning how to use JavaScript, Express, Node, and Mongoose. In my app, I want to display a confirmation modal using Bootstrap before deleting any data, only proceeding with the deletion when the user clicks ...

javascriptnode.jsexpressmongoosebootstrap-4

Setting up a simple configuration for WebGl and Javascript

I am currently using OSX 10.9.5 (Mavericks) and following a WebGL tutorial script provided on . I copied and pasted the code from the tutorial into TextEdit and saved it as HTML with the following file structure: webgl | +--index.html | ...

javascriptthree.js

What could be causing my jQuery code to not function properly?

I wrote a small piece of code in jQuery, but I am having trouble executing it. Can someone help me figure out what I'm doing wrong? <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> & ...

javascriptjquery

What is the recommended approach for conducting backend validation?

As I develop a CRUD application using express.js and node.js, here is the backend API code that I have written: app.post("/signup", (req, res) => { const { name, email, password } = req.body; if (!name) { res.status(401).json("Please provide a n ...

javascriptnode.jsexpressvalidation

Is there a way to redirect the user to a different page without refreshing the page during navigation?

Utilizing javascript, ajax, and jquery to dynamically load content from PHP files without refreshing the page has been a successful venture. However, I am facing a challenge in creating a hyperlink within one of the loaded contents that redirects the user ...

javascriptphpjqueryhtmlajax

Examine the state of each element within a div separately

I have a div containing elements with the class 'container'. Each of these container elements has multiple child divs with the class 'children'. I am looking to perform an action on the child divs when they become visible in the viewpor ...

javascriptjquery

Adding JSON data to an array with a click - a step-by-step guide

As I dive into working with React and integrating API JSON data into my project, I've encountered a small hurdle. I've implemented a function that allows users to enter a search query, resulting in a list of devices associated with their input be ...

javascriptarraysjsonreactjsfetch

Dragging items in the horizontal list of Knockout-Sortable causes them to be pushed vertically

For my application development using knockout.js, I am implementing knockout-sortable to create drag-and-drop sortable lists. The setup involves a vertical list with each item containing a horizontal list. While the vertical lists are functioning properly, ...

javascriptknockout.jsknockout-sortable

What is preventing my function from retrieving data from the JSON File?

Exploring the realm of JSON file manipulation, I am delving into how it functions. Equipped with a JSON file attached to my document and a function sharing the same name as my object in the JSON file. However, despite all efforts, the data is not being dis ...

javascriptjson

Loop through a nested array and output the playerId, playerName, and playerCategory for each player

update 3: After thorough debugging, I finally found the solution and it has been provided below. let values = { "sportsEntitties": [{ "sportsEntityId": 30085585, "sportsEntityName": "490349903434903490", "sportsEntityStartDate": "7878 ...

javascripthtmlarraysjsonreactjs

The use of jQuery for fetching posts via ajax can lead to a crash in the browser

I have a social media platform where I implemented jQuery on the main feed page. The jQuery is set up so that as users scroll down, the next batch of posts is fetched using ajax and added to the DOM. However, after a few ajax requests, the browser slows do ...

javascriptajaxjquery

When I try to post using the raw feature in Postman in Node.js, the post ends up empty

My API is supposed to receive data for saving in the database. However, when I call the PUT method, my req.body.nome returns empty. It works fine with form-urlencoded, but I've tried using body-parser and it's deprecated. Here is my request usin ...

javascriptnode.jsexpress

Is there a way to switch the main image by clicking on different thumbnails in a sidebar using javascript/jQuery

Currently on my page, I have a large plot created with jqplot along with a sidebar containing several smaller plots. I am trying to find a way to dynamically change the large plot based on which of the smaller plots the user clicks on, without needing to ...

javascriptjqueryhtml

Utilizing Google Sheets as a secure, read-only database for Angular applications without the need to make the sheet accessible to the

Seeking a way to utilize Google Sheets document as a read-only database for my Angular application, I have attempted various methods. However, the challenge with all these approaches is that they necessitate public sharing of the Sheet (accessible to anyon ...

javascriptangulartypescriptgoogle-sheetsspreadsheet

How to dynamically add an input textbox after a selection change in YUI JavaScript?

Is there a way to add an extra input textbox after an onchange event in a selectbox using the YUI library? I need to utilize YUI and the form is generated with PEAR Quickforms lib. This is what I have so far: $form->addElement('select', &ap ...

phpjavascriptyuiquickform