Skip to content

Conversation

@dsilvers
Copy link

@dsilvers dsilvers commented Jan 4, 2023

Hi! Thanks for the work on this library and the continued maintenance.

The wss and ws protocol detection in the graphiql template doesn't seem to work all the time.

Some browsers use a trailing : in location.protocol.

https://developer.mozilla.org/en-US/docs/Web/API/Location/protocol

The protocol property of the Location interface is a string representing the protocol scheme of the URL, including the final ':'.

Here's what happens in Chrome v108:

client.js:709

 Mixed Content: The page at 'https://<hostname>/graphql' was loaded over HTTPS, but attempted to connect 
 to the insecure WebSocket endpoint 'ws://<hostname>/graphql/'. This request has been blocked; this 
 endpoint must be available over WSS.

SubscriptionClient.connect @ client.js:709
SubscriptionClient @ client.js:340
(anonymous) @ graphql:53

client.js:709 Uncaught DOMException: 
  Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page 
  loaded over HTTPS.

    at SubscriptionClient.connect (https://cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/browser/client.js:709:23)
    at new SubscriptionClient (https://cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/browser/client.js:340:18)
    at https://<hostname>/graphql:53:29


> location.protocol
'https:'

> location.protocol === "https"
false

> location.protocol.startsWith("https")
true

@dsilvers dsilvers changed the title Fix https detection in graphiql example Fix https detection in graphiql template Jan 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant