16 ms·
CSS in GitHub Readmes
- suyash 6y agoclever and cool!
- kodah 6y agoCan't SVG's also be used to run code? Yes, you can: https://stackoverflow.com/questions/5378559/including-javascript-in-svg https://stackoverflow.com/questions/5378559/including-javasc... brb as I write a follow up article.
- guessmyname 6y agoYes, that’s what I am thinking. I can imagine hundreds of security researchers writing a proof of concept to report this “feature” as a security problem to GitHub’s bug bounty program.
- bamboleo 6y agoThere’s nothing to report. For all intents and purposes SVG files are treated exactly like images. All interactivity and even the ability to load other resources is disabled. FYI millions of readmes have had SVG badges for years.
- fractionalhare 6y agoPretty sure they're just making a joke that a lot of bug bounty programs get tons of bullshit reports from security "researchers" who don't understand what they're doing. They're not actually claiming there's a legitimate issue.
- jancsika 6y agoI'm not sure that's true. For example, what happens when you right-click "View image" on an svg file? Does embedded JS get run in that case?
- throw_m239339 6y ago> For example, what happens when you right-click "View image" on an svg file? Does embedded JS get run in that case? Servers can use CSP http headers to disable javascript execution completely AFAIK. Obviously older browsers like IE that do not support CSP will be vulnerable, but at that point, IE should be simply banned by Webservers, for the sake of the user.
- xml 6y agoThere are SVGs which will crash most browsers, so SVGs could still be abused for denial-of-service attacks. For example, you could post one of those SVGs in every issue thread of a GitHub project if you wanted to mess with someone. Not eligible for a bug bounty though since this issue has been known (but not fixed) for years.
- frabjoused 6y agoI just tried this in a Github readme, it looks like Github removes the JS. Would be interesting to try to find a hole in this.
- bamboleo 6y agoThere is no hole. The SVG is loaded as an image. If you find a hole, it would be in the browser’s handling of SVG images, which would be a pretty big hole.
- chrismorgan 6y agoWhen you load an SVG file as an image, JavaScript is not executed, but SMIL animations and CSS (which includes animations) are. If you open the SVG file directly, then JavaScript will be executed. But any hosting platforms that hosts your content on their domain should filter out any JavaScript on SVG as it would on HTML.
- inetknght 6y ago> But any hosting platforms that hosts your content on their domain should filter out any JavaScript on SVG as it would on HTML. That's definitely not a thing that happens. Web servers just serve the file as-is.
- mormegil 6y agoThe point is they either need to filter the served content, or serve it from a different domain (e.g. githubusercontent.com), otherwise you have XSS-like problems.
- michaelmior 6y agoMy understanding is that things like this are one of the reasons GitHub moved GitHub Pages subdomains from github.com to github.io.
- deleted 6y ago[deleted]
- Kiro 6y agoSee https://news.ycombinator.com/item?id=25350248 https://news.ycombinator.com/item?id=25350248
- felixfbecker 6y agoGitHub raw endpoints do it. They will either serve the SVG without an image/svg+xml Content-Type, making it not render in the browser, or you have to append ?sanitize=true to the URL which will, as the name suggest, sanitize it.
- NiekvdMaas 6y agoGitHub uses Camo [1] to serve assets like images and SVG files. It removes any "dangerous" code like JS from the file before serving it from a GitHub CDN. 1. https://github.com/atmos/camo https://github.com/atmos/camo
- wruza 6y agoAh svg, reminds me these fine windows metafile days. Seriously, can we stop inventing formats that execute arbitrary code under the hood?
- colejohnson66 6y agoThe problem isn’t SVG necessarily. It’s a nice vector format with many hidden features available to those who explore (especially with SVG 2 around the corner). The problem is JavaScript. Unfortunately, there’s not much one can do if they want interactive images[a][b] short of a Turing Complete language. And if you’re going to need that, JavaScript’s right there (for better or for worse). [a]: Embedding the SVG directly into the HTML and manipulating it using the JavaScript in the HTML is an option, but not many people do that [b]: We can argue all we want about whether we should be making interactive images in the first place, but the fact of the matter is, either you add it to your format, or someone else will
- gitgud 6y agoCan svg's even do anything malicious with that capability?
- eyelidlessness 6y agoWhere they can execute JS, they can do so in the same security context as the containing document. So, yeah, they can be used in situ for any privacy or security intrusion that a script tag can.
- felixfbecker 6y agoThis is not entirely correct. An SVG file embedded in an <iframe> or <object> is a document itself, and if cross-origin, can not access the outer document. However, if not in a sandboxed iframe, it can still do things like trigger alert prompts or navigation.
- porphyra 6y agoI think allowing scripts and stuff in SVGs was a huge mistake that is why they are still not widely supported yet. For example you can't upload or send SVGs as images in typical messaging services or image sharing sited, in part because it would be a security vulnerability. But as a consequence now we (still) have no easily portable vector format :'(
- identity0 6y agoSVG is still a stupid format. Who wants to send image data through XML? It would be like sending a raster image through a big JSON array.
- onion2k 6y agoWho wants to send image data through XML? SVGs aren't image data. They're a set of instructions for recreating image data using a structured language. XML is very good for data like that.
- saagarjha 6y agoAnd their text format is exceedingly useful if you're writing code to generate them.
- IshKebab 6y agoI don't think it would really be any more difficult if it were binary. The only real reason to use XML is better integration with HTML, CSS and JavaScript, which is admittedly a compelling reason. But I think he's right - it would be nice if there was a "proper" binary vector format that was widely supported.
- saagarjha 6y agoI mean, I can write a line of Python that goes print(f"""<rect x="{x}" y="{y}" width="{w}" height="{h}"/>""") I find this eminently easier than working with a binary format.
- favorited 6y agoOne version of the SVG standard had raw socket support, which thankfully was removed. They basically wanted everything that Flash had.
- rhacker 6y agoThat can be a better way to do terminal sessions in readmes instead of animated gifs.
- Cloudef 6y agoThere's already https://github.com/nbedos/termtosvg https://github.com/nbedos/termtosvg for that purpose
- derefr 6y agoSadly, SVG still doesn't let you pause the animation, let alone copy-and-paste embedded text. Given the number of Github projects that want terminal "demonstrations", I'm surprised Github hasn't just provided first-party support for it (with e.g. a fancy renderer for script(1) code-embeds, that would play back the script session by writing regular DOM text nodes; and which would give you transport controls to pause, scrub through, skip around, etc.) While they're at it, they could also allow embedding of some kind of slide-deck format. Using GIFs for slides has all the same problems. (Hopefully nothing as fancy/complex as PPT; more like a basic-PostScript-profile PDF renderer, that would auto-carousel through the PDF's pages, until you begin interacting with it.)
- nitrogen 6y agoDoes :focus or :hover apply to CSS in SVG in an <img/> tag? If so, you could use those to implement a sort of pause by combining with the next-sibling operator (actually I really really like the + operator in CSS selectors, because a lot of things that people think you need JS to do can be done with a combination of :focus and +).
- runarberg 6y ago> Sadly, SVG still doesn't let you pause the animation Not even through `animation-play-state: paused;`? e.g: :hover { animation-play-state: paused; }
- uponcoffee 6y agoThe termtosvg repo linked by another commentor seems to have a pausable example in their examples gallery, so it appears to be doable.
- rglover 6y agoWow, you can even do media queries with this. Lots of ideas!
- pelasaco 6y agoLet's see how many days it takes to Samy 2020 reborn Reference: https://samy.pl/myspace/tech.html https://samy.pl/myspace/tech.html
- antirez 6y agoMaybe to focus just on the content, for that special place of the web that Github is, made some sense as well.
- boomskats 6y agoIf anyone's interested, I'm particularly proud of my SVG animations in this readme: https://github.com/boemska/create-sas-app https://github.com/boemska/create-sas-app
- jrib 6y agowhat did you use to create them?
- deleted 6y ago[deleted]
- arusahni 6y agoBased on the SVG markup, termtosvg [1]. 1: https://github.com/nbedos/termtosvg https://github.com/nbedos/termtosvg
- conceptualspace 6y agoah i could have used this. my readme is a simulation of a github profile ;) https://github.com/conceptualspace https://github.com/conceptualspace
- notretarded 6y agoAwfully laggy on slow machines.
- vikbez 6y agoFun :D it remembers me when I did this index.svg page like 10 years ago: https://vik.io/index.svg https://vik.io/index.svg I then used svg animation, but still seems to work perfectly today !
- kdeldycke 6y agoSVG seems like a under-utilized method! ;)
- iso8859-1 6y agoWhat are your opinions on SVG Animation vs CSS?
- vikbez 6y agoWell you can do amazing things with svg animations; there are a lot of interesting examples here that would be hard to reproduce in CSS: https://css-tricks.com/guide-svg-animations-smil/ https://css-tricks.com/guide-svg-animations-smil/ (like try to do the car following a line example in css ...) but I try to stick to css animations for better "reviewability" of the code. SVG animation is a niche thing :)
- pickledcods 6y agoYou can use scripted SVG in combination with github pages HTML using: <embed src="scripted-svg.svg" type="image/svg+xml" width="200" height="200"> I couldn't get it working with README.md, so tipping the hat to the author! The only problem and with the experience I got trying using it, is that the concept of viewport is botched. I was hoping that the embedded JS would have working metrics for the viewed width/height, which it does not. That means that mouse events and such have transformed coordinates, not matching the position of the cursor. I have this small project demonstrating the ways embedded JS gets rendered. I think I'm going to revise it and see if both projects can be merged. https://github.com/xyzzy/scripted-svg https://github.com/xyzzy/scripted-svg
- bamboleo 6y agoThe whole point is that SVG images are basically never loaded with the embed tag, which is the reason why this is innocuous. Embed is basically like using iframe, so where one is blocked, the other one is too. The author simply loaded the SVG via the image tag, which renders it inert.
- pickledcods 6y agoTrue, I started optimistic seeding much potential in possibilities to extend HTML only to discover that embedded javascript only works when the SVG is the main URL target or wrapped in <object> or <iframe>. Sad actually.
- dheera 6y agoAll I see is an embedded SVG (?) not actual CSS in the readme. I mean for that matter I could just use an iFrame to embed a HTML file.
- keithnz 6y agoyou need to look at the svg code, svg can embed html/css/js
- nathell 6y agoNeat, but doesn't work in GitHub's Android app.
- remoquete 6y agoNeat, and quite fun, but that’s not what essential documentation is for.
- felixfbecker 6y agoIf only this was accessible. All a screen reader will announce is "image" plus the alt text, you cannot navigate any of the text inside the SVG when it's embedded with <img>. I was always surprised that noone ever talks about this with regard to SVG badges in readmes. You can if it's embedded with <object> or <iframe> though, but GitHub doesn't allow that in markdown (just like they don't allow many useful things like <video>, forcing people to use GIFs instead). <iframe> actually being the more secure option here because you can disallow all scripts using <iframe sandbox> (and GitHub could easily enforce that). <iframes> still can't stretch to the content though without using JS even in 2020.
- firloop 6y agoI imagine the hard part of securing <iframe /> tags isn't the sandbox, but instead maintaining user privacy. GitHub caches and proxies all of the images they render. One of the benefits of this is that a 3rd party can't fingerprint or otherwise log information about the requester. Seems a lot harder to get that right in the <iframe /> case.
- cj 6y agoIt's technically possible to have an iframe with no "src" (not loading from a 3rd party) but still embed html/css inside the frame for sandboxing purposes. I believe the sandbox attribute would also block javascript / scripts, although not sure what cross browser support on that looks like.
- felixfbecker 6y agoYou can still cache an SVG embedded through <iframe> the same way you cache an SVG embedded through <img>. It's just an HTTP exchange. The sandbox attribute and a CSP can make sure no external content is loaded inside the SVG either (not even external images, fonts etc).
- TooCreative 6y agoI doubt iframes can stretch to the content even with JS. Maybe for special cases, where the content is from the same domain or is actively messaging the size outwards so you can code some interplay between the outer page and the iframe. But neither side can do it alone.
- retox 6y agoPlease don't turn github into myspace
- valtism 6y agoIt's too late https://github.com/bdougie https://github.com/bdougie
- 2bitencryption 6y agocan you escape the "sandbox" and alter CSS values from the github.com host itself? i.e. make the "login" button invisible, hide some text, etc?
- jrochkind1 6y agoHa, there seems to be no way to get github to show you the actual source of this SVB (of any SVG?) https://raw.githubusercontent.com/sindresorhus/css-in-readme-like-wat/master/header.svg https://raw.githubusercontent.com/sindresorhus/css-in-readme...
- programbreeding 6y agoDo you mean this: https://github.com/sindresorhus/css-in-readme-like-wat/blame/master/header.svg https://github.com/sindresorhus/css-in-readme-like-wat/blame... ?
- jrochkind1 6y agoYes! You had to do a `blame` view to get it? OK!
- bamboleo 6y agoWhat do you want to do exactly? On the repo, click the SVG file and then “Source”
- izgzhen 6y agohttps://dochost.me https://dochost.me Shameless promotion of a tool for hosting fancy rendered CSS/HTML in Github as a permalink w/ comment box.
- mariopt 6y agoIsn't this a privacy issue? You can track when someone loads the readme.md on the browser with a remote background image/fonts.
- coddle-hark 6y agoYou’ve been able to load remote images forever, that’s how badges work. Yes it’s a privacy issue but it’s worth it because when these backends go down (which they do, often) you get a readme full of broken images.
- bamboleo 6y agoIt’s not a privacy issue because GitHub proxies and caches the images probably since 2016
- axihack 6y agoSome useful information about SVG security here https://www.w3.org/wiki/SVG_Security https://www.w3.org/wiki/SVG_Security
- joshspankit 6y agoGood lord. What have you done??
- keyle 6y agoI've never understood people that spend so much time making their README pretty with emojis, fancy tables etc. Don't get me wrong, documenting your work is very important, but do it efficiently. Github Readme's are turning more and more into developer myspace. Just keep it text, to the point, start with why someone should care, then once they care, show them how to use it. When I see some kind of video embed, it's a huge turn off, I don't want to watch some animation of your typos at high speed, or your fish terminal. "Show me the money". Edit: my point is: spend your time making your code better, sorting, fixing and clear your issues and merge or reject decade old PRs /s
- tenaciousDaniel 6y ago> developer myspace I don't think a better description is possible
- godot 6y agoI feel like GitHub has been taking a direction of a "social network for developers" for a while now, so that description is probably accurate.
- eyelidlessness 6y agoIt’s been that 100% of its existence.
- ulisesrmzroche 6y agoI’ve never understood hn fascination with boring and ugly plain text sites. Reminds me of the infamous Dropbox comment.
- judge2020 6y ago> Reminds me of the infamous Dropbox comment. For reference: https://news.ycombinator.com/item?id=9224 https://news.ycombinator.com/item?id=9224
- 6y ago
- app4soft 6y agoFor 2021 we need more CPU & power-up cooling system just to read `README.md`
- iso8859-1 6y agoIs it possible to make a cryptocurrency with a proof of work that CSS can execute? That way, you could fund your project without ads, and even for users who have disabled JavaScript. Win-Winning!
- app4soft 6y ago> ... and even for users who have disabled JavaScript. Win-Winning! Nice try, but you would not get any fund from those users who already use Links2 or Lynx![0] ;P $ links2 -g https://github.com/sindresorhus/css-in-readme-like-wat Only those users who use "modern browsers" or at least Netsurf/Hv3/Dillo/Browsh still may support you.[1,2,3] [0] https://news.ycombinator.com/item?id=16191843 https://news.ycombinator.com/item?id=16191843 [1] https://www.informit.com/articles/article.aspx?p=600978&seqNum=2 https://www.informit.com/articles/article.aspx?p=600978&seqN... [2] http://www.kompx.com/en/lightweight-web-browsers-for-linux.htm http://www.kompx.com/en/lightweight-web-browsers-for-linux.h... [3] https://www.hanselman.com/blog/lynx-is-dead-long-live-browsh-for-textbased-internet-browsing https://www.hanselman.com/blog/lynx-is-dead-long-live-browsh...
- taviso 6y agoThat's funny, I was just playing around with making popup-ads in README.md this weekend! https://lock.cmpxchg8b.com/tektronix.html https://lock.cmpxchg8b.com/tektronix.html
- slmjkdbtl 6y agoDOOM when?
- the_arun 6y agoThis is supercool!
- LeoNatan25 6y agoBroken on mobile.
- tpoacher 6y agogotta love that repo name tho
- jonny383 6y agoHow long now until GitHub is the MySpace of source code?
- welder 6y agoTLDR: <img src="header.svg" />
- no_wizard 6y agoThis is neat. I'm a little worried it'll get abused. Actually, I know it will. However, when I do come across it being used well, it'll be neat! I have to say though, the developer (sindresorhus) is got to be one of the most prolific NPM package maintainers of all time, they have hundreds (if not thousands) of actively maintained packages. I know a lot of them are single use modules, but still, thats quite something! And the quality isn't bad. Where does one find the time!
- stevage 6y ago> Not an animated GIF Actually, an animated SVG. Sigh.
- ElijahLynn 6y agoMyspace has come to GitHub.
- jstrieb 6y agoCoincidentally, I have a project using the same technique that periodically regenerates animated SVGs based on changing data for use specifically on GitHub. The generated images are styled with CSS in imitation of the actual GitHub site. Since I could "borrow" the CSS actually used on GitHub, it was possible to make the images look like a natural part of the real UI. https://github.com/jstrieb/github-stats/ https://github.com/jstrieb/github-stats/
- rognjen 6y agoI love things like this. They're so clever and creative while at the same time pointing out the absurdity of not having normal CSS.
- metahost 6y agoIf anyone's interested, I've been doing something quite similar for some time now on GitHub's readme.md. See: github.com/say4n/