2

I have a credit card site that I need to create an account on. Apparently they want their account holders to use the same password on all websites so they have to pay out as much money as possible when the next big account breach happens. Toward this end they've decided to disable the clipboard use on the password field on their website to discourage their account holders from using password managers.

It's really strange that the Paste menu item in the browser context menu is greyed out for Firefox and IE11 users. For Chrome users the paste and paste as plain text context menu items are missing altogether.

I've been looking at the markup and JavaScript on their site and see that they've added event listeners to the keyboard and mouse events to block clipboard access to the password field, but what's really baffling is how they've managed to change the contents of the context menu that appears when the user right clicks on an input in a browser. The password field is just an input element with type of password.

<input readonly tabindex="51" maxlength="20" style="height: 22px; width: 200px;" class="gwt-PasswordTextBox gwt-PasswordTextBox-readonly gwt-Focus" type="password">

I'm not really interested in how to block Ctrl-V or intercepting the mouse's paste access to a field via JavaScript. I know how to do that. My question is how are they changing the contents of the browser's Context Menu. See the proof-of-concept on my answer for why this isn't the same as the other question.

Eric
  • 2,861
  • 6
  • 28
  • 59
  • have you tried $(':password').on('paste', function (e) {e.preventDefault();}); ? – gaetanoM Mar 25 '16 at 15:41
  • 1
    Wait so.... what's the question? Title, sure, but then you said that it's grayed out in FF/IE and gone entirely in Chrome... which sounds exactly like what you wanted. Also, nice dig in the first paragraph. I assume you've brought this up to the client and basically been told you know nothing =P – abluejelly Mar 25 '16 at 15:43
  • This suggestions looks good http://ux.stackexchange.com/a/21070/53965 Don't have two fields, show a confirmation where they can verify visually that it's the right email – Ruan Mendes Mar 25 '16 at 15:57
  • This same credit card company doesn't want their passwords to be longer than 9 characters either. What do you think this is buddy, Fort Knox? – Eric Mar 25 '16 at 16:36
  • 9 character limit for passwords, do they also not allow special characters? – Ruan Mendes Mar 25 '16 at 17:25

2 Answers2

2

It shouldn't really be a matter of adjusting the context menu (unless that's a design spec. for you), but rather, you just need to disable the paste functionality.

This example shows how to "kill" paste for a given element. Remember, it will still show paste on the context menu, but the behavior won't work in the first password field:

window.addEventListener("DOMContentLoaded", function(){

  var p1 = document.getElementById("p1");
  p1.addEventListener("paste", function(evt){
      evt.preventDefault();
      evt.stopPropagation();
  });

});
<input type="password" id="p1" placeholder="Paste won't work in me.">
<input type="password" id="p2" placeholder="Paste will work in me.">

Now, if you really do need to adjust the context menu, the best cross-browser way is to handle the contextmenu event on the element and prevent the default behavior of that event (just as I've prevented the paste behavior in the snippet), but then display a previously prepared, but just hidden dialog of your own. See this for more details:http://www.sitepoint.com/building-custom-right-click-context-menu-javascript/

Also, see: https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu for more on the contextmenu event.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • That's the kind of thing I know how to do, what I really want to know is how you grey out (FF and IE) or remove altogether (Chrome) the paste context menu item that appears when I right click on a password field in the browser. It's not my design spec. I think it's a terrible idea, I just want to know how it can be done. – Eric Mar 25 '16 at 15:47
  • @Eric To modify the existing context menu, you'll need to create specific solutions for specific clients. A better approach is to make your own context menu. See my updated answer for details. – Scott Marcus Mar 25 '16 at 15:51
0

I looked at this a little more with another guy here at work. The readonly attribute in the input is why the context menu item is missing. I was able to get the username field to display the same reduced context menu by adding a readonly attribute to it.

Apparently, they're intercepting the keystrokes with JavaScript event listeners and passing them along to this readonly field so that's how you're able to type in a password at all.

Here's a much simplified proof-of-concept:

<!DOCTYPE html>
<html>
<head>
 <title>Using a Read-only Field as an Input to Overly Control User Experience</title>
 <script>
  function passAlongKeys(e) {
   //debugger;
   //TODO handle backspace, delete key, current insertion point etc.
   e.currentTarget.value =  e.currentTarget.value + e.char;
  }
 </script>
</head>
<body>
 <p>Plain text:<input id="text" type=="text" ></p>
 <p>Plain password: <input id="password" type=="password" ></p>
 <p>Readonly text: <input id="textro" readonly ></p>
 <p>Readonly password:<input type=password id="passwordro" readonly ></p>
 <p>Readonly text with JS:<input id="textrojs" type=text onkeydown="passAlongKeys(event)" readonly ></p>
 <p>Readonly password with JS:<input id="passwordrojs" type=password onkeydown="passAlongKeys(event)" readonly ></p>
</body>
</html>
Eric
  • 2,861
  • 6
  • 28
  • 59
  • Is your proof of concept supposed to print undefined in the last two boxes? Also, I don't think this solution is production-ready as no visual cues are given that typing is possible. – Scott Marcus Mar 25 '16 at 19:50
  • The proof of concept just demonstrates how to pass along alphabetic characters along to the readonly text input. It's just something I whipped up in a few minutes, it's not intended to be "production-ready" just a proof of concept. – Eric Mar 28 '16 at 14:44