Code is viewable in production

[masudhossain]

I recently upgraded from webpacker and now my code is viewable in production when a user inspects it using chrome dev tools under Sources tab.

Expected behavior:

All code should be unreadable when a user inspects it using the inspect tool on chrome.

Actual behavior:

Actual code is 100% viewable.

Setup environment:

• Ruby version:
• Rails version:
• Shakapacker version:

[tomdracz]

Can you elaborate on what you mean by code being viewable in production? It's client side code shipped to the browser so it's going to be viewable.

Do you mean it's not obfuscated? In this case, I presume your previous Webpacker config skipped source maps generation. Source maps enabled by default have been a thing for Webpacker/Shakapacker for quite a while (ref rails/webpacker#1918)

In production by default code is minified by source maps are provided for ease of debugging. If you wish to skip their generation, see below on amending default webpack configuration
https://github.com/shakacode/shakapacker/blob/main/README.md#webpack-configuration
and set devtool option to false, ref

shakapacker/package/environments/production.js

Line 48 in 2aa5a8e

devtool: 'source-map',

In general, this isn't a bug and I think fairly reasonable default given the discussion rails/webpacker#769 (comment)

[masudhossain]

Can you elaborate on what you mean by code being viewable in production? It's client side code shipped to the browser so it's going to be viewable.

Do you mean it's not obfuscated? In this case, I presume your previous Webpacker config skipped source maps generation. Source maps enabled by default have been a thing for Webpacker/Shakapacker for quite a while (ref rails/webpacker#1918)

In production by default code is minified by source maps are provided for ease of debugging. If you wish to skip their generation, see below on amending default webpack configuration https://github.com/shakacode/shakapacker/blob/main/README.md#webpack-configuration and set devtool option to false, ref

shakapacker/package/environments/production.js

Line 48 in 2aa5a8e

devtool: 'source-map',

In general, this isn't a bug and I think fairly reasonable default given the discussion rails/webpacker#769 (comment)

So what i mean is that my code is visible and readable under sources.

And yes, I want to obfuscated it so code is completely unreadable. I feel having it be readable is a big security risk.

Sorry, I don't see where in that link it shows how to enable obfuscated code.

Also, I used shakacode/react_on_rails to migrate from webpacker to shakapacker, so i do not have a devtool: 'source-map' in production.js file.

But i do have this below. Which i'm guessing i should change eval to none?
https://github.com/shakacode/react_on_rails/blob/07b2b7c7403c0d5852b0c5d9679d5e9bf2b0f609/spec/dummy/config/webpack/serverWebpackConfig.js#L105

[tomdracz]

Ah yes, that looks like source maps being enabled.

Linked readme shows how to customize the webpack config so you will need to adapt it to your own use-case. In your case it could be something like below:

const { generateWebpackConfig } = require('shakapacker')

const options = {
  devtool: false
}

module.exports = generateWebpackConfig(options);

I'm not sure about the server config file but similar should apply so if you have line like that you would change it to serverWebpackConfig.devtool = false

Regarding the security risk - I think that one is up for debate, lots of arguments on that have happened over the years. Ultimately the obfuscation only gets you so far.

I do believe though that source maps enabled are a sensible default and would rather retain them. The behaviour here is not a bug but maybe needs to be spelled out bit better. Thoughts @Judahmeek @justin808 @G-Rath ?

[G-Rath]

Yeah this isn't a bug or a security issue - you should assume that anything client side is public; note too that neither webpacker or shakapacker provide obfuscation, they provide minification which has a side effect of making it harder to read code but it's very different from obfuscation whichll typically give a bigger output due to using long form string concats etc.

I'm not at my laptop right now but also pretty sure devtools even has a message at the bottom about it using sourcemaps.

I don't think that any particular documentation changes are needed since this is using standard webpack config 🤷‍♂️

[tomdracz]

Closing as per discussion above

[masudhossain]

Ah yes, that looks like source maps being enabled.

Linked readme shows how to customize the webpack config so you will need to adapt it to your own use-case. In your case it could be something like below:

const { generateWebpackConfig } = require('shakapacker')

const options = {
  devtool: false
}

module.exports = generateWebpackConfig(options);

I'm not sure about the server config file but similar should apply so if you have line like that you would change it to serverWebpackConfig.devtool = false

Regarding the security risk - I think that one is up for debate, lots of arguments on that have happened over the years. Ultimately the obfuscation only gets you so far.

I do believe though that source maps enabled are a sensible default and would rather retain them. The behaviour here is not a bug but maybe needs to be spelled out bit better. Thoughts @Judahmeek @justin808 @G-Rath ?

So it seems like doing serverWebpackConfig.devtool = false didn't enable obfuscation

[G-Rath]

Shakapacker does not provide obfuscation - if you want that, you'll need to configure it yourself via a custom webpack config

[masudhossain]

Shakapacker does not provide obfuscation - if you want that, you'll need to configure it yourself via a custom webpack config

Is there any doc or guide to do this that I can humbly ask for

[G-Rath]

This section of the readme explains how to customize your webpack config - from there, you'll want to look into something like webpack-obfuscator

[Talha345]

The following code works for me:

config/webpack/production.js

// The source code including full typescript support is available at: 
// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/production.js

const webpackConfig = require('./webpackConfig');
const webpack = require("webpack");

const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
    // place any code here that is for production only

    // prevent source code from being visible in client's browser
    _clientWebpackConfig.devtool = 'nosources-source-map';
};

module.exports = webpackConfig(productionEnvOnly);

You can check all the available possible options at https://webpack.js.org/configuration/devtool/#production