├── README.md
└── SiteLoader
    ├── BitDiary Secondary Siteloader.html
    ├── README.md
    ├── RSA_SiteLoader.html
    └── RSA_SiteUpdater.html


/README.md:
--------------------------------------------------------------------------------
 1 | # MetaNet-Website
 2 | Demos and Instructions on How to Build a Website on BSV MetaNet.
 3 | 
 4 | ## Get Started
 5 | 
 6 | 1. Build a HTML page
 7 | 2. upload it to bitcoin at b.bitdb.network
 8 | 
 9 | ## Topic
10 | 
11 | ### SiteLoader
12 | 
13 | Siteloader is kind of middleware that help browser access metanet website.
14 | 
15 | A website loader prepare pages, scripts and other resources from blockchain.
16 | 
17 | See [Siteloader](./SiteLoader)
18 | 
19 | For multi page website, see [metasite-loader](https://github.com/monkeylord/MetaSite-Loader)
20 | 
21 | ### Data
22 | 
23 | See [Bitcoin Application Data protocol](https://github.com/monkeylord/BAD)
24 | 
25 | The basic principles are
26 | 
27 | 1. Each data(Or data group) should have it's own key, we call it DataKey. 
28 | 2. From DataKey and other information, a deterministic cryptic prefix can be derived, which allow DataKey and only DataKey to search.
29 | 3. Data should be encrypted with key that derived deterministic from DataKey, which allow DataKey and only DataKey to decrypt.
30 | 4. Data should be signed with key derived deterministic from DataKey.
31 | 
32 | ### User
33 | 
34 | In metanet, user is identity, which may be a master private key.
35 | 
36 | Neither the identity key nor its public key should exposed to public.
37 | 
38 | One should not use identity key to sign or transact.
39 | 
40 | 
41 | 
42 | All the other key are derived from identity key. 
43 | 
44 | The derivation path from identity key should be hardened to make sure identity key is not recoverable.
45 | 
46 | The derivation path from its child keys can be hardened (e.g DataKey)  or unhardened (e.g FilesystemKey).
47 | 
48 | Unhardened derivation allow deriving child public key from parent public key.
49 | 
50 | ### Transaction
51 | 
52 | integrate Moneybutton in your html page.
53 | 
54 | implement a simple wallet whose xpriv is derived from identity key.
55 | 
56 | ### Crypto
57 | 
58 | ### Parameters
59 | 
60 | Parameters from `#`
61 | 
62 | ### Security
63 | 
64 | ### API and Protocol
65 | 
66 | ## Advanced
67 | 
68 | ### Chatroom
69 | 
70 | ### Games on Chain
71 | 
72 | ### News
73 | 
74 | ### forum


--------------------------------------------------------------------------------
/SiteLoader/BitDiary Secondary Siteloader.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | document.write("<p>Secondary Siteloader Loading...</p>")
 3 | 
 4 | var _scripts = {
 5 |     JSEncrypt : "c1ac4721b5029b5d879e76720182c346838c1a6a139f99bd01538e7c7e780501",
 6 |     CryptoJS : "1b1ba5c0dece7a642c9a16a6c7bc73e62ebf595e2fa956bf09cdf4aff0660d01",
 7 |     Main:"4e0d62aa6e4adeec469e70e5457cef5fe94434aeb8f5672792b1c7e4b7894c0b",
 8 |     Bootstrap:"98b56fc917337fa812dbca9049337bf9275f4b5c2bb83ce13b3a68fd6b351130",
 9 |     JQuery:"d8356c0d0e51e340d8929dc14aa8904c77d48229c2ee142e11b824140155b7f7",
10 |     IBE:"f9e1125d9fce04c9eebe01f3fbeee23a79d08f0fe46c34ccea429189e27e7707",
11 |     MoneyButton:"83e6b7bfbb2ac2125993fc3c199164e322369bb5ad384814428f8d523873475d",
12 |     BSV:[
13 |         "8b3d11e105a555c28df9a54635bb5c4fc0580fd35d773f88a7096c44c9d9ab8e",
14 |         "b32687e8efaebd61f49762481d7b7e9e3d9edb7a152ca23a1ced9dfe0d6520a0",
15 |         "4d3c6f85a6ed219b5dd6311fda71c6e99c975557f11b342e6c4c6cacc14eddec",
16 |         "070a71d56df31a97bc4211c6f5c28eb09ee9b2c83be4863d4611008ae97480b2",
17 |         "a8ca4384f11ad60ff954a1818d8043aca99deaa3a04a378eef8a080945f11d70",
18 |         "b96f965651ab4e3c7f930b6c251025630ef954a4a839342c82af6ed4d1d7bfa5",
19 |         "46864d3868f2a0881987b32730c0923cd6a55607631b1155eb778e98a6a200c2",
20 |         "e95fdbb1f60efb9d48b1b3b98d3bb403bbc4c0c37349706fa2fe59c6b7b6439d",
21 |         "416d01c6e245270a1604aff155bf69dd10b2684244a1c4b870df8cfdafcdcb4f"
22 |     ]
23 | }
24 | function loadScript(library){
25 |     var scriptTX = _scripts[library]
26 |     var script = null
27 |     try{
28 |         if(!scriptTX){
29 |             throw new Error(library+" is missing")
30 |             return
31 |         }
32 |         document.write("<p>Loading " + library+"</p>")
33 |         if(scriptTX instanceof Array){
34 |             var scriptChunks=scriptTX.map(tx=>{
35 |                 document.write("<p>Loading TX " + tx+"</p>")
36 |                 xhr = new XMLHttpRequest()
37 |                 xhr.open("GET", "./" + tx, false)
38 |                 xhr.send(null)
39 |                 if(xhr.status==200)return xhr.responseText
40 |                 else throw new Error(library+" is missing")
41 |             })
42 |             script=scriptChunks.join("")
43 |         }else{
44 |             document.write("<p>Loading TX " + scriptTX+"</p>")
45 |             xhr = new XMLHttpRequest()
46 |             xhr.open("GET", "./" + _scripts[library], false)
47 |             xhr.send(null)
48 |             if(xhr.status==200)script=xhr.responseText
49 |             else throw new Error(library+" is missing")
50 |         }
51 |         window.eval(script)
52 |     }catch (err){
53 |         console.log(err)
54 |     }
55 | }
56 | loadScript("JQuery")
57 | loadScript("Bootstrap")
58 | loadScript("BSV")
59 | loadScript("IBE")
60 | loadScript("MoneyButton")
61 | loadScript("Main")
62 | document.write("\r\nNow Loading Page...")
63 | document.close()
64 | setTimeout('renderPage("a3dbff56e4ae4914dd5cb67bd74ce7420415d5810a82f3a7e00cbdaf3d8277f7")',1000)
65 | </script>


--------------------------------------------------------------------------------
/SiteLoader/README.md:
--------------------------------------------------------------------------------
  1 | ## SiteLoader
  2 | 
  3 | ### What is SiteLoader?
  4 | 
  5 | Siteloader is kind of middleware that help browser access metanet website.
  6 | 
  7 | A website loader prepare pages, scripts and other resources from blockchain.
  8 | 
  9 | Generally, a siteloader
 10 | 
 11 | 1. Acquire latest sitemap from blockchain. 
 12 | 2. Preload scripts and resources.
 13 | 3. Handle path and redirection.
 14 | 
 15 | ### Why Siteloader?
 16 | 
 17 | For metanet, bitcoin network itself is wrapped public database which is immutable.
 18 | 
 19 | It still needs abstraction and middleware to build something complicated. 
 20 | 
 21 | > e.g. on-chain or not on chain, you still need name service for a human readable address. 
 22 | 
 23 | Basically, gateways like bico.media are also siteloader, but you may want more.
 24 | 
 25 | And, maybe most important, siteloader can be the unchanging entrance for a metanet website.
 26 | 
 27 | ### How to  Build/Use SiteLoader?
 28 | 
 29 | #### Endpoint
 30 | 
 31 | BitDB or Insight-api , you need decide how to access blockchain from browser.
 32 | 
 33 | Bisides, endpoint may not always be trustworthy, so relying a single endpoint is not recommended.
 34 | 
 35 | I use BitDB, cause it's easy to query, you can build and verify query on BitDB explorer.
 36 | 
 37 | #### Acquring Latest Sitemap
 38 | 
 39 | There are several  ways to acquire latest sitemap.
 40 | 
 41 | A basic approach is to wrap it into a signed on-chain data  that can be queried.
 42 | 
 43 | So the on-chain data model contains 3 parts:
 44 | 
 45 | 1. Prefix for query, cryptic prefix or non-cryptic prefix.
 46 | 2. Sitemap data, encrypted or not encrypted.
 47 | 3. Signature, ECDSA or non-ECDSA.
 48 | 
 49 | Then you can build the OP_RETURN data model.
 50 | 
 51 | ~~~javascript
 52 | function buildScript(prefixbuf, databuf, signaturebuf) {
 53 |     var script = bsv.Script.buildDataOut(prefixbuf)
 54 |    	script.add(databuf)
 55 |     script.add(signaturebuf)
 56 |     return script
 57 | }
 58 | 
 59 | function bitdbQuery(prefix){
 60 |     return {
 61 |         "q": {
 62 |           "find": { "out.s1": prefix}
 63 |         },
 64 |         "r": {
 65 |           "f": "[ .[] | {data: .out[0].s2, signature: .out[0].s3, blk:.blk.i} ]"
 66 |         }
 67 |     }
 68 | }
 69 | 
 70 | //Don't forget to verify signature.
 71 | //Signature should include prefix.
 72 | ~~~
 73 | 
 74 | #### Using Sitemap
 75 | 
 76 | It's for your convenience that using sitemap.
 77 | 
 78 | Basically, you redirect browser to index page, which is quite simple. 
 79 | 
 80 | There are multiple approach, like iframe, document, service worker.
 81 | 
 82 | ~~~javascript
 83 |   function renderPage (txid){
 84 |       // clean up the old page.
 85 |       document.open()
 86 |       // load new page from tx
 87 |       fetch("./"+txid).then(res=>res.text()).then(html=>document.write(html))
 88 |   }
 89 | ~~~
 90 | 
 91 | Then you may want to preload your script. An AMD module loader may be great, but eval is ok.
 92 | 
 93 | ~~~javascript
 94 | // Eval is OK here, for on-chain script are trustworthy.
 95 | window.eval(script)
 96 | ~~~
 97 | 
 98 | For other resources, you may want to have a service worker, but using TXID directly is also fine.
 99 | 
100 | #### Mapping URL to TXID
101 | 
102 | That will need service worker
103 | 
104 | ### Demo
105 | 
106 | #### RSA-signature based Siteloader
107 | 
108 | The reason why using RSA instead of ECDSA is because 
109 | 
110 | 1. BSV library is relatively heavy.
111 | 2. ASN.1 format Key is immigration candidate for traditional certificate.
112 | 
113 | ##### The Siteloader
114 | 
115 | See RSA_SiteLoader.html
116 | 
117 | ##### The SiteUpdater
118 | 
119 | SiteUpdater commits sitemap to blockchain.
120 | 
121 | See RSA_SiteUpdater.html
122 | 
123 | ##### Secondary SiteLoader
124 | 
125 | Used as sitemap in BitDiary.
126 | 
127 | Actually is a siteloader loaded by siteloader.
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | 
166 | 
167 | 


--------------------------------------------------------------------------------
/SiteLoader/RSA_SiteLoader.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <!-- JSEncrypt -->
 4 | <script src='./c1ac4721b5029b5d879e76720182c346838c1a6a139f99bd01538e7c7e780501'></script>
 5 | <!-- CryptoJS -->
 6 | <script src='./1b1ba5c0dece7a642c9a16a6c7bc73e62ebf595e2fa956bf09cdf4aff0660d01'></script>
 7 | </head>
 8 | <body>
 9 |     Loading, Please Wait....
10 |   <script>
11 |   var endpoint = "https://genesis.bitdb.network/q/1FnauZ9aUH2Bex6JzdcV4eNX7oLSSEbxtN/"
12 |   var siteId = '[Your Site Name]'
13 |   var page = '/'
14 |   var pageName = siteId + page
15 |   // Use RSA Key
16 |   /*
17 |   var sitePubkey =  '-----BEGIN PUBLIC KEY-----\n'+
18 |                     'MIIBITANBgkqhkiG9w0BAQEFAAOCAQ4AMIIBCQKCAQBwqamPZSSWfU2mVNsY4Ptv\n'+
19 |                     'vVAv6PUN5U1J7TVzz9urpM98ABkF04VdBkr5GpgVL7DjUYp4BUdB8ymTGoc9GDHG\n'+
20 |                     'dplBbmdtRiRZinnVJNs5+d6cXhdH5of68TpxtHjxMlA5/gj3yJY0eI/WNd8MP+m/\n'+
21 |                     '6gfyC4b0UcnlvQCC7VMK3z21BCIVgsRsoruIYdrd1O74mOsL9LoxX+/uprAqv2/O\n'+
22 |                     'fT1rH0eHM9SKftcmyZxJT0l0PaOxGQrg5H/LA7OouQUoa8L3XacFSK7F2OffxAFr\n'+
23 |                     'VH+9EWNJl52FAO5Gw1J+tXHpyuNusRXu1V8IoNyFBt4j2bkwrBPFzVxr39aJk0PB\n'+
24 |                     'AgMBAAE=\n'+
25 |                     '-----END PUBLIC KEY-----'
26 |   */
27 |   var sitePubkey = '[Your RSA PUBLIC Key]'
28 |   var rsa = new JSEncrypt()
29 |   rsa.setPublicKey(sitePubkey)
30 |   var crypticPrefix = CryptoJS.SHA256(sitePubkey + pageName).toString()
31 |   console.log(crypticPrefix)
32 |   var verifySig = function(url,sig){
33 |     try{
34 |       return rsa.verify(url, sig, CryptoJS.SHA256);
35 |     }catch(err){
36 |     }
37 |     return false
38 |   }
39 |   
40 |   var renderPage = function(txid){
41 |     document.open()
42 |     //document.getElementById("page").src="https://bico.media/"+txid
43 |     fetch("./"+txid).then(res=>res.text()).then(html=>document.write(html))
44 |   }
45 |   
46 |   var loadPage = function () {
47 |       var query = {
48 |         "v": 3,
49 |         "q": {
50 |           "find": { "out.s1": crypticPrefix}
51 |         },
52 |         "r": {
53 |           "f": "[ .[] | {txid: .out[0].s2, sig: .out[0].s3, blk:.blk.i} ]"
54 |         }
55 |       }
56 |       
57 |       var b64 = btoa(JSON.stringify(query));
58 |       var url = endpoint + b64;
59 | 
60 |       var header = {
61 |         headers: { key: ['Your BitDB API Key'] }
62 |       };
63 | 
64 |       fetch(url, header).then(function(r) {
65 |         return r.json()
66 |       }).then(function(r) {
67 |         console.log(r)
68 |         var trustedURLs=r.c.sort((a,b)=>b.blk-a.blk).filter((entry)=>verifySig(pageName+entry.txid,entry.sig))
69 |         console.log(trustedURLs)
70 |         renderPage(trustedURLs[0].txid)
71 |       }).catch(err=>{
72 |         alert("Error:"+err)
73 |         endpoint = prompt("Try Other Endpoint?", endpoint)
74 |         if(endpoint)loadPage()
75 |       })
76 |   }
77 |   loadPage()
78 |   </script>
79 | </body>
80 | </html>


--------------------------------------------------------------------------------
/SiteLoader/RSA_SiteUpdater.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8">
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7 |     <script src='https://unpkg.com/bsv'></script>
 8 |     <script src="https://www.moneybutton.com/moneybutton.js"></script>
 9 |     <!-- JSEncrypt -->
10 |     <script src='https://bico.media/c1ac4721b5029b5d879e76720182c346838c1a6a139f99bd01538e7c7e780501'></script>
11 |     <!-- CryptoJS -->
12 |     <script src='https://bico.media/1b1ba5c0dece7a642c9a16a6c7bc73e62ebf595e2fa956bf09cdf4aff0660d01'></script>
13 | </head>
14 | <body>
15 |     <div id="uploader" class="container">
16 |         <h4>Site Page Updater</h4>
17 |         <div class="input-group"  style="width: 100%;">
18 |         <span class="input-group-addon" style="width: 15%;">SiteId</span>
19 |         <input class="form-control" id='SiteId' rows="5" style="min-width: 80%">
20 |         </div>
21 |         <div class="input-group"  style="width: 100%;">
22 |         <span class="input-group-addon" style="width: 15%;">Page</span>
23 |         <input class="form-control" id='Page' rows="5" style="min-width: 80%">
24 |         </div>
25 |         <div class="input-group"  style="width: 100%;">
26 |         <span class="input-group-addon" style="width: 15%;">PageTX</span>
27 |         <input class="form-control" id='PageTXID' rows="5" style="min-width: 80%">
28 |         </div>
29 |         <div class="input-group"  style="width: 100%;">
30 |         <span class="input-group-addon" style="width: 15%;">SitePrivKey</span>
31 |         <textarea class="form-control" id='SitePrivateKey' rows="10" style="min-width: 80%"></textarea>
32 |         </div>
33 |         <div id="pubkey" class="input-group"  style="width: 100%;visibility: collapse;">
34 |         <span class="input-group-addon" style="width: 15%;">SitePubKey</span>
35 |         <textarea class="form-control" id='SitePubKey' rows="10" style="min-width: 80%"></textarea>
36 |         </div>
37 |         <div class="input-group"  style="width: 100%;">
38 |         <span class="input-group-addon" style="width: 15%;">Script</span>
39 |         <textarea class="form-control" id='Script' rows="5" style="min-width: 80%"></textarea>
40 |         </div>
41 |         <br>
42 |         <input type="button" value="CreateScript" onclick="CreateScript()">
43 |         <input type="button" value="CreateButton" onclick="CreateButton()">
44 |     </div>
45 |     <script>
46 |     function CreateButton(){
47 |       var script=document.getElementById("Script").value;
48 |       var toscript={
49 |           amount: 0,
50 |           script: script,
51 |           currency: 'BSV'
52 |         }
53 |       var mb=document.createElement('div')
54 |       document.getElementById('uploader').appendChild(mb)
55 |       moneyButton.render(mb, {
56 |         label: "提交",
57 |         clientIdentifier: "8628f951336df6f4254647916d5ef64f",
58 |         type: "tip",
59 |         outputs: [toscript],
60 |         onPayment: function (arg) { alert('done'); mb.remove() },
61 |         onError: function (arg) { alert("Ops, something wrong") }
62 |       })
63 |     }
64 |     function CreateScript () {
65 |       var siteKey = document.getElementById('SitePrivateKey').value
66 |       var SiteId = document.getElementById('SiteId').value
67 |       var Page = document.getElementById('Page').value
68 |       var pageName = SiteId+Page
69 |       var txid = document.getElementById('PageTXID').value
70 |       
71 |       var rsa = new JSEncrypt()
72 |       rsa.setPrivateKey(siteKey)
73 |       var sitePubkey = rsa.getPublicKey()
74 |       
75 |       document.getElementById('pubkey').style.setProperty("visibility","visible")
76 |       document.getElementById('SitePubKey').value = sitePubkey
77 |       
78 |       var crypticPrefix = CryptoJS.SHA256(sitePubkey+pageName).toString()
79 |       var sigstr = rsa.sign(pageName+txid, CryptoJS.SHA256)
80 |       var script = bsv.Script.buildDataOut(crypticPrefix)
81 |       script.add(bsv.deps.Buffer.from(txid))
82 |       script.add(bsv.deps.Buffer.from(sigstr))
83 | 
84 |       document.getElementById("Script").value=script.toASM()
85 |     }  
86 |     </script>
87 | </body>
88 | </html>


--------------------------------------------------------------------------------