Extending the web-frontend for the cothority-framework DEDIS - June - - PowerPoint PPT Presentation

▶
extending the web frontend for the cothority framework
SMART_READER_LITE
LIVE PREVIEW

Extending the web-frontend for the cothority-framework DEDIS - June - - PowerPoint PPT Presentation

Dec 02, 2023 334 likes •804 views

Extending the web-frontend for the cothority-framework DEDIS - June 2017 Student: Gaylor Bosson Supervisor: Linus Gasser 1 Outline Goals Cothority Technologies Architecture Website Inliner Conclusion 2

slide-1
SLIDE 1

Extending the web-frontend for the cothority-framework

DEDIS - June 2017

Student: Gaylor Bosson Supervisor: Linus Gasser

1

slide-2
SLIDE 2

Outline

  • Goals
  • Cothority
  • Technologies
  • Architecture
  • Website Inliner
  • Conclusion

2

slide-3
SLIDE 3

Goals

1. Modularity + Extensibility 2. Previous features and more

a. Keep all the previous features b. Use new services (skip-chain)

3. Libraries for mobile application

a. Crypto b. Protobuf

4. Cross-site integration

3

slide-4
SLIDE 4

Outline

  • Goals
  • Cothority
  • Technologies
  • Architecture
  • Website Inliner
  • Conclusion

4

slide-5
SLIDE 5

Cothority - Status

Each node provide a status service to get information about itself

5

slide-6
SLIDE 6

Cothority - CoSi

Given a hash and roster, it provides a sign and verify process

6

message SignatureRequest { required bytes message = 1; required Roster roster = 2; } message SignatureResponse { required bytes hash = 1; required bytes signature = 2; }

{ "filename": "7378e468ad6e24925f61560829ca1205.jpg", "signature": "134f07469307fc3e4...", "hash": "38ab97d8e44...", "genesisID": "32bf04100...", "blockID": "32bf04100...", "offlineServers": [ "192.33.210.8:7005" ] }

slide-7
SLIDE 7

Cothority - Skip-chain

It can be used in many ways but we are interested in: 1. Roster 2. HTML content in the data field

7

...

slide-8
SLIDE 8

Outline

  • Goals
  • Cothority
  • Technologies
  • Architecture
  • Website Inliner
  • Conclusion

8

slide-9
SLIDE 9

Technologies

9

❖ Create React App ❖ React Router ❖ Font Awesome ❖ Moment ❖ Reactstrap ❖ Jest + Enzyme + Faker

slide-10
SLIDE 10

Outline

  • Goals
  • Cothority
  • Technologies
  • Architecture
  • Website Inliner
  • Conclusion

10

slide-11
SLIDE 11

Architecture

11

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-12
SLIDE 12

Architecture

12

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-13
SLIDE 13

Architecture - Cothority Crypto

  • GopherJS
  • Interface between Go and Javascript
  • Primitives

○ Hash ○ Public and Private Keys (i.e. aggregate) ○ Signature ○ Skip-chain

13

slide-14
SLIDE 14

Architecture

14

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-15
SLIDE 15

Architecture - Cothority Protobuf

  • Helper

○ Data types (e.g buffer)

  • *.proto definition
  • Script to build the .proto files into a javascript file

○ We cannot create a bundle with external .proto files

15

slide-16
SLIDE 16

Architecture

16

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-17
SLIDE 17

Architecture - Websocket service

  • Use Cothority Protobuf
  • Maintain the websockets
  • Provide helpers for the requests to the Cothority

17

slide-18
SLIDE 18

Architecture

18

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-19
SLIDE 19

Architecture - Skip-chain

  • Use the websocket service
  • One function => get the skip-chain for a given ID

○ Main role is to verify the integrity of the blocks !

19

slide-20
SLIDE 20

Architecture

20

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-21
SLIDE 21

Architecture - Genesis service

  • Use the skip-chain service
  • Entry point of the app

○ Available skip-chains ○ Current active skip-chain ○ Events for active chain ○ Get a block given a skip-chain ID + block ID

21

https://skipchain.dedis.ch { "Blocks": [{ "GenesisID": "0b8d24c8d3...", "Servers": [ "192.33.210.8:7002", "192.33.210.8:7004", "192.33.210.8:7006" ], "Data": "3c1b8rA7XN66xq/fn3jvQQoA" }] }

slide-22
SLIDE 22

Architecture

22

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-23
SLIDE 23

Architecture - Status service

  • Use Websocket and Genesis services
  • Provide the status of the nodes

○ Roster of the active skip-chain ○ Events

  • Provide the online/offline roster

○ Important for the signature ! (at least ⅔)

23

slide-24
SLIDE 24

Architecture

24

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-25
SLIDE 25

Architecture - IFrame service

  • Use the Genesis service
  • Sync the components to show an HTML skip-chain

○ Events (e.g. open and back) ○ Given a skip-chain ID

  • Take care of loading the HTML content

○ Provide it in the open event

25

slide-26
SLIDE 26

Architecture

26

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-27
SLIDE 27

Architecture - Module random

  • Use the Websocket service
  • Display a random number

○ Refresh itself every 30 seconds ○ Makes a request to the random service of a given node (wss://pulsar.dedis.ch:9000)

27

slide-28
SLIDE 28

Architecture

28

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-29
SLIDE 29

Architecture - Module skip-chain

  • Use the Genesis service
  • Display the list of available skip-chains

○ Highlight the active one

  • User can choose the active chain

○ … by clicking

29

slide-30
SLIDE 30

Architecture

30

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-31
SLIDE 31

Architecture - Servers-Status

  • Use the Status service
  • Not a module

○ but a table of the nodes

  • Display information about the nodes

○ Name, IP, Port, Up-time, Traffic, Services and Version ○

  • nline/offline

31

slide-32
SLIDE 32

Architecture

32

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-33
SLIDE 33

Architecture - Module signature (sign)

  • Use the Status and Genesis services
  • 2 steps

a. Dropzone to upload a file b. Confirmation to sign

  • Require at least ⅔ of the roster (or reject)
  • Download a signature file

33

{ "filename": "7378e468ad6e24925f61560829ca1205.jpg", "signature": "134f07469307fc3e4...", "hash": "38ab97d8e44...", "genesisID": "32bf04100...", "blockID": "32bf04100...", "offlineServers": [ "192.33.210.8:7005" ] }

slide-34
SLIDE 34

Architecture

34

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-35
SLIDE 35

Architecture - Module signature (verify)

  • Use the Genesis service
  • 2 steps

a. Dropzone to upload a file b. Dropzone to upload the signature file

  • Fetch the specific block
  • Remove public keys of offline nodes

35

{ "filename": "7378e468ad6e24925f61560829ca1205.jpg", "signature": "134f07469307fc3e4...", "hash": "38ab97d8e44...", "genesisID": "32bf04100...", "blockID": "32bf04100...", "offlineServers": [ "192.33.210.8:7005" ] }

slide-36
SLIDE 36

Architecture

36

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-37
SLIDE 37

Architecture - HTML IFrame

  • Use the IFrame service
  • Open

a. Add an iframe to the html b. Populate the iframe with the base64 of the HTML content

  • Back

a. Remove the iframe

  • postMessage to tackle the security

37

<a href="javascript:void 0" onclick="window.parent.postMessage('skipchain://0b8d24c8d3d1c323f6eaed455a55b7949cbde5370f32a64c6f9bb3b961fa6d6d', '*')">CoSi Binary </a>

slide-38
SLIDE 38

Architecture

38

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame

slide-39
SLIDE 39

Architecture - Module HTML

  • Use the Genesis and IFrame services
  • Display the list of HTML skip-chain

○ Genesis blocks with data field starting with “http://” or “https://” ○ Only the index of websites

  • Open the content

○ Ask the IFrame service to fetch the last block

39

slide-40
SLIDE 40

Outline

  • Goals
  • Cothority
  • Technologies
  • Architecture
  • Website Inliner
  • Conclusion

40

slide-41
SLIDE 41

Website Inliner

  • NodeJS script
  • Use the Inliner node module
  • Automatically create and populate the skip-chains

○ One per page ○ Last block of the chain is the latest content ○ Use a public.toml file for the roster

  • Create a config skip-chain to keep track of the chains

○ You can provide the the skip-chain ID to update

  • Optimize for the DEDIS website...

41

slide-42
SLIDE 42

Website Inliner - Configuration file

42

{ "https://dedis.ch": "ab38ab...", "https://dedis.ch/post/software-engineer/": "19fe7a...", "https://dedis.ch/post/cothority-v1/": "cb6493..." } Data: “config://dedis.ch”

…

slide-43
SLIDE 43

Website Inliner - Page skip-chain

43

"data:text/html;base64,PCFET0NUWVBFIGh0bWw+IDxod..." Data: “https://dedis.ch”

<html> <head>...</head> <body>...</body> </html>

…

slide-44
SLIDE 44

Outline

  • Goals
  • Cothority
  • Technologies
  • Architecture
  • Website Inliner
  • Conclusion

44

slide-45
SLIDE 45

Conclusion

  • Code is modular and extensible
  • User friendly signature
  • Not anymore a static roster

○ we can change it !

  • HTML skip-chain
  • Tests
  • Libraries (simple usage of crypto primitives)

But

  • Status is not scalable (require a back-end support)

45

slide-46
SLIDE 46

Thank you for your attention !

46

Cothority Crypto Cothority Protobuf Websocket Status Skip-chain Genesis IFrame Module random Module signature sign Module signature verify Module HTML Module skip-chain Servers-Status HTML IFrame