Skip to content

Instantly share code, notes, and snippets.

@jrwarwick
Created June 1, 2021 18:19
Show Gist options
  • Save jrwarwick/6b7b748f2a32ce208c4e3236ee3816e1 to your computer and use it in GitHub Desktop.
Save jrwarwick/6b7b748f2a32ce208c4e3236ee3816e1 to your computer and use it in GitHub Desktop.
Obscure element by ID automatically on a webpage
//just a little alternative to the eye-ball-icon revealer that is meant for sensitive information on a page (to mitigate shoulder-surfing attacks).
(function() {
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// Use event.pageX / event.pageY here
var sensitiveElement = document.getElementById("REPLACEME_PLAINTEXT_TEXT_BOX_ID");
var targetLoc = sensitiveElement.getBoundingClientRect();
var fudgeFactor = .025;
console.log(targetLoc.top +"-"+ event.pageY+" + "+targetLoc.right +"-"+ event.pageX);
var targetWidth = targetLoc.right - targetLoc.left;
var targetHeight = targetLoc.bottom - targetLoc.top;
console.log("width,height"+targetWidth+","+targetHeight);
blurFactor = Math.sqrt(fudgeFactor*Math.pow(targetLoc.bottom - targetHeight/2 - event.pageY,2) + fudgeFactor*Math.pow(targetLoc.left + targetWidth/2 - event.pageX,2)) / 101;
blurFactor = Math.min(Math.round(blurFactor * 1000) / 1000, .45);
console.log(blurFactor);
$(sensitiveElement).css("filter","blur("+ blurFactor + "rem)");
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment