Custom Search for Your Own Website, Parte Deux

Intro

In Part 1 we setup a Google custom site search for your (or my) website. This lets you very quickly setup a search customized to your website, powered by Google. It's much easier than creating your own search. Take a look at the screenshot below however and you may notice a drawback:

While the search results look nice, They don't match the theme of every site out there, and possibly not our own website. The good news is that there are ways of dealing with this. I'll cover 2 of those ways:

1. Changing your pre-canned Google custom site search theme.
2. Modifying things yourself with CSS.

The Easy Way

Changing the theme of your custom site search within Google's interface using a pre-canned theme is pretty easy. If you created search for your own site in part 1 of this series (as opposed to creating a search function on my sample website), then you can go to the Google CSE Page, and navigate to the section shown in this screenshot:

You can pick any of the themes shown here, click save, and refresh the search page you made, and voila! You have a new search theme. Here's an example of the results when I chose the Espresso theme:

This has the obvious drawback of limiting you to only the pre-canned themes. While they do look nice, I think we can do better than that.

The Coder Way

As with many things HTML-related, the Google custom site search results (and even the entry) are controlled by CSS classes. This makes our job of customization quite easy really; all we have to do is override some CSS classes. In this first example, I've overridden the search box to use a green font:

This is a pretty simple hack, accomplished with the following css:

        .gsc-input {
            color: green !important;
        }

Our next trick is to make the background of the search results black and to change the text and titles to slightly different greens. Here's what the result looks like:

And here's the CSS to accomplish this result:

        .gsc-results-wrapper-overlay {
            background-color: black !important;
        }

        .gs-title, .gs-title > b {
            font-size: 30pt !important;
            color: limegreen !important;
        }

        .gs-snippet {
            color: forestgreen !important;
        }

Not much to it really. All we did was set the results wrapper overlay (the popup results box) to have a background color of black, we set search result titles (the hyperlinks) to 30-pt font lime green, and we set the snippets in the results to forest green. As you can imagine, there are many more possibilities than what I've covered so have at it folks!

What's Next?

If this topic has interested you, use your browser's developer tools to find other CSS classes you can override. Let me know if you need help with that. You might also experiment with other ways of changing around the look and feel of things, perhaps through JavaScript. It's not my recommended solution as generally JavaScript should be reserved for actual code not changing appearance, but I make exceptions :)

Lazy advanced: Lazier!

Introduction

So we know a little bit about Lazy<T> now.  Time to expand our knowledge a bit:  let's write some code to pass a parameter to the constructor.  It being the holiday season, lets involve the use of food!

Coding

Let's create a class called Food that passes a string parameter.  This still uses the lazy concept to where the object doesn't exist until it really needs to.  Onto some code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace LazierTProject
{
  class Program
  {

    internal class FoodExtended
    {
      private string foodID;
      private string aboutFood;
      internal FoodExtended() { }
      internal FoodExtended(string foodID)
      {
        this.foodID = foodID;
      }

    }

    public class Food
    {
      public string id;
      private Lazy<FoodExtended> foodExtended;

      public Food(string id)
      {
        this.id = id;
        foodExtended = new Lazy<FoodExtended>(() => new FoodExtended(this.id));
      }
    }

    static void Main(string[] args)
    {
      Food turkeyForMe = new Food("Gobble gobble!");

      Lazy<Food> turkeyForYou = new Lazy<Food>(() => new Food("Turkey for you"));
      Console.WriteLine("Turkeys declared");

      Console.WriteLine();
      Console.WriteLine("turkeyForYou's food initialized:  {0}", turkeyForYou.IsValueCreated);
      Console.WriteLine();

      Console.WriteLine("turkeyForMe.Message: {0}", turkeyForMe.id);
      Console.WriteLine("turkeyForYou.Message: {0}", turkeyForYou.Value.id);
      Console.WriteLine();
      Console.WriteLine("turkeyForYou's food initialized:  {0}", turkeyForYou.IsValueCreated);

      Console.WriteLine("\nPress Any Key to Exit.");
      Console.ReadKey();

    }
  }
}

Output

Wahoo!  The coding sample works and wasn't too terrible to pass a parameter to a lazy object.

Source(s):

http://msdn.microsoft.com/en-us/library/dd642331(v=vs.110).aspx

http://msdn.microsoft.com/en-us/library/dd997286(v=vs.110).aspx
http://reedcopsey.com/2009/10/26/lazy-initialization-in-net-4-lazyt/

Lazy

Introduction

Lazy <T> is the wrapper class for lazy initialization of an object that provides lazy initialization for the class or user defined type.  Lazy initialization of an object is used when you want to defer the creation of an object until it's actually used.  This could be quite useful if you have a dependent object that isn't used until more extensive operations are required to be completed but your object has to exist.

In layman's terms: you don't have to create the object early on in your coding and potentially call it later.

Coding

Onto a sample.  Let's create a class called Dalek that only writes out the phrase we've all heard: Ex-ter-min-ate!.  But we only want to do this when the object is actually used.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace LazyTSample
{
  class Program
  {
    static void Main(string[] args)
    {
      Lazy<Dalek> lazyDalek = new Lazy<Dalek>();
      Console.WriteLine("Dalek is created : " + lazyDalek.IsValueCreated + "\n");
      Dalek drWhoEnemy = lazyDalek.Value;
      Console.WriteLine("\nDalek value has been set : " + lazyDalek.IsValueCreated);

      Console.WriteLine("\nPress Any Key to Exit.");
      Console.ReadKey();
    }
  }

  public class Dalek
  {
    public Dalek()
    {
      Console.WriteLine("EX-TER-MIN-ATE!");
    }
  }
}

Output

Huzzah!  Coding sample works, this should be quite useful for more beefier operations to finish creation before your object needs to be used if it's ever called.

Source(s):

http://msdn.microsoft.com/en-us/library/dd642331(v=vs.110).aspx

http://msdn.microsoft.com/en-us/library/dd997286(v=vs.110).aspx
http://architects.dzone.com/articles/lazy-t-c-40

Custom Search for Your Own Website

Intro

So I'm creating a website that will, among other things, contain a large number of details and lists of items. These items are of different types and will be spread out (categorized) throughout the site. Seeing as how I'm just a lone developer and this is a personal site, I have things I would like to spend my time on other than a fully customized search feature. How can I accomplish search with minimal effort? Google to the rescue! Using Google Custom Site Search, you can setup search on your website (using Google to crawl and index your site) fairly easily. Setting up custom search involves 2 things, from a high-level view: 1) Setup some sort of service that will crawl and index your website. 2) Create a search feature where users can search for and view results.

For the remainder of this blog I am assuming you have a personal google account. If not you can create one. You don't need anything special, in fact I started this off with just a plain old gmail account. If you don't have a google account of some sort, go create one before you get too far.

There is one other alternative if you don't want to create a google account or if you don't have a website you want to search: skip the "Account Setup" section below and skip right to the code. You're welcome to create a custom search for my website, at least for learning purposes.

 

Account Setup

I'm going to assume that you already have a website you'd like to create custom search for. If not, hey maybe you've got a friend who has a site that could use it. Just keep in mind you will need a way to prove ownership of the site in the end, so be sure to get your friend's permission if you're not doing this on a site of your own. Anyways, here is how to setup your Google Custom Search account.

1. Go to this page: Custom Search - Create CSE
2. Follow the instructions on that page
3. You're now taken to a congratulatory page that tells you you've setup the custom search engine. 

Now you need to prove to Google that you have admin access to the domain which is hosting your site. You do this through google sitemaster tools.

1. Go to this page: Google Webmaster Tools
2. Click the "Add a Site" button if your site isn't already listed on the page.
3. Enter the url of your site/domain. 
4. Follow the remainder of the on-screen instructions from google, which will most likely have you log into your domain provider's account (quite frequently this is register.com) in order to set a server-side variable, proving you have administrative access to the domain.

Congrats! That's it for account setup.

Code

A search engine sucks if you don't have a way to search for things, and we haven't done that half yet. A quick note: we won't be doing any server-side code here. This is all client baby!

Flip back over to the congratulatory page from the end of the process of setting up your Google Custom Search. As of now (2014) there's a button labeled "Get code". Click on that. This will show you some JavaScript that you can copy and paste into a webpage. Fire up your favorite text editor. Paste this code (or if you have your own site/script, by all means place that in the editor instead).

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Search Demo</title>
</head>
<body>
    <h1>Search Demo</h1>
    <div>some content before search</div>
    <div>
        <script>
          (function() {
            var cx = '003872741270381885457:moxcvku22ym';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                '//www.google.com/cse/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
          })();
        </script>
        <gcse:search></gcse:search>
    </div>
</body>
</html>

Now fire up the page in your web browser of choice. You should have a screen that looks like this. Not too bad looking, considering the very small effort involves so far.

Go ahead and type something into the search box. If it's your own site, pick a word that you know is on the site. If you're doing my site, use "shadowrun" as your search term, and hit enter or click the search button. Your screen should now look similar to this:

Neat huh? That's all there is to it.

What's Next?

I'm just learning how this stuff works myself. I hear tale you can customize the look and feel of the search though and there might even be some other advanced options, so I think I'll look at those for next week. Feel free to be a teacher's pet and look ahead if you like.

Resources

Custom Search Engine

Regular Expressions in C#: An Advanced Lesson

Intro:

Did you Like regular expressions enough from the last post to want to keep reading about some advanced techniques?  Do you like the dwarves from the works of J.R.R Tolkien enough to want to use them in a coding blog?  If you answered yes to both questions then this is your lucky day!

Some advanced techniques:

Lets try to match some arbitrary value, say the dwarf name Gloin and have it followed by any number of digits.  But lets add some trickery to our debacle: not allow the phrase existing in quotes and not allowed within curly brackets like {Gimli Gloin123}.

I'll go ahead and create a regular expression like:  "{[^}]+}|""Gloin\d+""|(Gloin\d+)

The first section within the first set of quotes, {[^}]+}, will match any content between the curly brackets.
The second section, "Gloin\d+", will match any content that exists within those double quotes.
The third seciton, (Gloin\d+) will match Gloin and any digits that succeed it and capture the match into group 1.

Onto some code!

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Collections.Specialized;
using System.Threading.Tasks;

namespace CSharpConsoleAppRegularExpression
{
    class AdvancedTutorial
    {
        static string ConvertToYesNo(bool value)
        {
          if (value)
            return "Yes";
          return "No";
        }

        static void Main()
        {
            string dwarves = @"Gimli"" ""Gloin12"" Gloin11@Gloin22 {4 Gloin42}";
            //string s1 = @"Jane"" ""Tarzan12"" Tarzan11@Tarzan22 {4 Tarzan34}";
            //var myRegex = new Regex(@"{[^}]+}|""Tarzan\d+""|(Tarzan\d+)");
            var myRegex = new Regex(@"{[^}]+}|""Gloin\d+""|(Gloin\d+)");
            var group1Caps = new StringCollection();

            //Match matchResult = myRegex.Match(s1);
            Match matchResult = myRegex.Match(dwarves);
            // put Group 1 captures in a list
            while (matchResult.Success)
            {
              if (matchResult.Groups[1].Value != "")
                group1Caps.Add(matchResult.Groups[1].Value);
              matchResult = matchResult.NextMatch();
            }

            // Task 1: Is there a match?
            Console.WriteLine("*** Is there a Match? ***");
            Console.WriteLine(ConvertToYesNo(group1Caps.Count > 0));

            // Task 2: How many matches are there?
            Console.WriteLine("\n" + "*** Number of Matches ***");
            Console.WriteLine(group1Caps.Count);

            // Task 3: What is the first match?
            Console.WriteLine("\n" + "*** First Match ***");
            if (group1Caps.Count > 0) 
              Console.WriteLine(group1Caps[0]);

            // Task 4: What are all the matches?
            Console.WriteLine("\n" + "*** Matches ***");
            if (group1Caps.Count > 0)
              foreach (string match in group1Caps) 
                 Console.WriteLine(match);

            // Task 5: Replace the matches
            //string replaced = myRegex.Replace(s1, delegate(Match m)
            string replaced = myRegex.Replace(dwarves, delegate(Match m)
            {
              // m.Value is the same as m.Groups[0].Value
              if (m.Groups[1].Value == "") 
                return m.Value;
              return "Thorin";
            });
            Console.WriteLine("\n" + "*** Replacements ***");
            Console.WriteLine(replaced);

            // Task 6: Split
            // Start by replacing by something distinctive,
            // as in Step 5. Then split.
            string[] splits = Regex.Split(replaced, "Thorin");
            Console.WriteLine("\n" + "*** Splits ***");
            foreach (string split in splits) 
              Console.WriteLine(split);

            Console.WriteLine("\nPress Any Key to Exit.");
            Console.ReadKey();
        }
    }
}

Code output:

Final Conclusion

Regular expressions seem to be another slick way of data validation available to developers.  I hope you enjoyed reading this as much as I enjoyed writing this.  Cheers.

Resources:

http://www.rexegg.com/regex-best-trick.html

http://en.wikipedia.org/wiki/List_of_Middle-earth_Dwarves

Simple Security Tips for .Net Developers

Intro
As developers, it is our responsibility to make sure our code is secure. If you haven't coded with security in mind before, a good place to start is by learning. So, today we'll see a few small tips you can start using right away to make your code more secure. Eventually you might end up designing security into your systems from the get-go, but let's start simple and see a few practical tips.

Use HTTPS

Information transmitted over the web is generally done on port 80 (HTTP), or 443 (HTTPS). Information transmitted via HTTP is insecure; HTTPS is encrypted using keys. If you have sensitive information including personally identifiable information, authentication information such as passwords, sensitive financial information, or anything else you want to protect, get an SSL certificate for your domain. This allows HTTPS traffic, and you can then force clients to use HTTPS instead of HTTP.

Http Header: X-Frame-Options

Have you ever heard of clickjacking? It's a form of attack where the user sitting at a web browser performs actions on one site when they think they are performing actions on another. Picture this: You have a site that allows users to enter and remove widgets. You have a "delete all widgets" button on your website. Someone else, who is just a malicious chode, puts your site in an iframe on their website. They then cover the stuff on your site with their own html elements using sneaky CSS and/or JavaScript, so that the user thinks they're clicking on a button that says "give me a free ipad" on one site, when in reality they're clicking your button that says "delete all widgets". Oops! It turns out this attack is pretty easy to thwart, just set an http header named x-frame-options to a value of "deny". You can do this in IIS, or my preferred method is to do so in code in your global.asax:

void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("x-frame-options", "DENY");
}

This simply prevents browsers from rendering your website within a frame or iframe. You may still have to worry about older browsers, but consider this an opportunity for research on your own :)

Meta Tag: Charset

Would you believe that people can attack your website by passing it information using a character set other than what you expect? For example, if you expect users to type in utf-8 information, which is fairly standard, but they enter in utf-8 character sequences, they just might be able to sneak some JavaScript into your entries. Such an attack is called a Cross Site Scripting attack, or CSS or XSS for short. The good news is that this is also quite easy to get around. My preferred method of preventing this type of attack is done within the html of each of your pages, as per the following:

<html>
  <head>
    <meta charset="UTF-8">
  </head>
</html>

This tells the browser not to accept any form of input from the client unless it is UTF-8.

Restrict Access

This is just a general security tip which is useful in many situations: Restrict access by default, and give access only as necessary for a person to get done what needs doing. Don't give more access or rights than are necessary. If someone asks if you want to do the bare minimum, proudly exclaim "yes!". It's more secure.

Sql Parameters

Many .Net developers don't realize just how easy it is to hack the database behind a website using the website to do the dirty work. This is called a SQL Injection attack. I could go into a lot more detail showing you how to make such an attack, but hey, I have a wedding to attend this weekend so my time is gold this evening. Here is some code that will do a pretty good job of preventing such issues, and bonus: your code is cleaner than if you just concatenated the whole query together.

public void DoStuff()
{
  using (var conn = new SqlConnection("some conn string"))
  {
    var command = new SqlCommand("select * from SomeTable where SomeCol = @SomeCol", conn);
    command.Parameters.Add(new SqlParameter("@SomeCol", Request.QueryString["someval"]));
    command.Connection.Open();
    command.ExecuteNonQuery();
  }
}

In this example we are running a query which is based off a value the user typed into the querystring of the request. Using a SqlParameter in the command's Parameters list, we have ensured that the data passed to the database is safe and will not allow the caller to use SQL Injection.

Validate Info Entered/Imported

This is another general bit of information: Validate all information that is input into your system, whether it's from a user, another system, a file, a database, or other. If it's going through your system, validate! You never can tell what type of data might get tossed your way, so be prepared and prevent it from taking your system down by validating it's of the type and size you expect, and possibly within a range of valid values you might expect.

Encrypt Sensitive Data

This might seem like a bit of a no-brainer but I feel it needs mentioning. If you have sensitive information such as passwords, Personally Identifiable Information, sensitive financial information, or other info you don't want unauthorized people to get hold of, encrypt the data. There are many ways to do this in both .Net and in database platforms including SQL Server, you'll have to research this part on your own. Or hey, give me a buzz and I'll help out! I just don't have the time or space on this blog to give examples at the moment, as it can get pretty complex. Good, strong encryption is not for the faint of heart, but it's necessary for many things.

1-Way Encryption for Auth Passwords

Speaking of encryption, passwords! When setting up your authentication system you can take it a step further by creating a 1-way encryption of the passwords of your users. Why do that? Even if an attacker somehow gets hold of your database, they still won't be able to decrypt the passwords in order to use the logins of others. You may be wondering how you can then authenticate your users...the concept is simple, even if the encryption code is more complex: You just make sure that any given input value encrypts to the same value. So for example, I have a user named "bob" whose password is "hi!" The encrypted version of this password is "1234asdlfkj214o2i;;". When bob logs in he types in "hi!", so I then encrypt the typed in value and check to make sure it's the same as the encrypted value stored in my database.

Strong Passwords

So that prior example with a password of "hi!" isn't exactly a great password. Why not? The longer a password is, and the more nonsensical, the less vulnerable it is to something called a brute force attack (more specifically, a dictionary attack) where the attacker has a program try to randomly guess your password. They try words from the dictionary, including 1337-speek. So, make your users use better passwords. Instead of "hi!", suggest "124ksdfAAA!!~x@". This is not going to be vulnerable to a dictionary attack specifically, and makes it less vulnerable to a brute force attack in general. Don't carry this too far though; the stronger password enforcement you have in place, the more likely the user is to rebel and write that super-secure password on a post-it note stuck to their monitor. Backfire-city!

2-Factor Auth

Lately a concept called 2-factor authentication has been gaining steam. It's a simple concept: use more than 1 form of authenticating a specific user. Popular choices include a mobile app with a pseudo-randomly generated code ala World of Warcraft, a text message with a specific code sent to the user's mobile phone, fingerprint analysis, voice recognition, and others. In the world of websites this generally means you have your standard id and password along with some special code that you acquire elsewhere. Neat huh? Simple concept, but the coding might take a bit.

Validate Email Addresses

My last tip of the day: If you make users sign up to your system using their email address, and this is the email address they'll use for password reset and other such administrative features, validate the user actually owns the email address when the account is created. This is usually as simple as sending the user a unique activation link to the email address on the account as soon as the account is created, making sure the user can't login to the account until they activate it via the link you emailed. Once they click said link, the account is usable. 

What's Next?

Clearly there are many more good security tips out there, many more vulnerabilities to discuss, and all of the above topics could use a lot more detail. Spend some time on your own researching a few things.

Do you have a simple secure coding tip to share? Say so in the comments below!

Resources

Clickjacking Defense Cheat Sheet
Html Meta Charset