Code Monkey home page Code Monkey logo

webpack-delete-sourcemaps-plugin's Introduction

webpack-delete-sourcemaps-plugin

Webpack plugin to delete sourcemaps at the end of a build. Useful for deleting sourcemaps after uploading them to sentry for example so they don't end up on your production server.

Why is having sourcemaps exposed bad? It is a "source code disclosure" security risk, meaning it's exposing a human readable version of your code which makes it easier for an attacker to find logical flaws for example, or abuse some part of your codebase.

Compatibility

This plugin is written to be compatible with Webpack 5. It currently doesn't support previous versions of webpack.

NextJS and Sentry

I created this plugin so we can upload sourcemaps to sentry when using NextJS and then remove those sourcemaps before the deployment. So during a production build/deployment the sourcemaps are correctly uploaded to sentry but not exposed in the live app.

How to use

npm install webpack-delete-sourcemaps-plugin --save-dev
const { DeleteSourceMapsPlugin } = require('webpack-delete-sourcemaps-plugin');

module.exports = {
  devtool: 'hidden-source-map', // optional, see the #hidden-source-map section for more info
  // ...
  plugins: [
    new DeleteSourceMapsPlugin()
  ]
}

How to use with NextJS

To use with NextJS and sentry, add this piece to your next.config.js configuration:

const { DeleteSourceMapsPlugin } = require('webpack-delete-sourcemaps-plugin');

{
  // ...
  webpack: (config, { isServer }) => {
    config.plugins.push(new DeleteSourceMapsPlugin({ isServer, keepServerSourcemaps: true }))
    return config
  }
}

hidden-source-map

By generating the sourcemaps and then removing them, it will keep the sourcemap reference in the .js even if it's removed, which can cause the browser to call those and generate 404. To avoid this, we can set the devtool value to hidden-source-map

For nextjs config using withSentryConfig, we can't set the devtool value to hidden-source-map as it's overriden by the sentry config wrapper, this plugin will take care of overriding the devtool value to set it it hidden-source-map for the client build (and will set it to false for the server build)

more info: https://webpack.js.org/configuration/devtool/#production based on that thread: getsentry/sentry-webpack-plugin#56 sentry issue with implemented solution: getsentry/sentry-javascript#3549 (comment)

webpack-delete-sourcemaps-plugin's People

Contributors

alexbeauchemin avatar jlafosse avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

jlafosse

webpack-delete-sourcemaps-plugin's Issues

Webpack 4 support

Hi Alex,
We've just deployed your plugin to our server and it seems to be working fine with webpack 4.

We use Vue CLI with [email protected] under the hood.

Could you please adjust README so others can try that as well, and update your package.json so we don't have to download entire webpack@5 when we don't need it?

E.g.:

  "optionalDependencies": {
-    "webpack": "^5.63.0"
+    "webpack": "4.x || 5.x"   
  }

Thanks!

Console logs and silent option

Thanks for writing this plugin, this should just be built-in to the @sentry/nextjs already! Can we get rid of those console.logs and perhaps add a silent option for the console.infos? I'd be willing to do a quick PR if it is helpful...

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.