Created
June 1, 2021 18:19
-
-
Save jrwarwick/6b7b748f2a32ce208c4e3236ee3816e1 to your computer and use it in GitHub Desktop.
Obscure element by ID automatically on a webpage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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