Webpacker: Page requested an insecure script

[bigtunacan]

I created just a basic app to test using webpacker with Vue and added the entry <%= javascript_pack_tag 'hello_vue' %> to the application layout file.

My view loads, but the request for the Vue pack is blocked with the following error message.

Content:

The page at 'https:/myproj-bigtunacan.c9users.io/wat/home' was loaded over HTTPS, but requested an insecure script 'http://localhost:8080/packs/hello_vue.js'. This request has been blocked; the content must be served over HTTPS.

[gauravtiwari]

@bigtunacan Just setup https option in webpack/development.server.js - https://webpack.js.org/configuration/dev-server/#devserver-https

[bigtunacan]

@gauravtiwari This is maybe just due to my unfamiliarity with Webpack, but I'm still getting the same error.

This is what my development.server.js file now looks like.

// Note: You must restart bin/webpack-dev-server for changes to take effect

const { resolve } = require('path')
const merge = require('webpack-merge')
const devConfig = require('./development.js')
const { devServer, publicPath, paths } = require('./configuration.js')

module.exports = merge(devConfig, {
  devServer: {
    host: devServer.host,
    port: devServer.port,
    compress: true,
    historyApiFallback: true,
    contentBase: resolve(paths.output, paths.entry),
    publicPath,
    https: true
  }
})

I reran rake webpacker:compile and restarted my Rails server, but no change.

I notice at the top of the development.server.js file it says you need to restart bin/webpack-dev-server, but I don't see how to even do that?

[gauravtiwari]

Oh yes, my bad the protocol is hard-coded so that needs to be fixed. Will make a PR

[martyphee]

I changed this line in configuration.js to get moving
const devServerUrl =https://${devServer.host}:${devServer.port}/${paths.entry}/``

In order for this to work I had to try opening the file through the browser and accept the security alert. Is there a better way?

[gauravtiwari]

@martyphee Is origin also running on https? Also, you would need to assign a self signed certificate - https://github.com/gagle/node-ssl-self-signed-certificate

[gauravtiwari]

I think dev-server should take care of this, but not sure how it works for the browser - https://webpack.js.org/configuration/dev-server/#devserver-https

[martyphee]

I'm using puma-dev and it adds a CA cert. Not sure if mine is properly setup. I still get warnings.

My setup is subdomain.domain.dev which puma-dev routes locally to port 3000.

I can try pointing devserver to the same certs and see if it works.

[martyphee]

So for my situation I did this.

Changed the configuration to drop the port number

const devServerUrl = https://${devServer.host}/${paths.entry}/

Updated the server to point to a puma-dev configuration which has 127.0.0.1:8080 set.

default: &default
  enabled: true
  host: webpacker.net.dev

Seems to be working fine for my configuration. Chrome likes it.

[gauravtiwari]

Great thanks for sharing @martyphee 👍

[bigtunacan]

@martyphee Thanks; this worked for me as well.

@gauravtiwari I do think it feels a bit awkward how for webpack we have 2 different config files though. Some things are in development.server.js others in development.server.yml. It feels like it would be easier if everything were just in development.server.js. I find this especially non-intuitive since there are not corresponding production & test yml config files.