How to allow access to network requests (IPs) in local dev

[nosizejosh]

I am running nuxt with the --host flag to expose network so that other devices on the same network can test the app.

nuxt-securtiy block (http://192.168.100.92:3000/login) by default but allows access to http://localhost:3000/login even on the host device.

I thought adding

security: {
    headers: {
      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp',
    },
  },

would allow access to local network but it doesn't.
Only way to get access is to disable the module.

How can I allow access to network request on local dev with IPs and not only localhost?

[vejja]

Hi @nosizejosh
Intuitively looks more like a Strict-Transport-Security restriction than an COEP issue, but I might be mistaken.
Localhost is usually an exception to https requirement, but 192.168.x.x not
Which browser are you using and what is the error message ?
Can you try

• either to disable STS in Nuxt-Security with { strictTransportSecurity: false }
• or alternatively to serve the local server with --https flag. Have a look at https://nuxt.com/docs/api/commands/dev#nuxi-dev for settings information

[nosizejosh]

@vejja
This is my full security setup

 security: {
    removeLoggers: false, // debugging https://github.com/Baroshem/nuxt-security/issues/390#issuecomment-1976497022
    headers: {
      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp', //https://github.com/Baroshem/nuxt-security/issues/101
    },
    corsHandler: {
      // options
      origin:'*' // all allowed here becuase middleware will deal with whitelisting
    }
  }

and this is the error:

[vejja]

Can you try :

 security: {
    removeLoggers: false, // debugging https://github.com/Baroshem/nuxt-security/issues/390#issuecomment-1976497022
    headers: {
      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp', //https://github.com/Baroshem/nuxt-security/issues/101
      strictTransportSecurity: false // USE ONLY IN DEV MODE TO ALLOW NON-HTTPS CONNECTIONS TO HOST OTHER THAN LOCALHOST
    },
    corsHandler: {
      // options
      origin:'*' // all allowed here becuase middleware will deal with whitelisting
    }
  }

[nosizejosh]

tried, it didn't work. same error

[vejja]

@nosizejosh I'm not able to reproduce

I can see the first 2 warnings (the one about COEP and the one about Origin-Agent-Cluster) but I can't reproduce the net::ERR_SSL_PROTOCOL_ERROR, which initially lead me to think that you were trying to connect via https somehow.

Do you know why you seem to be trying to load over https ? This can happen when you have Upgrade-Insecure-Requests with STS: the browser will automatically try to connect via https even if you require http.
Maybe you need to close/purge/cleanup your browser or try in another one?

Otherwise can you please share a repro ? I'll look at it

[nosizejosh]

I have tried all you suggested and none worked
https://www.w3.org/TR/secure-contexts/#potentially-trustworthy-origin seems to point to why "untrustworthy" but not sure why it tries to load form https.

It only works if I disable the module or use localhost which is not a big deal, except this prevents me from testing from other devices especially on mobile.

Any more thoughts on what could be the issue?

[vejja]

Yes, sorry I got confused between STS and Upgrade-Insecure-Requests (this is what forces https) :

 security: {
    removeLoggers: false, // debugging https://github.com/Baroshem/nuxt-security/issues/390#issuecomment-1976497022
    headers: {
      contentSecurityPolicy: {
        "upgrade-insecure-requests": false // USE ONLY IN DEV MODE
      }
      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp', //https://github.com/Baroshem/nuxt-security/issues/101
    },
    corsHandler: {
      // options
      origin:'*' // all allowed here becuase middleware will deal with whitelisting
    }
  }

[nosizejosh]

so this is what my setup looks now;

security: {
    removeLoggers: false, // debugging https://github.com/Baroshem/nuxt-security/issues/390#issuecomment-1976497022
    headers: {
      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp', //https://github.com/Baroshem/nuxt-security/issues/101
      strictTransportSecurity: false,
      contentSecurityPolicy: {
        "upgrade-insecure-requests": process.env.NODE_ENV === 'development' ? false : true // USE ONLY IN DEV MODE
      }
    },
    corsHandler: {
      // options
      origin:'*' // all allowed here becuase middleware will deal with whitelisting
    }
  }

added the process.env.NODE_ENV === 'development' check to make sure it runs on dev only, correct?

Though access through IP now works, there is an error and a warning

[vejja]

Hey @nosizejosh
Great to see it works now !

You can ditch { strictTransportSecurity: false }. It is better to leave it to true which is the default.

The two remaining errors should disappear in production when you deploy over https.
If you want to get rid of them in development, you'll have to serve locally over https.

[Baroshem]

Thanks @vejja for the great explanation!

I was quite busy today and couldnt join the discussion so I am glad that you managed to help. You are a rockstar!

[vejja]

Thanks @Baroshem
We might want to pin this somewhere or include in our docs for users who want to use a dev server with --host

[Baroshem]

Added in df0d711