How to bypass TLS / HTTPS / SSL requirements when talking with external APIs in Remix app during local development ?

[cliffordfajardo]

While integrating remix into our stack at work, I ran into challenges with HTTPS/ SSL certs during local development.

FetchError: request to https://example.com:9167/api/v1/ failed, reason: unable to verify the first certificate

TLS Workaround -- Application Wide Setting

I don't claim that this is the best solution, but its a good way to get unblocked to continue building during development.
You can pass the NODE_TLS_REJECT_UNAUTHORIZED environment variable into your node app during development like this:

// Package.json
"scripts": {
    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 remix dev",
},

or

// entry.server.ts
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'

TLS Workaround -- Per HTTP/S Call

Unlike the fetch and Request API that exists in the browser in browser, which have no concept of being able to pass in an HTTP agent, @remix-run/node's fetch & Request do allow you to pass an agent and other options that are specific to the nodejs runtime only. Essentially fetch & Request in NodeJS/server runtimes will expose additional options you can pass to them (implementation code of fetch & Request from @remix-run/node)

If you see the code example below, we're passing an agent to our fetch' & Request options object.

import { fetch, Request, json, LoaderArgs } from '@remix-run/node';
import https from 'https'; // OR import 'http' if your remix server is running on http

export async function loader({ params }:LoaderArgs) {
    // Example 1
    const response1 = await fetch('example-api.com/people',{
        agent: new https.Agent({ rejectUnauthorized: true, requestCert: false})
    })
    const data1 = await response1.json();


    // Example 2
    const response2 = new Request('example-api.com/people', {
        agent: new https.Agent({ rejectUnauthorized: true, requestCert: false})
    })
    const data2 = await response2.json();


    return json({});
  }

Related

• Expose agent property of node-fetch #3530
• How to proxy `fetch` or `Request` HTTP/s calls in my Remix app on the server side? #4282
• implementation code of fetch from @remix-run/node

[sergiodxa]

The Remix App Server doesn't support using https, you would have to switch to a custom Express server and then configure SSL on the Express server.

Another option is to run a reverse proxy like NGINX before your Remix app and configure SSL there.

[cliffordfajardo]

you're totally right - going to edit original posting & rephrase title of post - thanks 🙏

[insectula]

so here comes my question: say I proxy the https://localhost:443 to http://localhost:3000 using Nginx. Remix, though, thinks that requests are sent to http://localhost. Will the connection and data be secure in such case?

[aplr]

@cliffordfajardo I'm also running into this, and I've tried it with both NODE_TLS_REJECT_UNAUTHORIZED and NODE_EXTRA_CA_CERTS, however node is not picking it up at all. Usually it gives a warning about this flag also, which is not shown either. I set it with export, in front of the run script and also in the entry.server.ts but still the error.

Did you do sth special / which adapter are you using? I'm not using any adapter but the integrated app server.

This is the error: (It's different as I'm using a bundle.crt including the custom root CA cert)

FetchError: request to https://strapi.local/graphql failed, reason: self-signed certificate in certificate chain
    at NodeClientRequest.<anonymous> (remix-app/node_modules/node-fetch/lib/index.js:1491:11)
    at NodeClientRequest.emit (node:events:532:35)
    at NodeClientRequest.emit (remix-app/node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/NodeClientRequest.ts:299:22)
    at TLSSocket.socketErrorListener (node:_http_client:442:9)
    at TLSSocket.emit (node:events:520:28)
    at emitErrorNT (node:internal/streams/destroy:164:8)
    at emitErrorCloseNT (node:internal/streams/destroy:129:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

[cliffordfajardo]

Did you do sth special / which adapter are you using? I'm not using any adapter but the integrated app server.

Im using the Remix App server template
This is what my start and dev script look like in the package.json

"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 remix dev",
"start": "NODE_TLS_REJECT_UNAUTHORIZED=0 remix-serve build"

This is the error: (It's different as I'm using a bundle.crt including the custom root CA cert)

I'm not using bundle.crt. Are you using the fetch global or are you using node-fetch npm package?

If you're using node-fetch or axios, you can pass an https agent, which might be able to get you unblocked

// https://stackoverflow.com/questions/60061143/using-rejectunauthorized-with-node-fetch-in-node-js
import https from "https";
import axios from "axios";

const response = await axios.get<some_interface>(`someUrl.com`,
    {
      headers: {
        Authorization: auth,
        "Content-type": "application/json",
        "X-API-Key": accessTokens.accessToken || "",
        // Username: "cfajardo",
        Username: "svc-sdi-infra-fe",
        // Username: "kreber",
      },
      httpsAgent: new https.Agent({ rejectUnauthorized: false }), // <----------
    }

axios and node-fetch allow you to pass an HTTP agent, event certs like this:

// https://stackoverflow.com/questions/51363855/how-to-configure-axios-to-use-ssl-certificate

let cert_file = fs.readFileSync("./ssl/my_self_signed_certificate.crt")
let ca_file = fs.readFileSync("./ssl/my_self_signed_certificate_ca.crt")
const agent = new https.Agent({
    requestCert: true,
    rejectUnauthorized: true,
    cert: cert_file,
    ca: ca_file,
    //.... more options here
});
// then you can pass the agent to axios or node fetch




// https://stackoverflow.com/a/57016233/2971795
const httpsAgent = new https.Agent({
  ca: fs.readFileSync("./resource/bundle.crt"),        
  cert: fs.readFileSync("./resrouce/thirdparty.crt"),
  key: fs.readFileSync("./resource/key.pem"), 
})

Let me know if you find an answer -- would be great to keep this thread updated so we can document more ways to handle these scenarios 😄

[aplr]

I'm using graphql-request, which internally uses node-fetch. So yes, this is exactly how I unblocked myself for now:

import { GraphQLClient } from 'graphql-request'

const options = (dev => ({
    agent: dev ? new https.Agent({ rejectUnauthorized: false }) : undefined
}))(process.env.NODE_ENV === "development")

const client = new GraphQLClient(endpoint, options)

However, adding an env var would be more concise, but it's ok for now.
Also, it feels quite hacky, as the agent parameter is not included in the typings of GraphQLClient's options.

Thanks for your quick help, and yes let's keep updated!

[cliffordfajardo]

@aplr - are you using the Remix App server or express template?

Sergio & many other have mentioned how Remix App server doesn't support HTTPS (higher up in the thread ↑)
If so, have were you able to deploy your Remix App server to production with HTTPS? Curious if you had done that, as I'm currently implementing HTTPs right now

[aplr]

Sorry maybe we're not talking about the same thing. What I want to do is making requests to other services which run with a self-signed cert. Node won't let you do that OOB without the env vars or the agent set.

I just realized that you want to deploy your remix app so it is reachable over https as well. I did not and won't try that, as I'll run it behind an nginx reverse proxy anyways. So I guess either set up nginx, or use express as sergio already mentioned.

[cliffordfajardo]

yeah i went off track a bit, was curious
thanks for your sharing your situation

[cliffordfajardo]

Edited original post ↑,
There is a new section called TLS Workaround -- Per HTTP/S Call. It shows examples of how to disable TLS on a per HTTP call basis using fetch or Request import from @remix-run/node

Essentially no need to use axios in a Remix app anymore to be able to pass an HTTP/S agent since fetch from @remix-run/node is essentially similar to the node-fetch API allowing you to pass extra options to your fetch or Response config object