Simple kitten placeholder | Hacker News Reader

Simple kitten placeholder

placekitten.com

133 pointsnanna27 comments

Pointless code snippet to replace every image on a webpage by a kitten (it fails for very small images, because of dumb randomization)

  function randInt() {
    return Math.round (Math.random() * 20 - 10)
  }
  for (const img of document.getElementsByTagName('img')) {
    img.src = `https://placekitten.com/g/${randInt() + img.width}/${randInt() + img.height}`
  }

Or turn it into a one-line immediately executed function, and you can add it as a bookmark and run it on pages that are not yours:

    javascript:(function b(){function randInt() {return Math.round (Math.random() * 20 - 10)};for (const img of document.getElementsByTagName('img')) {img.src = `https://placekitten.com/g/${randInt() + img.width}/${randInt() + img.height}`}})();

Create a bookmark with that as the URL, go to some page, click the bookmark, kittens everywhere, profit!

Many sites will also have a CSP that blocks placekitten.com along with other 3rd party img tag origins. Daring users on Firefox can circumvent this protection by browsing to about:config and setting security.csp.enabled to false.

Aye, CORS settings will break it, as will any images that get dynamically updated our loaded as you scroll etc. Also it won't catch images used as backgrounds. There are a lot of ways to break bookmarklets, intentionally, by application of security settings for other reasons (like, erm, security!), or accidentally.

Another opportunity for a shameless plug of my kitten-inspired website: IPKitten.com, which serves to give your IPv4 address, User Agent, and a ARIN-based IP address lookup to show the ISP.

https://ipkitten.com

Thank you for your work here! Not only is the info displayed handy (having several useful items all on a single page), but it brought a nice smile to my face! Kudos!

This has been my go-to placeholder site for the best part of a decade. Not because it necessarily works the best, but just because I always remember it.

For me that site has been Lorem pixel. I thought of it as soon as I read the title. Haven't used it in a while so not sure if it is any good now.

https://lorempixel.com

Nevermind, it is down. I just thought that the name was pretty cool and always remembered it.

AFAIK they rebranded as https://picsum.photos/

It works for me here?

I'm more of a https://www.placecage.com/ fan myself, though this placekitten site [0] apparently uses CC-licensed images, something that most of the novelty placeholder sites skirt.

[0] https://placekitten.com/attribution.html

i'm disappointed that when I put in 800x10 I just got a slice of a larger picture instead of lots of tiny kittens in a line

I enjoy https://www.fillmurray.com/

Similar, I always prefer hipster ipsum for sample text: https://hipsum.co/

Oh, oh my... Why do I love and hate that so much.

I created a custom HTML element to allow easier placement of kittens.

https://jsfiddle.net/Lytx27cg/1/

V2: gradients, à la https://i.pinimg.com/originals/97/23/44/9723443d55a5b0977178...

V3: genotype->phenotype simulation: https://www.basepaws.com/blog/cat-coat-genetics/

You need to make it so people can upload kitten pictures; and then people can vote on the kitten pictures; and then the pictures that are served cycle through the top [10].

Obviously, that could result in nefarious activities... but it would be cool if it could work.

Sadly the moment you let random people upload anything on the internet, you are no longer doing what it was you thought you were doing, and you are now dealing with all of the consequences of letting random people upload images to your application.

Years ago I abandoned a simple recipe creator/organizer side project when I started imagining what photos people would upload and what I would have to do about it.

No, absolutely not. That's like saying sed, awk, grep need more features. These are all specific tools. They do a job reliably and fast. Keep your bloat out of my tools. Please. thank you. Not everything in the world needs Social.

i've always wondered how they can afford paying for bandwidth costs...

Bandwidth is relatively cheap nowadays, plenty of hosts that offer a ton of bandwidth along with cheap hosting. And the images (at least on the homepage) are pretty small, clocking in at less than 10 KB each.

Aye. The images seem to be static: you always get the same one for any given size. So there isn't much work being done to serve them most of the time. I expect they have nginx configured to serve a file statically if found, and on error go to the script that will pic one, resize as needed, serve it, and also drop the result into place so next time that size it requested the image can be sent as a simple static file.

CPU time is often a limiting factor with shared or VPS hosting, this will most likely keep that from being where the bottleneck actually is. Or the hit of DB access, which this scheme would not need (at least not for most requests, perhaps there is a DB of images used when a request for a new size comes in).

I don't know what it is, but I feel uneasy embedding images from an unknown location into my site, even if just for dev.

What are other folks thoughts on security or potential downsides? Don't depend on it, even accidentally, It leaks information, if you are running "hidden" on the net, but placekitten.com will still know, images could get replaced, if you bundle the images via server side rendering, could attack imagemagick, and or parsing attacks and potentially include js in the payload.

If I were a dev image replacement service, what information or advantage could I gain?

Assuming it's only used in development:

- Early information on unreleased software / UIs; maybe you could jump the gun and introduce a concept faster.

- Access to customer data, if it's improperly censored / randomized after being pulled from a production database

- (advanced) Malware injection

- (advanced) Malicious code injection

Since you don't check for the image format you can get served a SVG image with embedded JavaScript and CSS that could potentially run in your website context. It's not that straightforward as just an image tag won't let attackers run any js by default, but inlining the image would.

I wouldn't suggest doing it as a direct call, but if you write a script that has a few methods of verifying that it actually is an image and then even converts it to a new image, it might be a little more safe. Sure, it might slow things down, but it's for dev, right? But that slowdown might be a good thing. Do you really need all of those images?

Reply on news.ycombinator.com