Unusable without javascript enabled

[1xPdd]

Hi:

Thanks for consolidating all this information and putting pressure on sites/services to use 2fA. I wanted to make one critique, however. The site is impossible to view with without enabling javascript because most links don't work. It would be great if there was a static version.

Thanks!

[fpigerre]

Hello @1xPdd,

Thanks for taking an interest in twofactorauth.org! At the moment, loading all the images shown on the site without using JavaScript takes about 20 seconds. Furthermore, displaying each website without using pop-up categories would make the scroll length of the site infinitely long. It might be possible to enable category selection using pure CSS, however, the site would likely lose some of the transition and colour change effects used when opening and closing categories.

A solution using pure CSS for categories might be feasible if we could somehow layer JavaScript content over a common JavaScript and non-JavaScript CSS base. Otherwise, since we use GitHub Pages for hosting, I can't seem to find a way to serve a non-JavaScript and a JavaScript-enabled version of the website in parallel.

Do you have any ideas regarding how we could implement a static/non-JavaScript version of the site?

Thanks, psgs 🌴

[FiloSottile]

I'm not a web dev, so this might be entirely wrong, but can't you put the giant table in a <noscript>, so that it will only render and show the images if there's not Javascript?

[RichJeanes]

So put a massive block in the HTML source of the page that every visitor has to load whether they need it or not? That seems like a rather clunky and resource-heavy solution.

[fpigerre]

Hi @FiloSottile :smile:

Unfortunately, we don't have any system in place that would serve <noscript> content only to users with JavaScript disabled. At the moment, <noscript> content is served to all users regardless of Browser settings. Due to this, duplicating the website data and placing it within <noscript> tags would effectively double the load time of the site, and likely increase render/scripting times as well.

Perhaps it might be possible to load a skeleton of the site and use some sort of callback to detect whether the user is using JavaScript (although conversely, that solution would probably itself use JavaScript). Otherwise, do you think it might be possible using DNS somehow?

[mxxcon]

Maybe generate a full plain version as another page and in <noscript> on the main page include a link to it? That way people could also use visual website monitoring tools to detect changes?

[tantek]

Re: "A solution using pure CSS for categories might be feasible if we could somehow layer JavaScript content over a common JavaScript and non-JavaScript CSS base."

I think that's a good approach. The categories themselves can be fairly mechanically converted (i.e. as part of the "build" step of the website) to viewable/stylable/parseable/indexable HTML+microformats2; the primary text fields map 1:1, and the boolean fields convert to tags/categories 1:1. To avoid loading all the images, you can put them into data elements which are then could be lazy loaded only with additional JS as needed. E.g.

    - name: Twitter
      url: https://twitter.com
      img: twitter.png
      tfa: Yes
      sms: Yes
      exceptions:
          text: "SMS only available on select providers. SMS required for 2FA. 10 accounts per phone number, 1 phone number per account."
      software: Yes
doc: https://support.twitter.com/articles/20170388

<span class="h-card">
 <a class="p-name u-url u-uid" href="https://twitter.com/">Twitter</a>
 <data class="u-photo" value="twitter.png"></data>
 <span class="u-category">tfa</span>
 <span class="u-category">sms</span>
 <span class="u-category">software</span>
 <span class="p-note">SMS only available on select providers. SMS required for 2FA. 10 accounts per phone number, 1 phone number per account.</span>
 <a class="u-url" href="https://support.twitter.com/articles/20170388">doc</a>
</span>

[kenman345]

I've noticed this as well and was thinking perhaps that while refactoring the layout to be more streamlines as part of #3171 efforts it may make sense to explore this concern.

I think it makes sense to have a site that works without JS, or goes full in on it and not just say it might not work well.

Always an option is making an image-less page that we link to if the JS warning shows. It could be as simple as a .md file or a few .md files that get generated by Travis-ci before pushing to GH-pages that when viewed in github would show as links between categories similar to Awesome-Ruby

[kenman345]

Note: In the .md files I suggest in my comment above, we can have it simply only list the sites that support TFA so its a simple easy to browse list. Part of this idea could be to add a tag about with some context to share after each entry, and a web crawler to grab the description from the SEO of the URLs we have in the repository already

[tcaxle]

Sorry to necro-bump but given how nicely the data is catalogued in the repo, @mxxcon 's idea to stick the data in a HTML/CSS only table on a separate page wouldn't be too tricky at all. You could even just put the aggregate data in plaintext at 2fa.directory/raw.json or similar, no?

Not to be too tin-foil-hat about this but browsing with JS disabled is to be commended from a security and privacy perspective as it eliminates a powerful vector for user-hostile content that plagues the web. Should we not work to make this resource available to those who choose to protect themselves in this way?

[Carlgo11]

@tantek JSON files are available through our API. Making the site work without JS is tricky as everything needs to be static content and showing all categories by default would mean gigabytes of assets being served.

I'm personally not able to find a way to serve the site without JS but if you know a way I'd be happy to look at a PR.