Anti-pager for paranoiac in Safari
Good time of day, my dear paranoid! Of course, you’ve heard about all the hidden utilities designed to brazenly bury your secret data (passwords, contact information, credit card details, etc.) by reading the clipboard, as well as keystrokes at the hardware-software level, when you enter them in the browser . One of the ways to minimize risks is to use a virtual keyboard.
There are built-in solutions (for example, a virtual keyboard in Windows), however, as we suspect, it is theoretically possible to determine which values are entered using such a tool by obtaining (X, Y) of our precious mouse. To get out of the situation just shuffle the layout of the virtual keyboard! What? Shuffle the layout? This is wildly uncomfortable! - you exclaim. And you will be right, however, paranoid until it stops ...
To be honest, the idea of mixing the layout has been spied on in one large bank - there is no field on the website for entering bank card details and it is suggested to enter the number through the virtual keyboard, and the numbers in the “calculator” panel are rearranged in places. Let's do something similar for any site => we make our browser extension! # As an example, use Safari.
')
In order not to suffer too much - let's take a ready-made virtual keyboard on javascript / css from here and slightly modify it.
As can be seen from the “main form”, our virtual keyboard is a simple ul-li structured list, it turns the attached css file into a virtual keyboard, and the js script that changes the corresponding button characteristics (visibility, register, etc.) is processed by pressing.
First, we will add some modifications to the styles, adding a #keycont dependency, thereby isolating our keyboard styles from the styles on the page on which we will use it as follows:
Modifications give us the opportunity to see the keyboard adequately, on top of the page, strictly in the center + some cross-browser functionality has been added to smooth the buttons. We omit other modifications, they are not so important.
Further we will finish on a js-script. Add the shuffle function:
It will change the position of the buttons on the keyboard. The next step is to add elements of "buttons" for mixing. For simplicity, we will shuffle the keys within the horizontal layout (not quite clean, but quite enough for our needs):
Keyboard is assembled!
Remaining small things remain - the keyboard is not always needed on the page, but only in those cases when we are going to enter something in the “secret” fields, and there may be several of these fields on the page (in this release we’ll catch the password entry fields by known property). Therefore, we add a couple of new functions for activating / deactivating (hiding / showing) the keyboard:
That's all the magic, if not go further.
Keyboard features: relative cross-browser compatibility, key shuffling when reloading the page (for different tabs, the keyboard shuffles independently), javascript is required, there may be implicit pitfalls.
Tested on a number of popular resources:
Unfortunately, it did not work in Google and iCloud, most likely there are specific moments on these resources.
I did the keyboard for a long time, so I apologize for the not-too-detailed description.
Build extensions for Safari can be downloaded from this link . It is installed and activated in Safari through the tab “Developer”, about how to do this - ask your favorite search engine.
PS you can customize the keyboard to your liking (catch the input fields of bank cards and other specific fields of your favorite sites), mixing the buttons is disabled by removing the corresponding line in the code.
Enjoy health, good luck!
There are built-in solutions (for example, a virtual keyboard in Windows), however, as we suspect, it is theoretically possible to determine which values are entered using such a tool by obtaining (X, Y) of our precious mouse. To get out of the situation just shuffle the layout of the virtual keyboard! What? Shuffle the layout? This is wildly uncomfortable! - you exclaim. And you will be right, however, paranoid until it stops ...
To be honest, the idea of mixing the layout has been spied on in one large bank - there is no field on the website for entering bank card details and it is suggested to enter the number through the virtual keyboard, and the numbers in the “calculator” panel are rearranged in places. Let's do something similar for any site => we make our browser extension! # As an example, use Safari.
')
In order not to suffer too much - let's take a ready-made virtual keyboard on javascript / css from here and slightly modify it.
Basic form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Online Keyboard</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="container"> <textarea id="write" rows="6" cols="60"></textarea> <ul id="keyboard"> <li class="symbol"><span class="off">`</span><span class="on">~</span></li> <li class="symbol"><span class="off">1</span><span class="on">!</span></li> <li class="symbol"><span class="off">2</span><span class="on">@</span></li> <li class="symbol"><span class="off">3</span><span class="on">#</span></li> <li class="symbol"><span class="off">4</span><span class="on">$</span></li> <li class="symbol"><span class="off">5</span><span class="on">%</span></li> <li class="symbol"><span class="off">6</span><span class="on">^</span></li> <li class="symbol"><span class="off">7</span><span class="on">&</span></li> <li class="symbol"><span class="off">8</span><span class="on">*</span></li> <li class="symbol"><span class="off">9</span><span class="on">(</span></li> <li class="symbol"><span class="off">0</span><span class="on">)</span></li> <li class="symbol"><span class="off">-</span><span class="on">_</span></li> <li class="symbol"><span class="off">=</span><span class="on">+</span></li> <li class="delete lastitem">delete</li> <li class="tab">tab</li> <li class="letter">q</li> <li class="letter">w</li> <li class="letter">e</li> <li class="letter">r</li> <li class="letter">t</li> <li class="letter">y</li> <li class="letter">u</li> <li class="letter">i</li> <li class="letter">o</li> <li class="letter">p</li> <li class="symbol"><span class="off">[</span><span class="on">{</span></li> <li class="symbol"><span class="off">]</span><span class="on">}</span></li> <li class="symbol lastitem"><span class="off"></span><span class="on">|</span></li> <li class="capslock">caps lock</li> <li class="letter">a</li> <li class="letter">s</li> <li class="letter">d</li> <li class="letter">f</li> <li class="letter">g</li> <li class="letter">h</li> <li class="letter">j</li> <li class="letter">k</li> <li class="letter">l</li> <li class="symbol"><span class="off">;</span><span class="on">:</span></li> <li class="symbol"><span class="off">'</span><span class="on">"</span></li> <li class="return lastitem">return</li> <li class="left-shift">shift</li> <li class="letter">z</li> <li class="letter">x</li> <li class="letter">c</li> <li class="letter">v</li> <li class="letter">b</li> <li class="letter">n</li> <li class="letter">m</li> <li class="symbol"><span class="off">,</span><span class="on"><</span></li> <li class="symbol"><span class="off">.</span><span class="on">></span></li> <li class="symbol"><span class="off">/</span><span class="on">?</span></li> <li class="right-shift lastitem">shift</li> <li class="space lastitem"> </li> </ul> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/keyboard.js"></script> </body> </html> Styles
* { margin: 0; padding: 0; } body { font: 71%/1.5 Verdana, Sans-Serif; background: #eee; } #container { margin: 100px auto; width: 688px; } #write { margin: 0 0 5px; padding: 5px; width: 671px; height: 200px; font: 1em/1.5 Verdana, Sans-Serif; background: #fff; border: 1px solid #f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #keyboard { margin: 0; padding: 0; list-style: none; } #keyboard li { float: left; margin: 0 5px 5px 0; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #fff; border: 1px solid #f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .capslock, .tab, .left-shift { clear: left; } #keyboard .tab, #keyboard .delete { width: 70px; } #keyboard .capslock { width: 80px; } #keyboard .return { width: 77px; } #keyboard .left-shift { width: 95px; } #keyboard .right-shift { width: 109px; } .lastitem { margin-right: 0; } .uppercase { text-transform: uppercase; } #keyboard .space { clear: left; width: 681px; } .on { display: none; } #keyboard li:hover { position: relative; top: 1px; left: 1px; border-color: #e5e5e5; cursor: pointer; } Click processing
$(function(){ var $write = $('#write'), shift = false, capslock = false; $('#keyboard li').click(function(){ var $this = $(this), character = $this.html(); // If it's a lowercase letter, nothing happens to this variable // Shift keys if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { $('.letter').toggleClass('uppercase'); $('.symbol span').toggle(); shift = (shift === true) ? false : true; capslock = false; return false; } // Caps lock if ($this.hasClass('capslock')) { $('.letter').toggleClass('uppercase'); capslock = true; return false; } // Delete if ($this.hasClass('delete')) { var html = $write.html(); $write.html(html.substr(0, html.length - 1)); return false; } // Special characters if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); if ($this.hasClass('space')) character = ' '; if ($this.hasClass('tab')) character = " "; if ($this.hasClass('return')) character = " "; // Uppercase letter if ($this.hasClass('uppercase')) character = character.toUpperCase(); // Remove shift once a key is clicked. if (shift === true) { $('.symbol span').toggle(); if (capslock === false) $('.letter').toggleClass('uppercase'); shift = false; } // Add the character $write.html($write.html() + character); }); }); As can be seen from the “main form”, our virtual keyboard is a simple ul-li structured list, it turns the attached css file into a virtual keyboard, and the js script that changes the corresponding button characteristics (visibility, register, etc.) is processed by pressing.
First, we will add some modifications to the styles, adding a #keycont dependency, thereby isolating our keyboard styles from the styles on the page on which we will use it as follows:
#keycont { display: none; position: fixed !important; top: 50% !important; left: 50% !important; font: normal 14px/1.5 Verdana, Sans-Serif !important; color: #444 !important; text-shadow: none !important; background-color: #eee !important; padding: 5px 0 0 5px !important; margin: 0; -moz-border-radius: 5px !important; -webkit-border-radius: 5px !important; -webkit-user-select: none !important; z-index:999999999 !important; } Modifications give us the opportunity to see the keyboard adequately, on top of the page, strictly in the center + some cross-browser functionality has been added to smooth the buttons. We omit other modifications, they are not so important.
Further we will finish on a js-script. Add the shuffle function:
Array.prototype.shuffle = function( b ) { var i = this.length, j, t; while( i ) { j = Math.floor( ( i-- ) * Math.random() ); t = b && typeof this[i].shuffle!=='undefined' ? this[i].shuffle() : this[i]; this[i] = this[j]; this[j] = t; } return this; }; It will change the position of the buttons on the keyboard. The next step is to add elements of "buttons" for mixing. For simplicity, we will shuffle the keys within the horizontal layout (not quite clean, but quite enough for our needs):
//Constructing keyboard var keyboard = '<div id="keycont"><ul id="keyboard">'; var line0 = new Array('<li class="symbol"> <span class="off">`</span> <span class="on">~</span> </li>', '<li class="symbol"> <span class="off">1</span> <span class="on">!</span> </li>', '<li class="symbol"> <span class="off">2</span> <span class="on">@</span> </li>', '<li class="symbol"> <span class="off">3</span> <span class="on">#</span> </li>', '<li class="symbol"> <span class="off">4</span> <span class="on">$</span> </li>', '<li class="symbol"> <span class="off">5</span> <span class="on">%</span> </li>', '<li class="symbol"> <span class="off">6</span> <span class="on">^</span> </li>', '<li class="symbol"> <span class="off">7</span> <span class="on">&</span> </li>', '<li class="symbol"> <span class="off">8</span> <span class="on">*</span> </li>', '<li class="symbol"> <span class="off">9</span> <span class="on">(</span> </li>', '<li class="symbol"> <span class="off">0</span> <span class="on">)</span> </li>', '<li class="symbol"> <span class="off">-</span> <span class="on">_</span> </li>', '<li class="symbol"> <span class="off">=</span> <span class="on">+</span> </li>'); var line1 = new Array('<li class="letter">q</li>', '<li class="letter">w</li>', '<li class="letter">e</li>', '<li class="letter">r</li>', '<li class="letter">t</li>', '<li class="letter">y</li>', '<li class="letter">u</li>', '<li class="letter">i</li>', '<li class="letter">o</li>', '<li class="letter">p</li>', '<li class="symbol"> <span class="off">[</span> <span class="on">{</span> </li>', '<li class="symbol"> <span class="off">]</span> <span class="on">}</span> </li>', '<li class="symbol lastitem"> <span class="off">\</span> <span class="on">|</span> </li>'); var line2 = new Array('<li class="letter">a</li>', '<li class="letter">s</li>', '<li class="letter">d</li>', '<li class="letter">f</li>', '<li class="letter">g</li>', '<li class="letter">h</li>', '<li class="letter">j</li>', '<li class="letter">k</li>', '<li class="letter">l</li>', '<li class="symbol"> <span class="off">;</span> <span class="on">:</span> </li>', '<li class="symbol"> <span class="off">'</span> <span class="on">"</span> </li>'); var line3 = new Array('<li class="letter">z</li>', '<li class="letter">x</li>', '<li class="letter">c</li>', '<li class="letter">v</li>', '<li class="letter">b</li>', '<li class="letter">n</li>', '<li class="letter">m</li>', '<li class="symbol"> <span class="off">,</span> <span class="on"><</span> </li>', '<li class="symbol"> <span class="off">.</span> <span class="on">></span> </li>', '<li class="symbol"> <span class="off">/</span> <span class="on">?</span> </li>'); line0.shuffle(); line1.shuffle(); line2.shuffle(); line3.shuffle(); keyboard += line0.join(""); keyboard += '<li class="delete lastitem">delete</li>'; keyboard += '<li class="tab">tab</li>'; keyboard += line1.join(""); keyboard += '<li class="capslock">caps lock</li>'; keyboard += line2.join(""); keyboard += '<li class="return lastitem">return</li>'; keyboard += '<li class="left-shift">shift</li>'; keyboard += line3.join(""); keyboard += '<li class="right-shift lastitem">shift</li>'; keyboard += '<li class="space lastitem"> </li>'; keyboard+='</ul></div>'; $('body').append(keyboard); Keyboard is assembled!
Remaining small things remain - the keyboard is not always needed on the page, but only in those cases when we are going to enter something in the “secret” fields, and there may be several of these fields on the page (in this release we’ll catch the password entry fields by known property). Therefore, we add a couple of new functions for activating / deactivating (hiding / showing) the keyboard:
$write.focus(function(){ $write = $(this); $keycont.fadeIn(); wrfocus = true; }); $write.focusout(function(){ if (focusss == false) {wrfocus=false; $keycont.fadeOut();} }); $keycont.hover( function(){ if (wrfocus == true) focusss = true; }, function(){ focusss = false; } ); $keycont.focusout(function(){ if (focusss == false) {wrfocus=false; $keycont.fadeOut();} }); $keycont.click(function(){ focusss = true; if (wrfocus == true) $write.focus(); }); That's all the magic, if not go further.
Keyboard features: relative cross-browser compatibility, key shuffling when reloading the page (for different tabs, the keyboard shuffles independently), javascript is required, there may be implicit pitfalls.
Tested on a number of popular resources:
For Habrahabr
For facebook
For VK
For stackoverflow
Unfortunately, it did not work in Google and iCloud, most likely there are specific moments on these resources.
I did the keyboard for a long time, so I apologize for the not-too-detailed description.
Build extensions for Safari can be downloaded from this link . It is installed and activated in Safari through the tab “Developer”, about how to do this - ask your favorite search engine.
PS you can customize the keyboard to your liking (catch the input fields of bank cards and other specific fields of your favorite sites), mixing the buttons is disabled by removing the corresponding line in the code.
Enjoy health, good luck!
Source: https://habr.com/ru/post/312646/
All Articles