
Css-only-chat: A truly monstrous async web chat using no JS on the front end - bennylope
https://github.com/kkuchta/css-only-chat
======
fishtoaster
Haha, I’m glad to see people enjoy this (author here)! If you like this sort
of thing, some other terrible proof-of-concepts I’ve done:

A ruby dsl that’s indistinguishable from JavaScript.
[http://kevinkuchta.com/_site/2017/07/disguising-ruby-as-
java...](http://kevinkuchta.com/_site/2017/07/disguising-ruby-as-javascript/)

^ and in talk form: [http://confreaks.tv/videos/rubyconf2018-ruby-is-the-best-
jav...](http://confreaks.tv/videos/rubyconf2018-ruby-is-the-best-javascript)

A url-shortener using AWS lambda - JUST lambda. No data store.
[http://kevinkuchta.com/_site/2018/03/lambda-only-url-
shorten...](http://kevinkuchta.com/_site/2018/03/lambda-only-url-shortener/)

~~~
phs2501
> Some people, when confronted with a problem, think "I know, I'll use AWS
> Lambda." Now they have thousands of concurrent problems.

You made my day.

~~~
ct520
Hahahahahahahahahahah Mine too. Thanks for the chuckle

~~~
comis
haha

------
LeoPanthera
The most interesting part of this at least for me is what inspired it: A way
to track cursor location without using javascript, that even works in Tor
Browser:
[https://twitter.com/davywtf/status/1124130932573839360](https://twitter.com/davywtf/status/1124130932573839360)

tl;dr css hover selectors that change the background image don't actually
cause the browser to GET the specified background image until you hover over
it, thus creating a way to send data from a web page with no javascript.

~~~
amelius
The fix is to make the Tor browser preload all images.

Unfortunately, as always, using Tor will make things slower.

~~~
ehsankia
If you're disabling JS, you should probably be able to disable onhover too.

~~~
baroffoos
And break navigation on half of the nav bars on the web?

~~~
ehsankia
disabling JS already break half the sites :)

~~~
zbentley
More than half.

------
t0mbstone
Now this is a proper hacker project perfect for being featured on this site

------
laszlokorte
It seems all those css tracking tricks (a:visted, [value=...], now :hover)
depend on external resouces (background-images) being loaded lazily only once
the selector is matched. Wouldn't a easy solution be for browsers to always
download all url('...') references found the the stylesheets even if the
selector is never matched?

~~~
altfredd
You seem to be confused about meaning of "CSS tracking". Detecting that user
clicks on the link, that you have shown him, is harmless — as demonstrated by
Google, a website can always track it's own outgoing requests by replacing all
it's outgoing links with redirects. This is inherent part of hypertext.

The infamous "a:visited" tracking didn't simply track your visits from Google
— it tracked _all_ your visits across entire Internet. Browser vendors are
bunch of lazy hacks, who can't even implement per-site link history (just like
they failed to implement per-site cookies). All "a:visited" states are source
from single SQLite database, that stores your full web history. THAT is the
"CSS Tracking", because it can tell a page about visits from completely
different domains. Instead of separating your web history per-domain those
<censored> have crippled :visited selector in several undocumented ways.

~~~
icebraining
> Browser vendors are bunch of lazy hacks, who can't even implement per-site
> link history

But who asked them to? As far as I know, the spec says nothing about per-site
histories, and I find it much more useful to know if I already visited a site,
regardless of the origin - for example, if I'm researching a topic, two or
more sites might link to the same place, and I don't want to open it multiple
times.

Plus, the idea that one can look at a modern browser, which are some of the
most complex software packages being developed, and think "clearly these
people don't know how to add an 'origin' column to a SQLite database", well,
it boggles the mind.

~~~
altfredd
> the idea that one can look at a modern browser, which are some of the most
> complex software packages being developed, and think "clearly these people
> don't know how to add an 'origin' column to a SQLite database", well, it
> boggles the mind

It boggles my mind too. Imagine, what would have happened, if those small
Javascript snippets, used mainly to add cute visual effects to pages, could
check if some image from different site is already in browser cache by
performing cross-site HTTP requests... That would allow completely new
dimension of spying on web users!

Fortunately, browser developers are some of the most competent people in the
word. They would never give web pages too much power by letting them start CPU
threads, use OpenGL, allocate arbitrary amount of memory or read your battery
level to set exorbitant taxi tariffs for people in a pinch. Browsers are well-
designed and highly secure, because they are being updated with security fixes
every day, sometimes even multiple times a day.

~~~
icebraining
I think you're confusing having different goals from yours with incompetency.

~~~
altfredd
I don't care about goals (or competency level) of browser makers. But it is
hard to deny, that they are repeating the same mistakes Sun committed in late
90's with browser applets. They don't learn.

------
RodgerTheGreat
Seems like a compelling argument for not lazily loading urls referenced in CSS
rules. If the browser progressively loaded everything in the stylesheet
without user interaction it would presumably consume more bandwidth in many
situations but it would also blast this server with a continuous stream of the
entire alphabet.

------
_bxg1
Reminds me of this:

[https://github.com/videlalvaro/gifsockets](https://github.com/videlalvaro/gifsockets)

~~~
leowoo91
Interesting. If I understand correctly, this one doesn't receive data from the
client. Maybe it can be combined with the css idea?

------
flying_sheep
Combining with Turing complete CSS, it can reach the sky higher than our
imagination

[https://rawgit.com/elitheeli/stupid-
machines/master/rule110-...](https://rawgit.com/elitheeli/stupid-
machines/master/rule110-old/rule110-full.html)

------
edjroot
Just a few hours earlier, this discussion on Turing-complete stuff hit HN's
front page:

[https://news.ycombinator.com/item?id=19847939](https://news.ycombinator.com/item?id=19847939)

Now I don't know if there's any causal relationship between the two (or the
three) or if it's just a big coincidence, since it says on the README that the
inspiration for it came from a Tweet posted a few days ago.

------
zghst
I am consistently surprised at the mass creativity with CSS over the years,
never ever disappointed!

------
pmoriarty
This makes me wonder: is CSS turing complete?

Are browsers that allow CSS as vulnerable to being exploited as those that
allow Javascript?

~~~
aasasd
Exploits rely on interactions between parts of a system, not on crunching
numbers. A pure Turing machine is perfectly un-exploitable since <s>its only
i/o is supposed to be to the keyboard and the screen</s> (edit: it has no i/o
whatsoever). CSS would have more holes than JS if it offered more APIs (which
it might do unknowingly by mistakes in programming).

~~~
roywiggins
A "pure" Turing machine has no input or output at all, just an infinite
expanse of tape.

~~~
aasasd
Ah, indeed, I tend to confuse it for Brainfuck which at least can do
_something_ of use.

~~~
whatshisface
I/O on a Turing machine consists of initializing the tape with your input and
reading the output off the tape once it's finished computing.

~~~
aasasd
Indeed, and that exactly puts all the onus of exploitability on the machine's
environment. The tape might as well be written by regular expressions, if some
of the outputs make the ‘interpreter’ do network requests and stuff.

------
CM30
Probably a silly question, but is there a working demo for this? This is one
of those things you kinda have to see in action, and there doesn't seem to be
a link to anything like that in the readme.

------
thesandlord
Reminds me of this:
[https://harmless.herokuapp.com/](https://harmless.herokuapp.com/)

HN Discussion:
[https://news.ycombinator.com/item?id=16319248](https://news.ycombinator.com/item?id=16319248)

Basically the same idea, but it does refresh when you submit. The CSS buttons
are quite a clever workaround to not refresh the page.

~~~
busymom0
This is what it reminded me of too! I wonder if this would break too as that
one does of you press escape key.

------
woah
You could do this with no CSS, only html.

~~~
miguelmota
Skeptical because there needs to be some dynamic component to it which is what
the CSS pseudo-selectors are achieving. Would love to see a working demo.

~~~
driverdan
You could do it with iframed buttons. Clicking a letter button posts to the
server, an image is sent back in the forever loading page.

~~~
lawl
You don't need letter buttons. You can have a regular text box in an iframe
and submit the form with the text.

I actually remember websites doing exactly that years ago.

Some would display the chat like here, by never closing the connection, as
described in the repo. And another trick was to just send a refresh header (or
use a meta tag) to automatically reload the iframe displaying the chat every
$x seconds. The latter one was iirc more prominent because you could do it on
any web host with PHP and MySQL as it doesn't require any long living
processes.

~~~
nwellnhof
That's exactly how I implemented a web chat around 2002. IIRC, Internet
Explorer didn't update the iframe with the chat messages reliably, so I had to
fall back to reloading. The whole thing was rather inefficient, simply polling
a database for new messages every second, but it worked fine for about 10-20
users.

------
shoes_for_thee
> Should I use this in real life? Dear god yes.

------
QuinnWilton
You could write a UI framework using these ideas to provide rich client-sided
functionality to Tor hidden services, where users typically disable
JavaScript.

------
sevsco
Rather than the forever loading site, couldn't you also include in the html
doc something like this to have it simply refresh every few seconds?

<meta http-equiv="refresh" content="10; URL='[http://new-
website.com'"](http://new-website.com'") />

So the page would simply refresh itself every 10 seconds.

------
st0p
I've gotta admit: hats off for this clever hack.

------
Endy
You know, projects like this make me want to start blocking *.css files in my
HOSTS file and browser setups.

~~~
kijin
If you could block *.css files using a HOSTS file, that would be a hack worthy
of the front page in its own right.

------
leshokunin
Definitely the most creative code I'll be seeing this week! I realize this is
really bad practice and likely to be fixed since it can be used for tracking
users, but: are there any advantages to using CSS over Javascript, in theory?

~~~
altfredd
What exactly do you want to block here? The user clicked a form control, the
form control sent a request to server. It is no different from clicking a
link.

You know, that HTTP allows websites to "track" you each time you visit them,
right? The horror!

~~~
progval
It probably works with ":hover" too

~~~
ahje
Yes, and the twitter link above suggests that this is already used for
tracking in the wild.

That being said, if one is THAT worried about tracking then one should not be
on the modern web, and should probably stick to using Lynx over TOR.

------
westmeal
I don't know why you did what you did but I am glad you did.

------
mishingo
You lost me at ruby

------
caprese
When the A/B test tells you that you should

but you shouldn't

------
chethiya44
gf

------
gok2
link?

------
keyle
This is what hacking is all about!

------
petercooper
"Css-only-chat"

CSS is always CSS. It's CSS on the repo too, but got edited back to "Css" here
on the HN title for some reason.

