Graphql-playground: Error with local self-signed SSL cert

[tuurbo]

I use a self-signed SSL cert for local development. I get the stacktrace below when I try to "reload schema".

graphql-playground v1.0.1
windows 10

Stacktrace:

FetchError {name: "FetchError", message: "request to https://example.dev/gra…d, reason: unable to verify the first certificate", type: "system", errno: "UNABLE_TO_VERIFY_LEAF_SIGNATURE", code: "UNABLE_TO_VERIFY_LEAF_SIGNATURE"…}
code: "UNABLE_TO_VERIFY_LEAF_SIGNATURE"
errno: "UNABLE_TO_VERIFY_LEAF_SIGNATURE"
message: "request to https://example.dev/graphql failed, reason: unable to verify the first certificate"
name: "FetchError"
type: "system"
stack: "Error  at ClientRequest.<anonymous> (file:///C:/Program%20Files/GraphQL%20Playground/resources/app.asar/lib/dist/app.6aea2e21fde28362200b.js:79681:11)     at emitOne (events.js:96:13)     at ClientRequest.emit (events.js:191:7)     at TLSSocket.socketErrorListener (_http_client.js:358:9)     at emitOne (events.js:96:13)     at TLSSocket.emit (events.js:191:7)     at emitErrorNT (net.js:1283:8)     at _combinedTickCallback (internal/process/next_tick.js:80:11)     at process._tickCallback (internal/process/next_tick.js:104:9)"
__proto__: Error
_tickCallback   @   internal/process/next_tick.js:109

[timsuchanek]

Thanks for reporting. Are you running the electron app?

[kbrandwijk]

process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0'; should do the trick. Maybe combined with a setting or command-line param for electron/embedded?

[tuurbo]

I installed "playground-setup-1.0.1.exe"

[tuurbo]

Any update on this?

[tuurbo]

With version 1.3.7 (playground-setup-1.3.7.exe) I can now get the schema to load properly with a local self-signed HTTPS endpoint, but when I try to run a query, I get error:

    at ClientRequest.<anonymous> (file:///C:/Program%20Files/GraphQL%20Playground/resources/app.asar/lib/dist/app.301ae362b449ed1672d8.js:116922:11)
    at emitOne (events.js:96:13)
    at ClientRequest.emit (events.js:191:7)
    at TLSSocket.socketErrorListener (_http_client.js:358:9)
    at emitOne (events.js:96:13)
    at TLSSocket.emit (events.js:191:7)
    at emitErrorNT (net.js:1283:8)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)

[timsuchanek]

Did you already try what @kbrandwijk suggested?

[tuurbo]

@timsuchanek I've made a few attempts over the past few months but don't have the knowledge on how to implement the fix. On top of that I was getting build errors, so I gave up.

Whats weird is as of 1.4.0 the schema loads fine from the HTTPS address, but a query doesn't.

FetchError: request to https://example.loc/graphql failed, reason: unable to verify the first certificate
    at ClientRequest.<anonymous> (file:///C:/Program%20Files/GraphQL%20Playground/resources/app.asar/lib/dist/app.be5dd9b279bce2957ed1.js:74809:11)
    at emitOne (events.js:115:13)
    at ClientRequest.emit (events.js:210:7)
    at TLSSocket.socketErrorListener (_http_client.js:401:9)
    at emitOne (events.js:115:13)
    at TLSSocket.emit (events.js:210:7)
    at emitErrorNT (internal/streams/destroy.js:64:8)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

[timsuchanek]

Thanks, that is indeed a good hint! Anyone interested in fixing this could look into the implementation differences of the SchemaFetcher and the Playground component, what they're doing differently, why it's working for the SchemaFetcher and not the Playground

[himerus]

I'm seeing similar oddities on 1.6.0.

I've got proxy docker containers running and if I go to the URL(s) manually, I get the warning to accept the 'unsecure' self signed cert, then I'm redirected to the schema as I'd expect, but getting this working in my .graphqlconfig.yml file isn't working. I've got containers for my custom API, Prisma, as well as the proxy for each to allow https access.

projects:
  mock-api:
    schemaPath: ./schema/schema.graphql
    extensions:
      endpoints:
        http: http://mock-api.project.vm:8898
        proxy: https://mock-proxy.project.vm
  prisma:
    schemaPath: ./schema/generated/prisma.graphql
    extensions:
      endpoints:
        http: http://prisma.project.vm:6699
        proxy: https://prisma-proxy.project.vm

Again, note the proxy URLs DO work if I visit them manually in the browser, and accept the certificate(s).

[timsayshey]

I tried what @kbrandwijk suggested and added:
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'
to:
/packages/graphql-playground-electron/src/renderer/index.tsx

I then built a new release of the project and tested it. I am still getting the error from my graphql endpoint with a self signed certificate:

Can you provide clearer instructions for bypassing ERR_INSECURE_RESPONSE?

[sebastienbarre]

@timsayshey suggested in #1064 to use /Applications/GraphQL\ Playground.app/Contents/MacOS/GraphQL\ Playground --ignore-certificate-errors &> /dev/null & for example, but it would be great if it was configurable somewhere in the Settings...

[lauritowal]

Any idea how to get this work on Linux / Ubuntu?' @sebastienbarre @timsayshey ?
And where and how would I need to add this process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0' using the Desktop app?

[boomdizz]

@lauritowal Delayed response here, but maybe it will help someone else. On Ubuntu 18.04.5, 'Graphql Playground' is installed under /opt. So from your terminal window, you can launch the application with the --ignore-certificate-errors flag as mentioned by @timsayshey:

xxxx-HP-EliteBook-840-G3:/opt/GraphQL Playground$ ./graphql-playground-electron --ignore-certificate-errors &> /dev/null &
[1] 27919

It launches fine and works with self-signed certificates thereafter. Should work on other linux variants as well. If not installed under /opt, try searching for it's install location:

xxxx-HP-EliteBook-840-G3:~$ find / -name "*Playground" 2> /dev/null