Nuxt.js: SSL Redirection via Heroku

[natecox]

I'm currently at a loss for the best practice in getting forced SSL redirection with Nuxt deployed to Heroku.

Is there a guide somewhere for this that I simply haven't been able to find?

_{This feature request is available on Nuxt.js community (#c940)}

[pi0]

Hey. Can you try this: https://github.com/nuxt/hackernews/blob/master/middleware/https.js ?

[natecox]

@pi0 Thanks for the reference. Unfortunately, redirect only allows for relative redirection, not absolute. When I try to use the linked snippet as middleware, I end up with a recursive loop that provides a url such as:

http://testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/https:/testapp.herokuapp.com/

[pi0]

@natecox I'm not a Heroku app user but they may have Edge SSL redirects too. BTW for middleware redirection with absolute paths, we may use window.location = ... and req.setHeader('Location:') should test it if working or not :)

[ydnar]

We ran into this issue in #770 and implemented a workaround: https://github.com/nuxt/nuxt.js/issues/770#issuecomment-304126495

[natecox]

I haven't had a chance to try this code out, but I did run across it a while back. Without trying to be disrespectful to the code author, the workaround there seems really hacky; which is a side effect of redirect simply not allowing absolute URLs.

If this is the _accepted_ solution I'll just go with it, but I feel like there's an opportunity to improve from the Nuxt side.

[natecox]

For clarity, I really think that Nuxt would benefit by providing a force_ssl option to handle this automatically.

[natecox]

Sounds promising! I haven't seen serverMiddleware anywhere, is it documented?

[pi0]

@natecox Comment deleted as it is not handling client side conditions. I will share a demo for serverMiddleware usage.

[pi0]

Sorry for delay. Was doing few tests with available redirect middlewares. Just implemented redirect-ssl which seems being compatible with heroku too. (Full supporting x-forwarded-proto). In order to register middleware you can install redirect-ssl package and adding this to nuxt.config.js: (needs nuxt 1.x)

module.exports = {
   serverMiddleware: [ 'redirect-ssl' ],
}

Please let me know if it's working with heroku. And if was not succeed don't worry as middleware system is improved a lot with next release also we may provide an easier module for SSL redirects too.

[natecox]

@pi0 This seems to work fine, ssl redirection on the server is working without an issue.

I would absolutely be in favor of baking this functionality into Nuxt with a toggle flag.

[pi0]

Happy hearing it's working. Unfortunately while many would benefit from such functionalities we cannot add everything to Nuxt core as it may get out of control soon (https serve is not in the core too) However instead we introduce a modular system which modules can be added in a on liner manner to enhance projects.

[PiusNyakoojo]

@pi0 redirect-ssl isn't working for us.

We have installed the package:

npm install -S redirect-ssl

Placed it in nuxt.config.js:

module.exports = {
   build: {},
   // ...
   serverMiddleware: ['redirect-ssl']
}

Started the server:

npm run build && npm run start

And finally, tunneled it through ngrok:

ngrok http 3000

When we visit the ngrok url http://ourapp.ngrok.io we expect to be redirected to https://ourapp.ngrok.io. Instead, we remain on the http site.

Thank you for your help!

[pi0]

@PiusNyakoojo I'll check ngrok soon.

[PiusNyakoojo]

Thanks pi!

[pi0]

@PiusNyakoojo Just update redirect-ssl to 1.1.0 and it will work!

[PiusNyakoojo]

Haha, incredible. Thanks pi!

[PiusNyakoojo]

Hey @pi0, one last thing:

How do you disable redirect-ssl for localhost development? 😄

[pi0]

Haha that was the reason i planned writing a nuxt module for easier usage. Currently you may conditionally disable that line using process.env or commenting out by hand 😂 Will provider module in few days.

[zzhjerry]

@PiusNyakoojo with [email protected], it's forced to only redirect in production (a.k.a. when process.env.NODE_ENV === 'production'

[wasinr]

@pi0 it's work! Thank you for your work

[bcmdevteam]

Hello,

When i put redirect-ssl in our nuxt.config.js and try to load my page, it says redirected you too many times.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.