Announcing https://orderbook.xrp.ninja

I just made a website https://orderbook.xrp.ninja. I have explained why I did it in the front page.
I am going to record some of the problems that I had and how I solved them in this post.

Prod code doesn't work

The code works in development mode. But it doesn't after minified. The error message was:

Uncaught Error: [$injector:modulerr] Failed to instantiate module rp due to: Error: [$injector:unpr] Unknown provider: e

I found a post on stackoverflow and fixed it like this.

Add domain to an existing Letsencrypt cert

$ certbot certonly --cert-name rippled.xrp.ninja -d rippled.xrp.ninja,ripple.xrp.ninja,www.xrp.ninja,xrp.ninja,orderbook.xrp.ninja

Redirect http traffic to https on lighttpd

Add this to lighttpd.con and also enable mod_redirect.

$HTTP["scheme"] == "http" {
    # capture vhost name with regex conditiona -> %0 in redirect pattern
    # must be the most inner block to the redirect rule
    $HTTP["host"] =~ ".*" {
        url.redirect = (".*" => "https://%0$0")
    }
}

Add response headers

Use http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModSetenv. Also there is a useful site to scan the header settings of a website: https://securityheaders.com/

Https link in iframe downgraded to http

The chart on the orderbook page is an https link to xrpchats.ripple.com. However, inexplicably the https link was downgraded to http and it can't be displayed since mixing https and http contents is not allowed.

I tried setting upgrade-insecure-requests in Content-Security-Policy. Then the problem was gone. But later it reappeared. I finally realized this is because ripple changed the link format. See this commit for details.

Javascript file size too large

The vendor.js file is too large. I have removed lots of unnecessary code. But after minimization, it's still 1.04 MB. I got the following picture with webpack-bundle-analyzer. The picture shows gzipped size. The gzipped size (320 KB) is acceptable.

To enable compression in lighttpd, mod_compress must be enabled, compress.cache-dir must be setup with proper permission and compress.filetype set to something like this:

compress.filetype = ("text/plain", "text/html", "text/css", "text/javascript", "application/x-javascript", "application/javascript", "application/font-woff")

Note that I only had "text/javascript" in this list which didn't work. Later I added the other two javascript types and it worked. I don't know how the type is determined though.

I plan to shrink it further with the help of inspectpack-plugin.

Orderbook doesn't update

See this commit for details.

Use font-display: fallback

See this commit.

Set “Cache Control"

First append hash to js and css file names. See this commit. This feature was originally there. But it renames index.html as well. To get things work ASAP, I removed this feature without investigating what this does and why it renames index.html until now.

Then I added the following code to lighttpd.conf:

$HTTP["url"] =~ "(^/$|\.html$)" {
  setenv.add-response-header = ( "Cache-Control" =>; "no-cache, public, must-revalidate" )
}

$HTTP["url"] =~ "^/(js|css|img|fonts)/" {
  setenv.add-response-header = ( "Cache-Control" =>; "max-age=31536000, public, must-revalidate" )
}