RANT_WEBTIPS - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
RANT_WEBTIPS (9709B)
---
1 Rant / tips to improve the web
2 ------------------------------
3
4 Below are some tips to make your site more pleasant to use, it covers only
5 common issues with the "front-end" of sites such as:
6
7 - Accessibility
8 - Privacy
9 - Security
10 - Speed / bandwidth use.
11
12
13 Webdesign:
14 - Contrast:
15 - Use good contrast on your site.
16 (Light) Grey text on a white background IS NOT COOL! Most people don't have
17 100% correct calibrated monitors or 20/20 vision.
18 - Fonts:
19 - Don't use tiny or weird fonts, make sure to atleast specify default
20 fallback fonts, don't force people to use your fonts!
21 - Don't use external custom fonts.
22 - Preferably don't use icon fonts, if you do don't overdo it and also add a
23 text description if possible.
24 - Don't overuse pagination on your site especially if you have not much content.
25 - Always think of the blind. Try your site with a screenreader.
26 - Make sure your navigation links are easy to find, as a good test use lynx(1)
27 and try to navigate your site using the keyboard only.
28
29 To check accessibility errors the useful site http://wave.webaim.org/ can be used.
30
31 Web Content Accessibility Guidelines 2.0, level AA:
32 - http://ec.europa.eu/ipg/standards/accessibility/index_en.htm
33
34 10 golden rules in accessible Web design:
35 - http://ec.europa.eu/ipg/standards/accessibility/10_rules/index_en.htm
36
37 Web Content Accessibility Guidelines 2.0 (WCAG):
38 - https://www.w3.org/TR/WCAG20/
39
40
41 Correctness:
42
43 Make sure all your (markup) code is correct, these tools can be used to help
44 check this:
45
46 HTML:
47 - W3 HTML validator: https://validator.w3.org/
48 CSS:
49 - W3 CSS validator: https://jigsaw.w3.org/css-validator/
50 Javascript:
51 - jslint: http://www.jslint.com/
52 - uglifyjs: http://lisperator.net/uglifyjs/ check "Scope warnings" options.
53 NOTE: do not use minification!
54 Browsers:
55 - Test it in all common browsers (Firefox, Firefox ESR, Chrome) and some older
56 versions.
57 User-Agent checking:
58 - NEVER DO THIS.
59
60
61 Content filesize:
62 - Optimize your content for the web:
63 - Optimize your images:
64 - Use a common format such as: JPEG, PNG or GIF.
65 - If you use thumbnails scale them down to a visible thumbnail and link to
66 the original image.
67 - Strip unneccesary metadata.
68 - Balance an appropriate setting between quality and filesize. For example a
69 standard quality setting of 85% for JPEGs is more than good enough and
70 decreases the content size alot!
71 - Choose the appropriate format depending on the kind of image, as a general
72 rule: JPEG for photos, PNG: for sprites. 8-bit PNG/gif for simple pattern
73 images.
74 - Try to combine CSS and Javascript in a single file: 1 CSS file, 1 Javascript
75 file. This reduces the amount of requests and speeds up your page.
76 - Try to reduce the size of your CSS and Javascript files: don't depend on
77 jQuery or other bloated frameworks.
78 - Don't obscure and don't minify your Javascript or CSS content. Using GZIP
79 compression for your _textual_ content is fine though. Parsing speed of
80 Javascript and CSS is reduced by simplifying the content, not be minifying it!
81
82
83 Javascript use:
84 - Make sure your site is visible without Javascript, if you serve simple static
85 content site there is generally NO reason to use Javascript. As a good test
86 make sure it is usable in for example lynx(1) or links(1).
87 - Use as little Javascript as possible, preferably none.
88 - If Javascript is absolutely needed notify the user using the <noscript> tag
89 and make sure your web page "fallback gracefully".
90 - Don't use animations, at the very least not coded in Javascript (difficult to
91 block), use subtle CSS animations, gif or webm if you must. Animations should
92 not be required to serve a functional page.
93 - Don't use jQuery or other bloated frameworks, there is no need to support
94 IE6 (anymore).
95 - Make sure links to your content work without Javascript enabled: no ugly
96 onclick handlers or event subscriptions.
97 - Don't use "toggle" menu's, make sure all content is visible without having to
98 uncollapse it.
99 - Avoid custom popups or dialogs using Javascript, especially modal dialogs.
100
101
102 Mobile:
103 - Don't scale your site according to resolution, for example using CSS
104 selectors. This can break your site for users with smaller screens or who view
105 your site in a smaller window. A better way is to serve a specific
106 mobile-friendly site via a separate space for example a subdomain such as
107 m.yourdomain or mobile.yourdomain.
108 - Don't use "hamburger" menus: try to have a functional navigation directly
109 visible on your web page.
110
111
112 CSS:
113 - Don't overuse animations.
114 - Don't use the Bootstrap or standard bloated CSS templates.
115
116
117 Video / audio:
118 - Never use DRM.
119 - Use open (container) formats such as webm, oggv.
120 - Show the link to the file for viewing it in a normal movie/media player.
121 - Do not autoplay video and audio, this includes background video/audio:
122 extremely invasive to the user, potentially harmful to some (handicapped)
123 people.
124
125
126 Flash or other proprietary plugins:
127 - NEVER USE THEM!
128
129 Websockets:
130 - NEVER USE THEM!
131
132 WebGL:
133 - NEVER USE IT. Consider GPU kernel bugs and users exposing this to any remote
134 site... scary. It also opens options for GPU compute abuse (browser bitcoin
135 mining, side-channel attacks, memory attacks etc).
136
137 Captchas:
138 - NEVER USE THEM! Consider the handicapped people. A sane alternative is just
139 some question text "What is the color of a banana?". This solution is also
140 much more accessible to poor-sighted people etc.
141
142
143 HTTP protocol:
144 - Use HTTP/1, don't use SPDY or HTTP/2: if your webpage has a performance
145 issue it is most likely not because of the protocol.
146 - HTTP/1 is plain-text and the stream is easy debuggable.
147
148
149 Cookies / localStorage:
150 - Try to reduce the amount of cookies, for static content there is no need to
151 use them. For logins Basic HTTP authentication can be used:
152 https://tools.ietf.org/html/rfc2617 (Section 2).
153 - Don't use Javascript localStorage or session storage. This is a useless
154 technology often abused for persistent advertising tracking.
155
156
157 TLS (HTTPS):
158 - Make sure to allow encryption of all resources on your site.
159 It is especially important to protect HTML forms using TLS, but it is also
160 important to protect any other resource because otherwise any resource could
161 be MITM and affect the page content: for example injecting code into a
162 webpage or serving a malicious image.
163
164 - So make sure your web server support HTTPS and your httpd is properly
165 configured, there are good tools such as the SSLLabs site to check this. A
166 gratis certificate can be requested from Letsencrypt.
167
168 SSLLabs (check): https://www.ssllabs.com/
169 Letsencrypt: https://letsencrypt.org/
170
171
172 Privacy:
173 - If you are publishing for Europeans, always consider that you have to make all
174 stored data about a user available.
175 GDPR: https://en.wikipedia.org/wiki/General_Data_Protection_Regulation
176
177 Advertisements:
178 - Preferably don't use advertisements, at the very least don't serve it from an
179 external ad-network. Serve the ads from an url that the user can block easily
180 such as: http://yourdomain/ads/*.
181 - If the user blocks your advertisements don't show a nagscreen notification.
182 - Don't track user behaviour, at the very least not if he has set the "DNT"
183 HTTP header.
184
185
186 Tracking:
187 - Don't use Google Analytics or similar spy networks. Please use a custom HTTPd
188 log analyzer or something like it.
189 - Logging can be useful for security and debugging purposes, but make sure to
190 have some sort of logging and data retention policy.
191
192
193 Maps:
194 - Instead of Google Maps you can use OpenStreetMap or simply a static image.
195 Google uses tracking in many of their applications.
196 - Consider making a money donation or other contribution to the
197 openstreetmap.org project.
198
199
200 Use of content-delivery networks (CDNs):
201 - Don't use CDN's such as Cloudfront, Cloudflare, at the very least don't serve
202 Javascript from them. Cloudflare is also known to block Tor traffic. Tor is
203 obviously very useful for many things.
204 When you use a third-party CDN you effectively give away the control of
205 your site and make it untrusted for all clients. Some sites use so-called
206 "Subresource Integrity headers", but these are just another ugly standard/hack
207 for the ugly web.
208
209 https://torrentfreak.com/cloudflare-and-riaa-agree-on-tailored-site-blocking-process-180501/
210
211
212 Misc scary things:
213 - CSS keylogging: https://github.com/maxchehab/CSS-Keylogging
214 - Talk "Scriptless Attacks: Stealing the Pie Without Touching the Sill".
215 - Javascript rowhammer attack: https://www.vusec.net/projects/glitch/
216 - Researchers show Nvidia GPUs can be vulnerable to side channel attacks:
217 https://www.techspot.com/news/77301-researchers-show-nvidia-gpus-can-vulnerable-side-channel.html
218 - In-browser (local) port scanning and probing:
219 https://defuse.ca/in-browser-port-scanning.htm
220 https://github.com/joevennix/lan-js/tree/master/src
221 - Navigator beacon: https://w3c.github.io/beacon/
222 - Hyperlink auditing (<a ping>): https://lists.w3.org/Archives/Public/public-html/2009Dec/0184.html
223 - Protocol handler leaks by using an image and CSS:
224 https://www.fortinet.com/blog/threat-research/leaking-browser-url-protocol-handlers
225 - Leak screen data by overlaying a SVG and time the rendering:
226 https://www.hertzbleed.com/gpu.zip/
227
228 This is what happens when you let advertising agencies (such as Google) help
229 write web standards.
230
231 Tim Berners-Lee on HTML DRM (EME): https://www.w3.org/blog/2017/02/on-eme-in-html5/
232 Encrypted Media Extensions (EME): https://w3c.github.io/encrypted-media/
233
234 The editors in this standard:
235
236 "Editors:
237 David Dorwin, Google Inc.
238 Jerry Smith, Microsoft Corporation
239 Mark Watson, Netflix Inc.
240 Adrian Bateman, Microsoft Corporation (Until May 2014)"