Can't run script due to SockJS SecurityError

[ghost]

Hi. I try to create a user-script for a public website with https. Every time I install the script from a URL I'm getting the following error loop:

Error: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS
    at new SockJS (sockjs.js:698)
    at new SockJSClient (SockJSClient.js:53)
    at initSocket (socket.js:30)
    at Object.eval (userscript.html?name=script.user.js&id=8eef0664-b177-4c1d-842a-864923af9a3c:24134)
    at Object../node_modules/webpack-dev-server/client/index.js?http://127.0.0.1:8080 (userscript.html?name=script.user.js&id=8eef0664-b177-4c1d-842a-864923af9a3c:24135)
    at __webpack_require__ (bootstrap:29)
    at Object.0 (userscript.html?name=script.user.js&id=8eef0664-b177-4c1d-842a-864923af9a3c:25061)
    at __webpack_require__ (bootstrap:29)
    at eval (bootstrap:83)
    at Window.tms_8eef0664_b177_4c1d_842a_864923af9a3c (index.js:1)

I know that if you develop on your own https server you add your own certs, like here Is there any way to work around that when developing user-scripts to public sites?

Here are my files: webpack.common.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
  plugins: [new CleanWebpackPlugin()],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

webpack.dev.js

const { merge } = require("webpack-merge");
const WebpackUserscript = require("webpack-userscript");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map",
  plugins: [
    new WebpackUserscript({
      headers: {
        version: "[version]-build.[buildNo]",
      }
    })
  ],
  devServer: {
    host: "127.0.0.1",
    contentBase: "./dist",
  }
});

Thank you!

[momocow]

I would rather depend on the update mechanism of script engine, e.g. Tampermonkey, than features like HMR and live reload, therefore I usually disable them via

{
  devServer: {
    hot: false,
    liveReload: false,
    inline: false,
  }
}

or

{
  devServer: {
    injectClient: false
  }
}

But it's interesting to know if HMR or live reload helps the development of userscripts.

---

According to the error message,

Error: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS

it seems that if SockJS is established via secure connection, everything will work. Have you ever tried to provide your own cert? Or is there any further error?

---

I'm also interested in this issue but cannot have a try myself until next weekend.

[momocow]

@jacadarben I find a blog which may help.

Running React with HTTPS locally on custom domain

There are 5 steps mentioned in the blog; however, after doing step 4 I managed to run my userscript connecting with webpack-dev-server.

Also I've confirmed that live reload was triggered; however after live reloading there was still legacy userscript in the TamperMonkey. To trigger TamperMonkey automatically update your userscripts, you will need to use the proxy script feature of this plugin.

https://github.com/momocow/webpack-userscript#integration-with-webpack-dev-server-and-tampermonkey

[momocow]

Feel free to reopen this issue if you require discussion about the issue or file a new one if you have further more questions.

I'll close this one since it becomes stale for more than 3 weeks.