remix-serve should redirect HTTP traffic to HTTPS

[kentcdodds]

I had to do this and it felt like something that should happen for me automagically.

[sergiodxa]

Agree, this is something the server should do, not the app

[tahabesthive]

if(process.env.SSL_FORCE_REDIRECT){
  if(req.headers['x-forwarded-proto'] !== 'https'){ 
    res.redirect('https://' + req.headers.host) 
  }
}

[cliffordfajardo]

@tahabesthive - is that something you wrote for the Remix App Server or express template?

[cliffordfajardo]

I was looking to add HTTPS support in my Remix App Server

The recommended approach would be use the Remix Express template since that exposes express directly Github discussion
At least until remix supports supports/exposes middleware functions per this discussion "Middleware before Remix processes request 2857"

Remix App Server Template

For folks using the Remix App server template, perhaps 1 approach would be to create a utility function (ex: redirectToHttps) that would take the request and handles the redirect at the top of your root loader.

Pros:

• not needing to eject out of the Remix App Server. For example I was able to setup SSO using the remix-auth-microsoft package; want to avoid

Cons:

• you'll need to add manually add redirectToHttps function in your loaders/actions manually and hopefully not forget (maybe this is temporary until [Feature]: middleware before Remix processes request #2857

// Kents code from post ^^
const upgradeToHttps = (request: Request) => {
  // upgrade people to https automatically

  let url = new URL(request.url);
  let hostname = url.hostname;
  let proto = request.headers.get("X-Forwarded-Proto") ?? url.protocol;

  url.host =
    request.headers.get("X-Forwarded-Host") ??
    request.headers.get("host") ??
    url.host;
  url.protocol = "https:";

  if (proto === "http" && hostname !== "localhost") {
    return redirect(url.toString(), {
      headers: {
        "X-Forwarded-Proto": "https",
      },
    });
  }
}

// call at root loader
export let loader: LoaderFunction = ({ request }) => {
   upgradeToHttps(request)
};