116 comments

[ 59.9 ms ] story [ 4262 ms ] thread
Feel free to fork and contribute :) https://github.com/idoco/map-chat
Newbie here. Nice idea ! How much time it took you to buid the site? It is js-only based? By the way, works perfectly on Safari.
Thanks! It took me about two weeks in after work hours. The server is 70 lines of Java (vertx) and the UI is like 200 lines of JS (With very little JQuery)
very nice idea! :-)

perhaps it needs:

* something to zoom the map (and thus, filtering messages for a given radius) * and/or something to organize messages in a way they don't overlap :P (eg: balloons with a number, when clicked it shows the full list of messages)

Thanks!

It is possible to save the message history on the client side. But I though that this is fun to have no history :) Right now notifications (The switch on top) gives you some history.

I disabled the zoom buttons, because I was thinking about mobile browsers and the very limited screen space they have. I will reconsider

agree on storage :-) I just meant something to organize/view messages during a session. client side, of course :)

PS: it's so amazing to see all that people around the world at the same time, on a map. sounds like a new world to explore :P

I would like to see how many people are in there (screen-wise).
Good idea! Thanks.

BTW as for writing this message there are 150 people on the map :)

(comment deleted)
Very nice! Lot of people having fun in there right now, which is a clear sign you did something right.
So much fun!
very cool actually seeing all the other writers - a counter would actually be a great idea
Yeah, I will work on that today, golro ;)
Golro, Are you related to the famous Golro08? :-)
Hello World :)
Very nice! it would be nice to have an option though that would fuzz your location a bit - I dont have a problem with people knowing im from my city - pinpointing my house is a different thing though...
Yeah, it's pretty creepy to have a very accurate location.
Very cool project. A lot of people active already playing along. Would be nice if we could PM one another that to start a one-on-one convo with someone in a place we're interested in.
XSS everywhere.

Very fun app! Love it! Are chat bubbles auto disappearing? maybe let us set a timer?

And it's already been XSS'd to death. I wouldn't recommend visiting this for now.
I think it is now somewhat disabled. you just need to refresh the page.
This is what I did for now

    msg.text =
        msg.text.replace('>','')
            .replace('<','')
            .replace(';','')
            .replace('/','')
            .replace('\\','')
            .replace('\'','')
            .replace('\"','')
            .replace(':"','')
            .replace('!important','');
I will think of a more clever solution next week :)
I see an iframe on the page. Right now.
suddenly someone injected www.leekspin.com while I'm viewing the map.
that made me laugh
This is a naive solution. Pull in some library.
var div = document.createElement('div');

div.textContent = msg;

msg.text = div.innerHTML;

This should remove all HTML/CSS/Script.

Here is how mustache.js[0] does it:

    var entityMap = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#x2F;'
     };

      function escapeHtml(string) {
        return String(string).replace(/[&<>"'\/]/g, function (s) {
          return entityMap[s];
        });
      }


also document.createTextNode will tell the browser not to render the children as html, whereas appending a dom element and innerHTML will.[1] I'm just assuming that behavior is correct in all browsers though.

[0]https://github.com/janl/mustache.js/blob/master/mustache.js#...

[1]https://jsfiddle.net/1dsygwoj/

Thanks I added that on top of JsHtmlSanitizer.
That's super easy to get around. It only replaces the first occurrence of each.
You are right that was very silly of me. I got some real XSS filter instead.
Was that a bad idea posting it on a week day? :)
Not at all! A welcome distraction for a Friday afternoon.
It was, but I had to disable it for today. Too many xss loop holes.
great concept, just needs some more polish
Thanks for your feedback. The next things I will add are users and messages counters.
(comment deleted)
The leekspin is getting annoying.
How about only pulling messages and users from within your zoomed-in map bounds?
This is super, will fork it into a private chat with bunch of my friends.
(comment deleted)
Good to hear! This is my intention.

If you implement some new cool features, I'll be glad to merge them.

This has serious XSS holes which need fixing! Here is a PR that should do the job (not tested): https://github.com/idoco/map-chat/pull/1
I received an alert in my browser while using this site - should I be worried?
Looks like it's all fixed now :)
Yeah, I added some real XSS protection.

Before today, I thought it would be cool to enable some html :)

Yes, indeed the party is over. Going for beers now ;)
Thank you for your participation in my XSS hackathon experiment ;)
Ok I added a real XSS filter, lets hope that it holds :)
Poland stronk, wykop.pl :) Old working xss <>.''"".:/:/,,iframe=iframe=src <iframe src="javascript:window.alert('asd')"/>
Great work! Obviously ~300 lines of code isn't enough to do a full-fledged slick interface...but one suggestion that presumably would be easy to implement: a button that closes all current word-balloons.

I was also thinking a "reply" button for threaded discussions between users...but then that would kill the fun simplicity of the app...I just like seeing where HN users are currently this morning. And also, the ways people try to obfuscate XSS attacks

Thanks! The button to close all current balloons is at the top of my list :)

I'm afraid that a reply button might take out some of the fun and the simplicity, but I will conciser that.