TAG: Javascript

How to Copy and Paste into the Digital Ocean VNC Console

I recently signed up for Digital Ocean to test droplets for my development and linux management testing. I was securing the server and setup fail2ban, disabled the root login, and created a user account but forgot to change the user name from root to the user name I selected in my SSH client profile. I ended up locking myself out of the server and had to resort to logging into the admin panel on Digital Ocean’s website and use their browser embedded VNC client to restore my access. I quickly discovered that one of the downsides of using this panel is that you can’t copy and paste commands. Luckily there’s a workaround and you can use the browser console to do sendkeys through Javascript.

Bring up the console in the browser developer tools. Here’s a cheat sheet for keyboard shortcuts:

BrowserDescriptionWindowsMac
ChromeOpen Developer Tools and bring focus to the consoleCtrl + Shift + JCmd + Opt + J
FirefoxOpen ConsoleCtrl + Shift + KCmd + Opt + K
Internet ExplorerAfter hitting F12, you have to click the console tab.
There’s no direct shortcut to the console tab.
F12N/A

Paste this snippet into the textbox in the console window:

Chrome console

 

Update 9-21-16

Ruden and Sebastiaan’s pointed out there was a bug in the code above. This updated snippet has support for characters when using shift characters like !@#$%^&*()_+

You’ll receive a dialog prompt to enter the copy to paste in. Please note that you need to click on the VNC console and hit enter to execute the command.

Javascript Prompt

 

 

 

 

 

If you need to enter more than one command, just hit the up arrow on your keyboard in the console to get the script again for easy reuse.

How to Get Browser Name and Version via JavaScript

Today I ran into a strange issue where Firefox version 28 and below rendered style widths different than Firefox 29 and above. Firefox 29 and above appear to have fixed the issue and render sizes to match Chrome/IE8+/Opera/Safari. Unfortunately, as old as Firefox 28 is, our client’s legal review team is stuck on that version as IT refuses to let them upgrade. As such, we needed to add a kludge fix to the site to add a style to fix the issue for those running older Firefox versions. JQuery removed the version support from version 1.9 so here’s a handy script that will allow you to detect the browser and version without any extra dependencies.

Usage is very simple:

BONUS: If you need to detect a specific version and add special classes, here’s a quick snippet that will allow you to add a class to the HTML tag  using plain old vanilla.js.

 

jQuery fancybox ‘*.support not defined’ or ‘b.support not defined’ Error

I was importing some code from static HTML pages into a client’s home grown CMS system this morning. When I reviewed the site in Firefox with Firebug running, I was seeing the error:

b.support not defined

The site uses Fancybox to display the window overlays within the site so I had to step through the code and to find out what broke during the migration. Turns out it was a stupid mistake on my part.

Make sure that you include a reference to the jquery library before you load fancybox.

 

SSL, jQuery, and CDN

I just got whacked by a minor bug with SSL and the Google CDN (totally my fault, not theirs). I stuck the reference to the CDN in my master page not realizing one of the pages would be served up as secured by the vendor due to compliance issues. It made it through all testing because none of the staging/dev environments were configured for SSL and I was not made aware of the fact that we’d be serving the page up through SSL. Internet Explorer 8 prompted users about the insecure content before rendering the page. In their infinite wisdom, Microsoft decided to implement a new workflow for insecure content where the content is ignored and the page renders immediately with the unsecured content ignored. Since jQuery was used on multiple parts of the form, the site essentially broke. Google Chrome and Firefox seem to recognize the CDN as a trusted source and render the page as expected.

To fix the site, I added a javascript check to set the appropriate prefix to the CDN call:

 

There are no more results.