Prettify.js Perfection and Decade-Old Bugs

I'm a bit of a perfectionist, as many people who know me will tell you, so naturally I wanted to get prettify.js working exactly the way I want it to. It ended up being a bit more work than I predicted, but a lot of fun.

I already documented my experience with getting overflow working properly in Opera, here's the full documentation on my prettify.js implementation:

Adding it to blogger is simple, it's just a few lines inserted in the header:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
<script language='javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js' type='text/javascript'/>
<script type='text/javascript'>
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

I wanted alternating line colors, which is simple enough: just add the class linenums to the pre tag and prettify throws the code in an ordered list. Prettify by default only numbers every 5th line, which I wasn't all that thrilled about, so I customized it by overwriting the prettify CSS on my blog. Blogger doesn't allow uploading a css file, so it's all inline in the header, which kinda sucks from a management perspective, but it could be worse. I also wanted to add a line between the numbers and the code to better separate them, that too was simple.

One thing that was a bit tricky was getting alternating line colors to play nice with my overflow. I did quite a bit of Googling before I found out the answer on StackOverflow. Apparently the problem has to do with ordered lists being block elements. Making them display:inline-block took care of it.

Below is my CSS for prettify:

#main-wrapper pre {
    overflow-wrap: normal;
    word-wrap: normal;
    overflow: auto;
    max-height: 800px;
}
ol.linenums {
    display:inline-block !important;
    margin-right: 0px;
}
ol.linenums li {
    border-left: 1px solid #a0e66a;
    padding-left: 5px;
    padding-right: 5px;
}
ol.linenums li.L0, ol.linenums li.L1, ol.linenums li.L2, ol.linenums li.L3, ol.linenums  li.L5, ol.linenums li.L6, ol.linenums li.L7, ol.linenums li.L8 {
    list-style-type: decimal;
}

Finally I wanted to add an option for people to remove the line numbers if they don't like them via a toggle, which was a simple javascript implementaiton:

<script type='text/javascript'>
    //<![CDATA[
        function toggle_visibility() {
            'use strict';
            var list, count;
            list = document.querySelectorAll('ol.linenums');
            count = 0;
            while(count < list.length) {
                if(list[count].style.paddingLeft === '0px') {
                    list[count].style.paddingLeft = '40px';
                } else {
                    list[count].style.paddingLeft = '0px';
                }
                count += 1;
            }
            return;
        }
    //]]>
</script>

With that, I'm pretty happy. I try to always do vanilla javascript instead of using jQuery. Not that there is anything wrong with jQuery: I just prefer to have my code work with as few dependencies as possible. Just call the javascript function with a <a href="#" onclick="toggle_visibility();return false;">Toggle Line Numbers</a> and it's all done.

After that I went around just checking everything out. I copied the script from Firefox into notepad and was dismayed to see that all the white space didn't copy over! Apparently there is a decade-old bug in Firefox where it won't copy whitespace in certain instances even when rendered in the browser. One such instance appears to be ordered lists inside a pre tag. I didn't know that before, though it would explain why PasteBin doesn't do a simple pre tag of an ordered list (it's quite complicated, you should take a look at their page source some time). I never knew this before. Opera does it fine and always has since me using it. I decided to see how other browsers handled it. Chrome did fine with whitespace too; I had no problem copying my script perfectly in Chrome. Then I tried Internet Explorer... Oh man, it was bad. It pasted the entire thing as one giant line. You see, I'm using the pre tag to the fullest: I'm not bothering to declare line breaks in html, since pre tags will honor them natively. Internet Explorer isn't just too stupid to copy whitespace in pre tags, it's too stupid to even copy newlines!

I found it quite entertaining and educating. I do hope that Firefox bug is fixed soon. I couldn't imagine using Firefox as my daily driver with that bug. IE? Talk about a nightmare. Anyone who stumbles upon this looking for an implementation of prettify.js on Blogger, I hope you found it helpful.

EDIT: As you may have noticed, I actually changed my mind after posting this. I'm now using a different theme for prettify.js: Tomorrow Night Eighties (adding "DejaVu Sans Mono", "Bitstream Vera Sans Mono" as fallback fonts for a more uniform cross-platform rendering). My reason for doing this? The whiteness of non linenums prettyprint is far too harsh. At the same time, I don't like how bad that bug about white-space copying in Firefox ended up being. I don't want to penalize Firefox users, so I found a theme that's not so harsh on the eyes (IMO). You should now be able to copy the code posted on here in Firefox with white-space intact. I'll leave the notes about the old way of doing things up here in case it is useful to anyone else.

Read More

Data Privacy Day Prep Part 3: Web Browsing

Data Privacy Day is one of my favorite holidays and falls on this upcoming Monday. Every year, for the days leading up to it, I like to talk and publish reminders about. I normally post this on the Bethesda forums, where I'm quite active, but now that I have a blog, why not also add it on here? Here's part 3, it's about web browsing and websites. It's long, so maybe read it in chunks. It'll always be here for you to refer to later :P

The goal of Data Privacy Day is to make people more informed about their data and privacy. I hope you find some of this information useful and put it into action. Security and privacy are constantly evolving items, and what cuts it today may not in the future, but this should be a good springboard to boost your security and privacy for Data Privacy Day and the years to come. As always, the level of security you need will differ from others, so you need to figure out what level is good for your needs. Some things, though, are universally applicable to all, such as a good password system. Another thing to remember is that even if you follow the best of security practices, it may not be enough to stay safe if a company who has poor security practices gets hacked (and after the summer of 2011 hacks and the ones that followed in 2012, I think we are all familiar with that).

Web Browsing

There's not a single person reading this who doesn't do it. We all are doing it right now, in fact. Web browsing is a part of all of our lives, but without proper care it can be quite dangerous.

 When randomly searching for things, you never know if that next search result is going to contain malware. Your antivirus software may have a rating feature, and your browser may have some protections (as does the search engine itself), but for more information a website reputation tool is needed. There are various ones out there, but the one that I feel does the best job is WOT: Web of Trust. Like any web rating site, it is prone to users downrating, but overall I feel it does a very good job. It does collect information on "you", as to get ratings it needs to know the domains you are looking at. This is true for any web rating service, though, so if you want to have this functionality, you'll have to allow the data be collected. WOT has an extension for Firefox, Google Chrome, IE, Opera, and Safari. Other browsers can use a bookmarklet for the service.

 In recent years, there's been widespread coverage of packet sniffing. The main tool to this end is Firesheep, which can collect password cookies sent over non-secure connections. Firesheep in particular can be countered with Blacksheep, but other tools can do a similar job, such as Wireshark. To combat these other tools, the most effective way is to always establish a secure connection. To that end the Tor Project and EFF have teamed up and made an extension called HTTPS Everywhere for Firefox (NoScript can also do it, but it is a bit more complicated. Here is the FAQ). Similar extensions exist for Chrome (HTTPS Everywhere is in alpha) and Opera also exist, but are not as foolproof.

 Also note two things: Using these plugins is NOT enough to guarantee you are secure, especially on public wifi. In recent months an attack to defeat earlier versions of SSL/TLS has proven successful known as BEAST. To make matters worse, very few browsers support TLS 1.1 and 1.2 (the only two versions not vulnerable to BEAST) and as such few websites use them, making virtually all of HTTPS vulnerable to BEAST. Of course BEAST is rare right now, but there is an older attack possible on wifi known as SSLStrip. SSLStrip does not break HTTPS, but instead acts as a proxy, removing SSL from requested pages. It is a type of Man-in-the-Middle attack. Still, these are really only threats on public wifi (which I'll talk about another day), but just be aware of them.

Cookies and LSOs

Cookies are not necessarily bad, in fact there is a cookie keeping you logged in to this forum right now. However, advertisers often use cookies to track you around the web. Given the usefulness of cookies in general, you probably don't want to outright disable them, however blocking third-party cookies will block practically all advertiser cookies without hindering your web experience.

 One big win happened this year on the tracking cookie front: the introduction of Do Not Track. It's gaining widespread adoption. Enable it if you don't want to be tracked. It's not guaranteed to be honored, but it'll keep the respectable websites from tracking you.

 Firefox: Tools > Options > Privacy > Use Custom Settings for History > Uncheck "Accept third-party cookies"

 Google Chrome: Wrench/Tools icon > Options > Under the Hood > Content Settings > Cookies > Check "Block all third-party cookies without exception"

 Opera: Tools > Preferences > Advanced > Cookies > Select "Accept cookies only from the site I visit"

 Local Shared Objects (LSOs), also known as flash cookies, are a part of Adobe Flash and are becoming an ever-more prevalent way of storing data on your computer as well as tracking your whereabouts. Note that as before, LSOs do have legitimate uses, so don't think that they are all bad. There are a few things that can be done. The one thing that is the same for everyone is to go to Adobe's Online Flash Settings page and delete/disable the storage for various websites. This has one significant advantage over other options: You can set those websites that do use flash cookies to track you to 0kb. That way they can't store data and you don't have to worry about a new one being created. Firefox and Chrome have addons for flash cookies, that being BetterPrivacy for Firefox and Click&Clean for Google Chrome. Both of which can automatically delete LSOs on browser close. Another way to go about this is to block Flash except when needed.

 Firefox: NoScript can block flash perfectly fine. If you are not a fan of NoScript, there is Flashblock (Flashblock and NoScript don't work well together, and since NoScript does what Flashblock does by default, it isn't necessary)

 Google Chrome: FlashBlock is available here as well.

 Opera: Flashblock for Opera -- Even though it doesn't specify Opera 11, it works fine in it.

 One more: The Evercookie. Evercookie is new on the field and is a javascript that creates multiple files through multiple methods to store data on your computer. It is not wide-spread yet, but may be in the future. The only truely effective way to deal with the evercookie is to block the javascript.

 Using an ad-blocking feature, add the following entry: */evercookie.js*

Ad-blockers and Script-blockers

Ad-blocking does more than just remove annoying ads (though that is the most obvious) -- it also adds security. ads are not controlled by the website they are displayed on, and there are many cases of malicious ads infecting users, the most recent example I can remember was not even a year ago on SlickDeals.net. I am all for supporting websites you visit, but when the ads don't run on their own server, you are taking a risk. Thankfully whitelists are fairly popular for ad-blockers, so you can get rid of the annoying/dangerous ones while still supporting your favorite websites. For extra privacy, consider adding the Track-blocking lists from here.

 Script-blocking is similar. Many scripts from domains other than the one you are on can be dangerous or track you.

 Firefox: Does it really need to be said? Adblock Plus! Undeniably the king of Ad-blockers.

 The Previously mentioned NoScript is the add-on of choice for script-blocking.

 Google Chrome: There are two popular ones: AdBlock and the port of Adblock Plus. Pick the one that suits your tastes.

 For Script Blocking it is NotScript, and another option is ScriptNo

 Opera: Opera has a built-in Content Blocker that is best used with the Fan-boy filter list. Right-click any page and select "Block Content" to access the blocker. Hold shift while clicking to block specific items. Both AdBlock and AdBlock Plus also exist on Opera now, if you prefer those.

 Chrome's NotScript was ported to Opera 11 and is available here

URL Unshorteners

With the advent of microblogging, URL Shorteners have grown in popularity. However, just randomly clicking a shortened link is very dangerous, as the site on the other side may be crawling with all sorts of nasty malware. Luckily, there are ways to unshorten a URL.

 Firefox: Long URL Please

 Google Chrome: LongURL

 Opera: Unshorten

 You can also always just use unshort.me for those urls that don't want to unshorten.

Private Browsing and Deleting Browser Data

Private browsing is supported in Firefox, Google Chrome, and Opera. It allows you to browse the web without leaving a trace (not really, but for the most part, yes). It is great for when you occasionally want to browse without leaving a trace, but if you are willing to go futher, you can clear all or at least select browser data every time on close. Why would you want to do this? Your browser cache and cookies are insecure. If someone gains access to your computer and you leave don't clear out your cache and cookies they will be able to gain access to your accounts since you are still logged in. This can be remedied in Firefox, Chrome, and Opera in different ways by deleting your browser data on browser close.

 Firefox: Tools > Options > Privacy > Check "Clear history when Firefox closes". Proceed to click the "Settings" button. Cookies, Cache, and Active logins should definitely be cleared on close. It does mean you'll have to log in to your sites every time, but that is what password managers are for. For extra security clear your Form & Search History and Download history. If extra paranoid and you won't miss it, clear your Browsing history as well. super-paranoid people may also want to consider clearing offline website data and site preferences to not leave a trace behind.

 Google Chrome: Google Chrome only supports deleting cookies on browser close. To enable this go Wrench/Tools icon > Options > Under the Hood > Content Settings > Cookies > Check "Clear Cookies and other site data when I close my browser". You need previously mentioned Click&Clean to completely clear out your private data on browser close. It is an option under the extension options.

 Opera:
 Cache: Tools > Preferences > Advanced > History > On "Disk Cache" check "Empty on exit".
 Cookies: Tools > Preferences > Advanced > Cookies > Check "Delete New Cookies when Exiting Opera"
 Download: opera:config#TransferWindow|KeepEntriesDays and set to "0"
 If feeling extra paranoid: Tools > Preferences > Advanced > History > Set History Addresses to "0" and uncheck "remember content on visited pages" and set opera:config#UserPrefs|SavePasswordProtectedPages to 0

The Remaining stuff: Web domains and Browser Plugins

The single greatest thing you can do to check if you are on a phishing website is to check the domain. Modern web browsers all highlight the actual domain of the site making it all the easier. Doing that alone will greatly lower your risk of being a phishing victim.

 The last thing to talk about is plug-ins. Plug-ins are insecure, to put it simply. They aren't updated automatically with your browser, and it is very easy to miss one that is a security risk. The biggest security risks in general to your computer are: Adobe Flash, Adobe Acrobat/Reader, Java, Silverlight, and Quicktime (a video on the vulnerabilities and flaws of the PDF format). On top of not updating with your browser, these plugins also have a great deal more permissions than your standard browser extension does. Ask yourself if you really need those plugins, and then, even for those you do, think about at least making your addons on-demand (I currently run with Java always disabled, being the least useful in the modern web and one of the most dangerous). Mozilla made a wonderful plug-in checker that is available here, use it often. It works with Firefox, Google Chrome, and Opera. I also highly recommend using an alternative to Adobe Reader. Sumatra PDF is my favorite on Windows (Mac OS X includes it's own great built-in one, and on Linux whichever comes with your desktop environment is probably plenty good). Take a moment to see what plugins you have installed in your browser. This can be done simply by typing about:plugins into your url bar for Firefox/Chrome and opera:plugins for Opera.

 This year saw a huge resurgence in Java attacks, many zero-day exploits happened this year. Ask your self: Do I need Java installed on my computer? If not, UNINSTALL IT. If you do need it on your computer, ask yourself: Do I have any websites that need Java? Most likely you don't, as very few modern websites require Java. I HIGHLY suggest going a step beyond plugins on demand for Java and just plain disabling it in your default browser. If you happen to need it, have a backup browser JUST for Java. It's easy with the plethora of web browsers out there today.

 Firefox: NoScript is the closest thing to plug-ins on demand. If you don't want to block javascript, you can set it up so that only plugins are disabled. To do this Go into the Options for NoScript. Under General, select "Scripts Globally Allowed (dangerous)", then on the "Embeddings" tab, forbid java, flash, silverlight and other plugins, select "Apply these restrictions to whitelisted sites too". Plugins are now effectively on-demand.

 Chrome: Plug-ins on Demand

 Opera: Plug-ins on Demand

 Note that running plugins on demand may break some sites.

Specific Websites

On the various websites we share all sorts of information. These sites generally have various security and privacy settings so you can control who can see that information and how secure your account is.

Webmail

Currently Gmail is set to always use HTTPS for secure email browsing, which is a good thing, but if you changed this yourself you can fix it under the General tab in Settings. Windows Live Mail/Outlook recently added this feature, which you can set by going here. Unfortunately Yahoo! has not added this feature for free users. If using Yahoo! you should request this very important security feature be added, or better yet: switch to Gmail or Windows Live Mail. Likewise if you are still stuck on AOL mail SWITCH NOW!

WLM/Outlook also has a single-use code system for signing in on computers that are not your own. For information on how to set it up, read WLM's FAQ. Gmail does not offer this, but does offer Two-step authentication, which significantly boosts your security. Enabling it is easy, as Google explains how to enable two-step authentication in their blog.

 Google also offers the ability to recover your account via SMS or your smartphone. To add this feature, Go to your Google Account's Password recovery options. Windows Live also offers this feature. Go to Account Overview and under Account Settings there is a line that says "Security Info". Click Manage and you will have the option to enter a phone number for recovery use.

 A Feature unique to Windows Live Mail is Trusted PC. On the plus side it makes password recovery dead-simple from a single PC, the downside is it's useless if you use it on a laptop, and unfortunately you need Windows Live Essentials installed as well as use Internet Explorer, making it out of the realm of possibility for Mac OS X or Linux users.

 Gmail offers the ability to remotely log out of any computer, which can be very useful if you leave yourself logged in somewhere on accident.

 An alternative webmail service is Lavabit which stresses privacy above all else. It doesn't log IPs, it doesn't retain your sent emails past 7 days, and it encrypts everything. Of course it's a big switch.

Facebook

Last year it was Timeline, this year Facebook is introducing Social Search. Lifehacker's guide to Facebook has been updated appropriately.

I was ready to do this big expose on Facebook privacy settings, but then I found out about Lifehacker's always-up-to-date guide to Facebook Privacy. Read it, bookmark it, check it every now and then.

Facebook rolled out HTTPS across the site and it can be found in your Account Settings, I highly recommend enabling it ASAP if it isn't already.

Facebook now can notify you when your account is logged in from a new device. I love services like this, so recommend you enable it to keep tabs on your account.

 Now go to Account Settings to get the last little bit of Privacy and security settings:

 Set up your mobile phone with Facebook, and you can get one-time passwods through SMS for Facebooking anywhere you don't feel 100% safe (like those public wifi networks previously mentioned). In "Account Settings" you can also remotely log out any other active computer connected to your account.

 For the last thing, head over to the "Facebook Ads" tab in your account settings. Set to "No one" both "Allow ads on platform pages to show my information to" and "Show my social actions in Facebook Ads to". With that, your Facebook is now nice and secure.

 Also: be aware that linking to content from your profile IS a leak that can lead to your profile being uncovered. Be aware of this when linking to images you've uploaded to your Facebook account. Likewise be weary of Facebook Connect. If you Facebook login information is compromised, so are these sites. It can also be used to track down your Facebook page if your profile picture is tunneled through FB Connect.

 Be aware of how much information leaks through to Apps when using them. The WSJ did a good writeup on this:

 "The apps reviewed by the Journal were sending Facebook ID numbers to at least 25 advertising and data firms, several of which build profiles of Internet users by tracking their online activities."

 Your Facebook ID is always collected, so it isn't fully anonymous, this data is linked directly to you:

 "Defenders of online tracking argue that this kind of surveillance is benign because it is conducted anonymously. In this case, however, the Journal found that one data-gathering firm, RapLeaf Inc., had linked Facebook user ID information obtained from apps to its own database of Internet users, which it sells. RapLeaf also transmitted the Facebook IDs it obtained to a dozen other firms, the Journal found."

Google

Pretty much all of us use it, and it knows a ton about most of us. Thankfully Google does give you some control.

 Google+ users check out this Guide to Google+ Privacy. One thing I really do admire about Google was how up-front they are about the privacy settings for Google+.

Google Privacy Center - Learn it, love it, visit it often. Click on Privacy Tools to get to the settings. The rest is just information. In privacy tools you will see many options.

 Google Dashboard: The important one is Google Dashboard, which will tell you what Google products you are using and what Google knows about you through them. It is a central point of control for all your use of all Google products.

 Ads Preference Manager: this will allow you to control what ads Google will show you. In doing so you tell Google what you like so you get more accurate/relevant ads.

 Data Liberation Front: If you are looking into biting the bullet and leaving Google entirely, head here. This site will tell you how to get any and all your data from all the Google services out so you can switch to different options. It's drastic, but if you are THAT worried about Google, it may be interesting.

 Google Encrypted search: This secures your connection between you and Google for your searches, and in recent months, Google has been rolling it out as default for all logged-in Google users. Google still stores your information, and scroogle is no more. Your best option if you don't like this is to use DuckDuckGo, which has a very fair privacy policy, much less invasive than Google.

 Web History Controls: This is a setting you may have inadvertently enabled. It uses your previous web searches to "help" you in the future as well as potentially storing other web usage information. It doesn't remove your searches from Google's servers, but it may still be useful especially in a multi-user environment.

 Google Analytics Opt-out. You can opt-out of being tracked through Google Analytics. You will need to install a browser extension, and currently only supports Firefox, Google Chrome, and Internet Explorer. This can, of course, also be done through a content blocker.

 Search Personalization Opt-out: If you are using Web History, this is enabled. Instructions on how to disable it when not signed into a Google Account are also explained.

Other sites & Web App Permissions

Microsoft's gotten into the game this year, and now offers a dashboard for your privacy settings and personal info like Google. If you're a big Microsoft/Windows Live/Bing user, you should check it out: https://choice.microsoft.com/Data/?lc=1033

Beyond that, just check out the sites you use and make sure everything seems right according to you. If you use a password manager, figuring out what sites you use and maybe don't visit often is very simple.

 Also, a simple way to check your website's app permissions is with MyPermissions. It's a one-stop link shop for finding out who has permission to your various social network sites. Clean out any apps for all of them you don't need (I checked myself at the beginning of the year, and the only thing I had was an email app for my main gmail account -- an app I still use, so I was 100% clean). Another service is Adjust Your Privacy. There's some overlap between the two, but AdjustYourPrivacy offers some links that MyPermissions lacks (and vice-versa).

Some General Privacy Remarks and Tricks for the Web

If you want to send a note to someone over the Internet, but don't want to leave it around afterwards, a cool tool is Burn Note. You can also recreate this in Google Docs if you prefer that route.

 WikiHow has a pretty cool trick for helping you spot identity theft by making Google play for your side via Search Alerts. Of course, this means giving Google some information on you.

 The EFF released a star rating system for who cares about your privacy. It may surprise you that Google didn't score that bad. THe worst offenders, besides ISPs, were FourSquare, MySpace, Apple, Microsoft, and Yahoo (Skype is now owned by Microsoft, so I didn't list it, but it also scored zero).

Read More