pointer-events

by gcollazo

HTML

<h1>CSS-Only Clickjacking</h1>
<p>If you click on any of the links below your click will be passed to a hidden Facebook Like button (Click) or a Twitter Follow button (Dont' click) just below the links.</p>

<p>The magic is done with a simple CSS rule set in the style of the overlaying element.</p>

<pre>pointer-events: none;</pre>

<p class="extra-space">Links with hidden buttons behind:</p>
<div class="wrapper">
    <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Felweb&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=167204873351169" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
    <a href="#" class="facebook hide">Click</a>
    
    <a href="https://twitter.com/gcollazo" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @gcollazo</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    <a href="#" class="twitter hide">Don't click</a>
</div>

<p class="extra-space">Here you can see how the a tags are hidding the buttons:</p>
<div class="wrapper">
    <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Felweb&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=167204873351169" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
    <a href="#" class="facebook show">Click</a>
    
    <a href="https://twitter.com/gcollazo" class="twitter-follow-button" data-show-count="false" data-size="large">Follow...

CSS

.wrapper a.facebook {
    position: absolute;
    padding:5px 46px 5px 15px;
    margin:3px 0 0 -97px;
    pointer-events:none; /* here */
}

.wrapper a.twitter {
    position:absolute;
    padding:10px 40px 5px 40px;
    margin:-2px 0 0 -147px;
    pointer-events:none;  /* here */
}

a.hide {
    background-color:white;
}

a.show {
    background-color: rgba(255,0,0,0.5);
}

/* ====== Style ====== */
body {
    margin:20px;
    font-family: Helvetica, Arial, Tahoma;
    color:#333;
}

h1 {
    font-weight:bold;
    font-size:120%;
    margin-bottom:20px;
}

.wrapper {
    margin-top:20px;
}

pre {
    padding:10px;
    background-color:#eee;
    border: 1px solid #ddd;
}
p {
    padding-bottom:10px;
}

.extra-space {
    margin-top:30px;
}