net::ERR_CERT_COMMON_NAME_INVALID with IP Address

[Nithanaroy]

Hi Daksh,

Thanks for sharing this resource!

How can I make this work with my local IP address, 192.168.0.5 instead of localhost?

I updated server.csr.cnf to

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = 192.168.0.5

and v3.ext to

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = 192.168.0.5

but Chrome throws GET https://192.168.0.5:5000/socket.io/?EIO=3&transport=polling&t=NDh899k net::ERR_CERT_COMMON_NAME_INVALID

Any help on what I'm missing here :)

[dakshshah96]

How can I make this work with my local IP address, 192.168.0.5 instead of localhost?

In what type of application are you trying to make this work? Is it a Node.js server or a web app using Vue/React or something else?

Please share a screenshot or the code for the file where you're including the certificate as well.

[Nithanaroy]

In a Python Flask server.

from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")

if __name__ == '__main__':
    cwd = Path(__file__).resolve().parent.as_posix()
    socketio.run(app, host="0.0.0.0", ssl_context=(f'{cwd}/certs/trusted-openssl/server.crt', f'{cwd}/certs/trusted-openssl/server.key'))

[dakshshah96]

Sorry, I'm not at all familiar with Python or Flask because of which I'm unable to determine whether this is caused by the certificate or the application.

I'll keep this issue open in case anyone else wants to help!

[Nithanaroy]

Thanks @dakshshah96 . I created a node.js server and tried to access the site with my ip address and didn't find the green lock in address bar like yours in README. Do you see any problems with cert generation or application below?

var path = require('path')
var fs = require('fs')
var express = require('express')
var https = require('https')

var certOptions = {
    key: fs.readFileSync(path.resolve('server.key')),
    cert: fs.readFileSync(path.resolve('server.crt'))
}

var app = express()

app.get('/', (req, res) => res.send('Hello World!'))

var server = https.createServer(certOptions, app).listen(443)

[nbilyk]

Instead of:

[alt_names]
DNS.1 = 192.168.0.5

Could you try:

[alt_names]
IP.1 = 192.168.0.5

[ebisbe]

In what type of application are you trying to make this work? Is it a Node.js server or a web app using Vue/React or something else?

I use a Vue 2 dev server and I have the same issue

[ebisbe]

I've solve it with this suggestion https://github.com/webpack/webpack-dev-server/issues/416#issuecomment-287797086

 devServer: {
    host: 'localhost'
  },