Webpack chunk loading using HTTP instead of HTTPS

Question

I've just converted one of my React components to use lazy loading and although it builds OK, I'm getting a scrip-src CSP error because the chunk is attempting to load over HTTP instead of HTTPS which the site is running. (If I switch CSP off, I get a mixed-content error so it isn't the CSP itself that's causing the problem )

Content Security Policy: The page's settings blocked the loading of a resource at http://passport.local//app/assets/bundle/1.bundle.js ("script-src"). bootstrap:128

I'm using Webpack 4.46.0

Am I missing a setting to force it to use the same protocol as the main application?

Many Thanks. Neil

My webpack config is below

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, argv ) =>
{
    const IS_DEVELOPMENT = argv.mode === "development";
    const IS_PRODUCTION = argv.mode === "production";

    let plugins = [

        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // all options are optional
            filename: path.join('..', 'css', 'app.css'),
            //chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),

        new webpack.DefinePlugin({
            '__DEV__': JSON.stringify(true),
            '__API_HOST__': JSON.stringify('https://passport.local/'),
        }),
    ] ;

    return {
        devtool: 'source-map',
        optimization: {
            minimize: IS_PRODUCTION
        },
        entry: {
            main: [
                './_devapp/app.js',
                './_devapp/css/app.scss'
            ],
            login: [
                './_devapp/login.js',
            ]
        },
        output: {
            path: path.resolve(__dirname, 'assets', 'bundle'),
            filename: '[name].bundle.js'
        },
        resolve: {
            extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
            alias: {
                ui: path.resolve(__dirname, '_devapp/ui/'),
                root: path.resolve(__dirname, '_devapp/')
            }
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx|tsx|ts)$/,
                    exclude: path.resolve(__dirname, 'node_modules'),
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                '@babel/preset-react',
                                '@babel/preset-typescript'
                            ],
                            plugins: [
                                ["@babel/plugin-proposal-decorators", {"legacy": true}],
                                '@babel/plugin-syntax-dynamic-import',
                                ['@babel/plugin-proposal-class-properties', {"loose": true}],
                                ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
                                ["@babel/plugin-proposal-private-methods", {"loose": true}]
                            ]
                        }
                    },
                },
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                // you can specify a publicPath here
                                // by default it uses publicPath in webpackOptions.output
                                publicPath: '../',
                            },
                        },
                        'css-loader',
                        'postcss-loader',
                        'sass-loader'
                    ],
                },
                {
                    test: /.(png|woff(2)?|eot|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '../css/[hash].[ext]'
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader']
                }
            ]
        },
        externals: {
            myApp: 'myApp',
        },
        plugins: plugins,
    };
}

Answer 1

I managed to resolve this. It was caused by a webpack_public_path definition buried in my code. I'd inherited this line in the react site template I used many years ago and never knew what it did... until now:

__webpack_public_path__ = `${window.STATIC_URL}/app/assets/bundle/`;

${window.STATIC_URL} is (at least on my platform) an http:// constant and overrides the https:// that the main site is running on.

Commenting out this line resolved the problem :-)