Code Monkey home page Code Monkey logo

saltyrtc-client-js's Introduction

SaltyRTC JavaScript Client

CircleCI Supported ES Standard npm Version npm Downloads License CII Best Practices Chat on Gitter

This is a SaltyRTC v1 implementation for JavaScript (ES5+) written in TypeScript.

โš ๏ธ Note: The SaltyRTC client libraries are in maintenance mode. They will still receive bugfixes and regular maintenance, but if you want to start using these libraries, be prepared that you will need to take over maintenance at some point in time. (If you are interested in maintaining the libraries, please let us know, our e-mails are in the README, section "Security".)

The library has been tested with Firefox 45+ and Chromium 49+.

Installing

Via npm

You can install this library via npm:

npm install --save @saltyrtc/client msgpack-lite tweetnacl

Manually

Alternatively, copy one of the following files to your project directly:

  • ES2015: dist/saltyrtc-client.es2015.js
  • ES5: dist/saltyrtc-client.es5.js
  • ES5 minified: dist/saltyrtc-client.es5.min.js

Make sure to manually add the following external dependencies to your project:

Usage

See Docs.

Development

Install dependencies:

$ npm install

To compile the TypeScript sources to a single JavaScript (ES5 / Minified ES5 / ES2015) file:

$ npm run dist

The resulting files will be located in dist/.

Testing

1. Preparing the Server

First, clone the saltyrtc-server-python repository.

git clone https://github.com/saltyrtc/saltyrtc-server-python
cd saltyrtc-server-python

Then create a test certificate for localhost, valid for 5 years.

openssl req \
   -newkey rsa:1024 \
   -x509 \
   -nodes \
   -keyout saltyrtc.key \
   -new \
   -out saltyrtc.crt \
   -subj /CN=localhost \
   -reqexts SAN \
   -extensions SAN \
   -config <(cat /etc/ssl/openssl.cnf \
     <(printf '[SAN]\nsubjectAltName=DNS:localhost')) \
   -sha256 \
   -days 1825

You can import this file into your browser certificate store. For Chrome/Chromium, use this command:

certutil -d sql:$HOME/.pki/nssdb -A -t "P,," -n saltyrtc-test-ca -i saltyrtc.crt

Additionally, you need to open chrome://flags/#allow-insecure-localhost and enable it.

In Firefox the easiest way to add your certificate to the browser is to start the SaltyRTC server (e.g. on localhost port 8765), then to visit the corresponding URL via https (e.g. https://localhost:8765). Then, in the certificate warning dialog that pops up, choose "Advanced" and add a permanent exception.

Create a Python virtualenv with dependencies:

python3 -m virtualenv venv
venv/bin/pip install .[logging]

Finally, start the server with the following test permanent key:

export SALTYRTC_SERVER_PERMANENT_KEY=0919b266ce1855419e4066fc076b39855e728768e3afa773105edd2e37037c20 # Public: 09a59a5fa6b45cb07638a3a6e347ce563a948b756fd22f9527465f7c79c2a864
venv/bin/saltyrtc-server -v 5 serve -p 8765 \
    -sc saltyrtc.crt -sk saltyrtc.key \
    -k $SALTYRTC_SERVER_PERMANENT_KEY

2. Running Tests

To compile the test sources, run:

$ npm run rollup_tests

Then simply open tests/testsuite.html in your browser!

Alternatively, run the tests automatically in Firefox and Chrome:

$ npm test

3. Linting

To run linting checks:

npm run lint

You can also install a pre-push hook to do the linting:

echo -e '#!/bin/sh\nnpm run lint' > .git/hooks/pre-push
chmod +x .git/hooks/pre-push

Security

Responsible Disclosure / Reporting Security Issues

Please report security issues directly to one or both of the following contacts:

Coding Guidelines

  • Write clean ES2015
  • Favor const over let

License

MIT, see LICENSE.md.

saltyrtc-client-js's People

Contributors

dbrgn avatar dependabot[bot] avatar lgrahl avatar threema-danilo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

saltyrtc-client-js's Issues

Angular Glue

It might be interesting to provide Angular glue code (i.e. services) for this library (in a separate library).

Store sent messages

...so that when logging a send-error message, we actually know which message was lost.

Close websocket after handshake

Apparently it currently stays open.

Steps to reproduce:

  • Open demo application
  • Connect both peers
  • Disconnect app
  • Reconnect app
  • Web receives this ws message

Move some functionality into Peer class

Some functionality like this.

  • Signaling.encryptHandshakeDataForServer(...)
  • Signaling.encryptHandshakeDataForPeer(...)

...could be moved into the Peer class. Then polymorphism could replace if-else statements.

Implement Event Handling

As discussed in saltyrtc/saltyrtc-meta#34

interface Event {
    type: string,
    data: any,
}

type EventHandler = (ev: Event) => boolean | void;

// Register an event handler
on(event: string | string[], handler: EventHandler): void;

// Run an event handler only once
once(event: string | string[], handler: EventHandler): void;

// Cancel an event handler
off(event: string | string[], handler?: EventHandler): void;
  • Base events are connected, connection-error, connection-closed and data
  • The data event can be specialized, e.g. data:offer will only match events where offer matches the dataType
  • If a handler returns false, the corresponding listener will be removed
  • An event can be registered or deregistered for multiple events by passing in an array
  • If the handler is omitted in the off(event) call, all handlers will be removed
  • If an event handler is already registered, it is not registered a second time

Examples:

// Classic event handler
salty.on('connected', (event) => console.log('SaltyRTC is connected'));

// One-time event handler
salty.once('data', (event) => console.log('The first message arrived.'));

// Data event handler that can remove itself
salty.on('data', (event) => {
  if (event.data.dataType === 'panic') {
    console.error('everybody panic');
    return false;
  }
});

// Specialized event handler(s)
salty.on(['data:offer', 'data:answer'], (event) => {
  console.log('A', event.type, 'event is being handled');
  let dataMessage = event.data;
  console.info('Message', dataMessage.dataType, 'with value', dataMessage.data);
});

// Deregistration
function acceptPranswer(event) {
  console.log('pranswer arrived');
}
salty.on('data:pranswer', acceptPranswer);
salty.once('data:answer', (event) => {
  console.log('final answer arrived');
  // Don't accept pranswers anymore
  salty.off('data:pranswer', acceptPranswer);
});

Readme needs update

I guess the readme is simply outdated? It lacks setting a task. Or is there a default task?

Remove AngularJS specific code

Right now all classes are exposed as AngularJS services. That's not relevant here and can be removed.

This also means that the logging system needs to be replaced.

Client-to-Client Messages/Behaviour Changes

The 'drop-responder' message has been changed. An initiator MAY now add a reason field to a 'drop-responder' message the server SHALL close the connection to the corresponding responder with. That field contains a close code described here

When to use the reason field has been described here.

The 'close' message has been added.

All WebRTC-related messages have been removed from the spec and will be moved into a separate task soon. I'll use a new branch for that.

Add tests

We should be able to test the code without any existing webclient.

@lgrahl, do you know what the easiest way would be? Can we test client/server on a single machine?

Integration with Travis would also be welcome.

Properly handle protocol errors

https://github.com/saltyrtc/saltyrtc-meta/blob/master/Protocol.md#client-to-client-messages

Compared to client-to-server messages, protocol errors for client-to-client message MUST be handled differently. In case that any check fails, the procedure below MUST be followed unless otherwise stated:

  • If the other client is not authenticated yet, an initiator SHALL drop the corresponding responder by sending a 'drop-responder' message with the responder's address in the id field to the server and a close code of 3001 (Protocol Error) in the reason field. A responder SHALL close the connection to the server with a close code of 3001.
  • If the other client is authenticated and the error cause is not a 'send-error' message from the server, the client SHALL send a 'close' message to the other client containing the close code 3001 (Protocol Error). In any case, both clients SHALL terminate the connection to the server (normal close code).

Dependency Handling

Should we compile-in a copy of the msgpack and nacl libraries?

Pro:

  • A single file distribution, simple installation
  • Depending on how the packaging is done, saltyrtc will always use a known version of the required libraries, avoiding incompatibilities with other versions of the same library

Con:

  • Larger file size
  • Separate dependencies required to use
  • Conflicts could be possible if the application using saltyrtc also brings along its own msgpack and/or nacl library

@lgrahl what do you think?

Alternatively we could also provide two distributions, a fat and a light one.

Connection Reset

On forced connection reset (e.g. when a protocol error occurs), should the task connection also be closed if it's already open?

connection-closed event

Right now it's possible that the connection-closed event is thrown twice when closing the connection directly (once in resetConnection and once in onClose).

Maybe there's a way to detect whether the closing was done by us or by the server?

Validate sender byte

The sender byte should always be validated.

Once the handshake is done, messages with a different sender byte should be dropped.

@lgrahl it's correct that they should be silently dropped, right?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.