Interplanetary File System - Switch your site to localhost (local IPFS gateway)

It makes little sense in IPFS, if you use it only as a free hosting for a site on the Internet. Therefore, we will learn how to download our site through the user's local IPFS gateway.

This will give the user quick access to his local copy of our site.

Let me remind you: InterPlanetary File System is a new decentralized file sharing network (HTTP-server, Content Delivery Network ). About her, I began the story in the article "Interplanetary File System IPFS" .

Content

Switch our site

DNS

Our site currently has at least 3 DNS records:

A [ ] [IP  ] TXT [ ] dnslink=/ipfs/[CID ] TXT _dnslink.[ ] dnslink=/ipfs/[CID ]

Add to them 3 more:

 A l.[ ] 127.0.0.1 TXT l.[ ] dnslink=/ipfs/[CID ] TXT _dnslink.l.[ ] dnslink=/ipfs/[CID ]

[CID content] - This is the content identifier (CID) used to be called multi-cache. We get it by publishing the site with the ipfs add command on the IPFS network.

Scripts and styles

The HTML tags script and link have fields integrity and crossorigin . They are responsible for checking the hash before running the script or applying styles. We use them to determine the working gateway of the site visitor.

 <script src="[   ]" integrity="sha384-[sha384  base64]" crossorigin="anonymous" defer async> </script> <link rel="stylesheet" href="[   ]" integrity="sha384-[sha384  base64]" crossorigin="anonymous"/>

It is better to place them at the end of the page so that they do not delay loading and display.

Variants of addresses that we need to check:

http://l.[ ]:8080
8080 is the standard port on which IPFS is started by default.
If everything is set up correctly, then the browser will download a script or style from the http version of the site.
https://l.[ ]:8443
8443 is the port on which the user can configure stunnel.
We will need this option if the request comes from the HTTPS site and our domain is added to the local certificate.
http://127.0.0.1:8080/ipns/[ ]
This option in case we did not specify the l domain for our site and the request comes with http.
https://127.0.0.1:8443/ipns/[ ]
This option is in case of a request with https. This option will work if l domain is not specified or not added to the local certificate.

Similarly, we can check ports 80 for http and 443 for https.

We check the local gateway and switch to it with a script.

By adding this script to the page of your site, you automatically switch the visitor to his local IPFS gateway.

 <script src="redirect_to_ipfs_gateway.js" defer async ></script>

redirect_to_ipfs_gateway.js

 var redirect_to_local; /*          ```l``` */ function l_hostname() { var l_hostname = window.location.hostname.split("."); l_hostname.splice(-2,0,"l"); return l_hostname.join("."); } /*      script    ,       .    ,         .        onerror,      script. */ function add_redirect_script(prtocol, port, use_ip, onerror){ var script = document.createElement("script"); script.onerror = onerror; script.setAttribute("integrity", "sha384-dActyNwOxNY9fpUWleNW9Nuy3Suv8Dx3F2Tbj1QTZWUslB1h23+xUPillTDxprx7"); script.setAttribute("crossorigin", "anonymous"); script.setAttribute("defer", ""); script.setAttribute("async", ""); if ( use_ip ) script.setAttribute("src", prtocol+"//127.0.0.1:"+port+"/ipns/"+window.location.hostname+"/redirect_call.js"); else script.setAttribute("src", prtocol+"//"+l_hostname()+":"+port+"/redirect_call.js"); redirect_to_local = function() { var a = document.createElement("a"); a.href = window.location; a.protocol = prtocol; a.port = port; if ( use_ip ){ a.pathname = "/ipns/" + a.hostname + a.pathname; a.hostname = "127.0.0.1"; }else{ var hostname = a.hostname.split("."); hostname.splice(-2,0,"l"); a.hostname = hostname.join("."); } window.location = a.href; }; document.head.appendChild(script); } /*   ,   .  ,        .  ,     ,     . */ !function(location){ if ( location.protocol.indexOf("http") == 0 && location.hostname.length > 0 && location.hostname.indexOf("l.") != 0 && location.hostname.indexOf(".l.") < 0 && location.hostname != "127.0.0.1" ) { add_redirect_script( "http:", 8080, false, function(){ add_redirect_script( "https:", 8443, false, function(){ add_redirect_script( "http:", 8080, true, function(){ add_redirect_script( "https:", 8443, true ); } ); } ); } ); } }(window.location)

In a couple he goes script:
redirect_call.js (sha384-dActyNwOxNY9fpUWleNW9Nuy3Suv8Dx3F2Tbj1QTZWUslB1h23 + xUPillTDxprx7)

 redirect_to_local();

Integrity of this script can be calculated with the command:

 openssl dgst -sha384 -binary < "redirect_call.js" | openssl enc -base64 -A

I accordingly have the result of this command:

 dActyNwOxNY9fpUWleNW9Nuy3Suv8Dx3F2Tbj1QTZWUslB1h23+xUPillTDxprx7

If your result is different, replace this value in the script above with your own.

Now the user will be automatically redirected to the appropriate local address of the gateway with the other parameters of the address saved.

Define a working gateway with CSS

Create a CSS file that will be a beacon of the gateway.

httpl.css (sha384-4zVfUIU3jAvrXNQlD5WHMl6TI8bMiBseKrDfLJpr5Mn+xdygya+svSeP6dK/5wpu)
```
 .httpl{;display: block;} 
```
Hide the page elements that will be shown only when the local gateway is available.
```
 <style> .gatewaylink{display: none} </style> 
```

Add a CSS beacon at the end of the page.

 <link rel="stylesheet" href="http://l.[ ]:8080/httpl.css" integrity="sha384-4zVfUIU3jAvrXNQlD5WHMl6TI8bMiBseKrDfLJpr5Mn+xdygya+svSeP6dK/5wpu" crossorigin="anonymous" />

This item will be displayed if you download "httpl.css"

 <div class="gatewaylink httpl"> Use your gateway: <a href="http://l.[ ]:8080/">http://l.[ ]:8080/</a> </div>

Now, even if the user has scripts disabled, he will be able to go to the gateway himself by reference. Similarly, you can check the other options for the gateway address.

Test site: ivan386.ml

GitHub: