search

RangerMauve / hyperswarm-web

Implementation of the hyperswarm API for use in web browsers
MIT License
102 stars 15 forks source link

cookie associated with a cross-site resource at http://geut-webrtc-signal.herokuapp.com/ : how to rely solely on the local signaling server? #3

Open marcoippolito opened 4 years ago

marcoippolito commented 4 years ago

In the vue file I put these lines of code:

import hyperswarm from 'hyperswarm-web';
import crypto from 'crypto';

created() {
   this.swarm = hyperswarm({
      // If you omit this, it'll try to connect to 'wss://hyperswarm.mauve.moe'
      // It will also attempt to connect to a local proxy on `ws://localhost:4977`
      wsProxy: 'ws://yourproxy.com',
      // The configuration passed to the SimplePeer constructor
      //See https://github.com/feross/simple-peer#peer--new-peeropts for more options
      simplePeer:{
        // The configuration passed to the RTCPeerConnection constructor,for more details see
        // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection
        // /RTCPeerConnection#RTCConfiguration_dictionary
        config:{
          // List of STUN and TURN setvers to connect
          // Without the connection is limited to local peers
          //iceServers:require("./ice-servers.json")
        }
      }
    })
    // look for peers listed under this topic
    const topic = crypto.createHash('sha256')
      .update('my-hyperswarm-topic')
      .digest()
    // this.swarm.join(topic)
}

When I add the previously commented line: this.swarm.join(topic), I get this, at the moment, warning message:

"A cookie associated with a cross-site resource at http://geut-webrtc-signal.herokuapp.com/ was set without the `SameSite` 
attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and
 `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at 
https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

" I'm actually executing the proxy-server as linux service:

ps xa | grep hyperswarm-web
11358 ?        Ssl    0:04 /home/marco/.nvm/versions/node/v14.3.0/bin/node /home/marco/webMatters/vueMatters
/GGC/node_modules/hyperswarm-web/NEWbin.js

nano /home/marco/webMatters/vueMatters/GGC/node_modules/hyperswarm-web/NEWbin.js : 

#!/home/marco/.nvm/versions/node/v14.3.0/bin/node

const HyperswarmServer = require('hyperswarm-proxy-ws/server')
const http = require('http')
const send = require('send')
const path = require('path')

const argv = require('minimist')(process.argv.slice(2))
const DEFAULT_PORT = 4977 // HYPR on a cellphone keypad
const INDEX_HTML_LOCATION = path.join(__dirname, 'index.html')
const server = http.createServer(function onRequest (req, res) {
  send(req, INDEX_HTML_LOCATION)
    .pipe(res)
})

const wsServer = new HyperswarmServer()
wsServer.listenOnServer(server)
const port = argv.port ? parseInt(argv.port, 10) : DEFAULT_PORT
console.log(`Listening on ws://localhost:${port}`)
server.listen(port)

vue info:

vue info

Environment Info:

  System:
    OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
  npmGlobalPackages:
    @vue/cli: 4.4.4

I'm developing my app on a local PC where I'm running an NGINX webserver. in the nginx configuration I added:

upstream websocket {
    server ggc.world:4000;
}

server {
    listen 8443 ssl;
    server_name ggc.world;

    ssl_certificate /etc/letsencrypt/live/ggc.world-0002/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ggc.world-0002/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/ggc.world/chain.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location /p2p {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade "Websocket";
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host ggc.world;
    }
}

So.. where this http://geut-webrtc-signal.herokuapp.com/ come from? How to rely solely on the local signaling server?

Looking forward to your kind help. Marco

RangerMauve commented 4 years ago

Hey Marco, thanks for the post. The Geut server is being used for the WebRTC connections. We need to use a central server for that due to the way WebRTC signaling works.

If you use just a local proxy server, you'll be able to connect to node.js peers using hyperswarm and wouldn't be able to connect to other browser peers.

If you want, though, you can configure your own signaling server using the discovery-swarm-webrtc command line. https://github.com/geut/discovery-swarm-webrtc#server

What's important is that the signalling server will need to be on the internet and will need to be accessible to to all your peers.

marcoippolito commented 4 years ago

Hi @RangerMauve !

"the signalling server will need to be on the internet and will need to be accessible to to all your peers": yes. this is the point. But how to make it working?

I stopped the systemd service I created before:

(base) marco@pc01:~$ sudo systemctl stop hyperswarm-web
[sudo] password for marco: 
(base) marco@pc01:~$ sudo systemctl status hyperswarm-web
● hyperswarm-web.service - Hyperswarm proxy server which webpages can connect to
   Loaded: loaded (/etc/systemd/system/hyperswarm-web.service; enabled; vendor p
   Active: failed (Result: exit-code) since Fri 2020-07-03 08:46:43 CEST; 10min 
  Process: 1176 ExecStart=/home/marco/webMatters/vueMatters/GGC/node_modules/hyp
  Main PID: 1176 (code=exited, status=203/EXEC)

lug 03 08:46:43 pc01 systemd[1]: hyperswarm-web.service: Service hold-off time o
lug 03 08:46:43 pc01 systemd[1]: hyperswarm-web.service: Scheduled restart job, 
lug 03 08:46:43 pc01 systemd[1]: Stopped Hyperswarm proxy server which webpages 
lug 03 08:46:43 pc01 systemd[1]: hyperswarm-web.service: Start request repeated 
lug 03 08:46:43 pc01 systemd[1]: hyperswarm-web.service: Failed with result 'exi
lug 03 08:46:43 pc01 systemd[1]: Failed to start Hyperswarm proxy server which w

I started the discovery-swarm-webrtc : 

(base) marco@pc01:~/webMatters/vueMatters/GGC/node_modules/hyperswarm-web/node_modules/.bin$ ./discovery-signal-
webrtc 
discovery-signal-webrtc running on 4000

I modified in the Hyperswarmweb.vue file the wsProxy as : 

    this.swarm = hyperswarm({
      // If you omit this, it'll try to connect to 'wss://hyperswarm.mauve.moe'
      // It will also attempt to connect to a local proxy on `ws://localhost:4977`
      //wsProxy: 'ws://yourproxy.com',
      wsProxy: 'ws://ggc.world:4000',
      // The configuration passed to the SimplePeer constructor
      //See https://github.com/feross/simple-peer#peer--new-peeropts for more options
      simplePeer:{
        // The configuration passed to the RTCPeerConnection constructor,for more details see
        // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection 
/RTCPeerConnection#RTCConfiguration_dictionary
        config:{
          // List of STUN and TURN setvers to connect
          // Without the connection is limited to local peers
          //iceServers:require("./ice-servers.json")
        }
      }
    })

    // look for peers listed under this topic
    const topic = crypto.createHash('sha256')
      .update('my-hyperswarm-topic')
      .digest()

    this.swarm.join(topic)

I get this error :

" Websocket connection to 'ws://localhost:4977/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Mixed Content: The page at 'https://ggc.world/signup' was loaded over HTTPS, but attempted to connect to the insecure
WebSocket endpoint 'ws://ggc.world:4000'. This request has been blocked; this endpoint will be available over WSS.

Uncaught DOMException: Failed to construct 'WebSocket': an insecure WebSocket connection may not be initiated from a page loaded "

image

This is the part of the nginx webserver configuration related to websocket:

upstream websocket {
    #server ggc.world:4977;
    #server ggc.world:1234;
    server ggc.world:4000;
}

server {
    listen 8443 ssl;
    server_name ggc.world;

    ssl_certificate /etc/letsencrypt/live/ggc.world-0002/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ggc.world-0002/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/ggc.world-0002/chain.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location /p2p {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade "Websocket";
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host ggc.world;
    }
}

Following the indications found here: https://stackoverflow.com/questions/37712224/mixed-content-error-when-accessing-websocket-server-hosted-in-a-different-port

I modified in the Hyperswarmweb.vue file the wsProxy:

      //wsProxy: 'ws://yourproxy.com',
      wsProxy: 'wss://ggc.world:4000',

and now get this error:

" WebSocket connection to 'ws://localhost:4977' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED "

image

If I modify the Proxy in Hyperswarmweb.vue : 

      //wsProxy: 'ws://yourproxy.com',
      //wsProxy: 'wss://ggc.world:4000'
      wssProxy: 'wss://ggc.world:4000',

I get this error:

"
WebSocket connection to 'ws://localhost:4977' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED " image

I tried also to follow these indications: https://www.nginx.com/blog/websocket-nginx/ and modified the nginx configuration's part related to websocket as follows:

upstream websocket {
    server ggc.world:4000;
}

server {
    listen 8443 ssl;
    server_name ggc.world;

    ssl_certificate /etc/letsencrypt/live/ggc.world-0002/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ggc.world-0002/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/ggc.world-0002/chain.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        #proxy_set_header Upgrade "Websocket";
        proxy_set_header Upgrade $http_upgrade;
        #proxy_set_header Connection "Upgrade";
        proxy_set_header Connection $connection_upgrade;
        #proxy_set_header Host ggc.world;
        proxy_set_header Host $host;
    }
}

But I get the same error :

" WebSocket connection to 'wss://ggc.world:4000/' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR "

I read here: https://stackoverflow.com/questions/43768161/using-ws-while-on-https-mixed-content "If you can serve the page via https somewhere on your server there are certificate and chain files, use these to serve a wss"

I already put them in the NGINX configuration, in the part related to the websocket. Where else should I put certificate and chain files paths? in wsProxy in Hyperswarmweb.vue?

How to make the Websocket connection working? Looking forward to your kind help. Marco

RangerMauve commented 4 years ago

Hey Marco, a couple of things that might help:

Hope that helps you on your way. 😁

marcoippolito commented 4 years ago

Hi @RangerMauve !!

I'm trying to understand your points:

RangerMauve commented 4 years ago

Hey sorry for the super late response.

A) Yes, if you're using HTTPs it should use wss and your server domain name.

B) That should be working, did you npm install everything? There might be a bug in the package.json, might need to open an issue on that repo though.

C) Essentially, if you have a local signalling server, you'll only be able to connect to peers on your machine since peers need to use the same signalling server if they want to connect to each other.