Web pack Dev Server Constructs Improper Sock JS: An Insecure Sock JS Connection May not be Initiated From a Page Loaded Over HTTPS

I’ve been struggling with this awkward issue for well over a week now and couldn’t resolve it. Any help will be highly appreciated!

I’m building a web application that uses Nginx as the proxy, React for web’s front-end, Go Lang for my backend API. The entire application is running on Docker

After I ran npm install to install some new packages and went to https://127.0.0.1:8000/ to start building the app, a blank white screen appeared and new error inside my Chrome dev tools:

sockjs.js:689 Uncaught Error: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS
at new SockJS (sockjs.js:689)
at new SockJSClient (webpack:///(:8000/webpack)-dev-server/client/clients/SockJSClient.js?:39:18)
at initSocket (webpack:///(:8000/webpack)-dev-server/client/socket.js?:20:12)
at Object.eval (webpack:///(:8000/webpack)-dev-server/client?:176:1)
at eval (webpack:///(:8000/webpack)-dev-server/client?:177:30)
at Object../node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:8081 (bundle.cf100e5b1875c7903444.js:9267)
at __webpack_require__ (bundle.cf100e5b1875c7903444.js:727)
at fn (bundle.cf100e5b1875c7903444.js:101)
at eval (webpack:///multi_(:8000/webpack)-dev-server/client?:1:1)
at Object.0 (bundle.cf100e5b1875c7903444.js:10880)

At this point, I was told to add https: true to my webpack.config.js as follows:

devServer: {
  contentBase: buildPath,
  inline: false,
  watchContentBase: true,
  compress: true,
  historyApiFallback: true, // any routes will fetch bundle.js file
  disableHostCheck: true, // for nginx proxy
  port: 8081,
  https: true,
},

Then I rebuilt my Docker with the following command docker-compose -f development.docker-compose.yml up --build

and tried to access https://127.0.0.1:8000/ whether it solved my issue. Unfortunately, after the successful Docker-compose built, I’m getting 404 Not Found from Nginx.

After little digging inside Nginx container, I found the following log:

My dev partner tried the following solutions found here Docker Networking – nginx: [emerg] host not found in upstream but none of them solved the problem.

Below you can look into my relevant config files:

webpack.config.js

 module.exports = () => {
    return {
        context: contextPath,
        entry: {
            main: ["@babel/polyfill", "webpack/hot/dev-server", indexJsPath],
        },
        output: {
            // TODO: add this module for css bundle
            // https://webpack.js.org/plugins/mini-css-extract-plugin/
            // https://medium.com/@tomaskoutsky/hey-webpack-can-you-bust-my-cache-21350f951220
            //   filename: "[name].[hash].js",
            filename: "bundle.[hash].js",
            publicPath: "/", // very important otherwise index.html has src="bundle.js" instead of src="/bundle.js" => nginx wont be able to find it in sub paths
            path: buildPath,
        },
        devServer: {
            contentBase: buildPath,
            inline: true,
            watchContentBase: true,
            compress: true,
            historyApiFallback: true, // any routes will fetch bundle.js file
            disableHostCheck: true, // for nginx proxy
            port: 8081,
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    loader: "babel-loader",
                },
                {
                    test: /\.css$/,
                    exclude: [/src/],
                    use: [
                        require.resolve("style-loader"),
                        {
                            loader: require.resolve("css-loader"),
                            options: {
                                importLoaders: 1,
                            },
                        },
                    ],
                },
                {
                    test: /\.css$/,
                    exclude: [/node_modules/],
                    use: [
                        { loader: "style-loader" },
                        {
                            loader: "css-loader",
                            options: {
                                modules: true,
                                url: true,
                                localIdentName: "[local]___[hash:base64:5]", // it has to be same as `generateScopedName` in .babelrc react-css-module config setting !!
                            },
                        },
                        { loader: "postcss-loader" },
                    ],
                },
                {
                    test: /\.(png|jpg|gif|jpeg|svg)$/,
                    use: [
                        {
                            loader: "url-loader",
                            options: {
                                limit: 1000,
                                outputPath: "images",
                                name: "[name]-[hash:6].[ext]",
                            },
                        },
                        {
                            loader: "image-webpack-loader",
                            options: {
                                disable: true, // in dev..
                            },
                        },
                    ],
                },
                {
                    test: /\.(woff|woff2|eot|ttf)$/,
                    loader: "url-loader",
                },
            ],
        },
        plugins: [HTMLWebpackPluginConfig, dotEnvPlugin],
        resolve: {
            extensions: [".js", ".jsx", ".json", ".css"],
        },
    };
};

dev/dev.conf

upstream goapi {
    server goapi:3000;
}

server {
    listen       80;
    server_name  localhost;

    location / {
        proxy_pass http://webpackdevserver:8081;
    }

    location /api {
        # proxy to golang API
        proxy_pass http://goapi;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        # root   /usr/share/nginx/html;
    }
}

dev/conf.d/dev.conf

upstream goapi {
    server goapi:3000;
}

server {
    # http
    listen 80;
    # server_name  _;
    server_name  localhost;
    location / {
        # redirect any requests to the same URL but on https
        return 301 https://$host$request_uri:8000;
    }
# https://serverfault.com/questions/10854/nginx-https-serving-with-same-config-as-http
#http://nginx.org/en/docs/http/configuring_https_servers.html#single_http_https_server
}

server {
    # https
    listen 443 ssl;
    # server_name  _;
    server_name  localhost;

    # location of the self-signed SSL certificate
    ssl_certificate /usr/share/ssl_certs/cert.pem;
    ssl_certificate_key /usr/share/ssl_certs/key.pem;


    location / {
        proxy_pass http://webpackdevserver:8081;
    }

    location /api {
        # proxy to golang API
        proxy_pass http://goapi;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        # root   /usr/share/nginx/html;
    }
}

dev/nginx.conf

user  nginx;
worker_processes  2;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

Any help will be greatly appreciated

This Post Has One Comment

  1. No Fault

    There appear to be a few issues with your configuration-

    Are you intending to connect to your application via HTTPS? If so, it doesn’t look like you have Nginx configured for HTTPS – i.e., no certificates, etc. For a good summary on how to do this, check the Nginx docs
    You’re attempting to connect to your application via port 8000, but Nginx isn’t set up to listen on that port. You only have it listening on port 80.
    Try resolving these first, then update us with the results.

Leave a Reply