Bynapse Technologies - Blog

Friday, April 19, 2013

Protecting your ASP.NET Web API using OAuth2 and the Windows Azure Access Control Service

The world in which we live evolves at a vast speed. Today, many applications on the Internet expose an API which can be consumed by everyone using a web browser or a mobile application on their smartphone or tablet. How would you build your API if you want these apps to be a full-fledged front-end to your service without compromising security? In this article, I’ll dive into that. We’ll be using OAuth2 and the Windows Azure Access Control Service to secure our API yet provide access to all those apps out there.

Wednesday, October 31, 2012

Background Pattern Designs And Resources For Websites

Patterns are a useful resource for website design. Filling the background with a full-blown image is no longer a useful solution today as the variety of devices and screen resolutions in the market make it difficult to adapt to them all, although it is true that the latest plugins and scripts offer solutions such as automatic image re-sizing  Patterns are similar to those images that are indefinitely repeated either horizontally or vertically. That makes a lot more sense today where usability is concerned, especially in responsive design.

Following is a comprehensive collection of them for all tastes and desires.

Tuesday, October 30, 2012

Wireframe and Mockup Tools


Just a list.. a nice list.

Pencil
Open source and Free, the Pencil Project is a great tool for making diagrams and GUI prototyping that everyone can use. It runs as either a Firefox plugin or in a standalone XUL runner. Does not work on Mac currently.
HotGloo
The Online Wireframe Application
MockingBird
Is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.
Balsamiq Mockups
Using Balsamiq Mockups feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner.
Moqups
Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.
ScreenSketcher
ScreenSketcher is a tool for creating quick mock-ups, or wireframes, of a computer user interface, such as a window, a web page, or anything that can appear on a computer screen.
Cacoo
Online Real time collaboration
  • Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts.
  • Cacoo can be used free of charge.
Mockup by Lextech
Mockup is an iPhone app prototyping tool that makes it incredibly easy to:
  • Think through design/usability concepts before you start coding,
  • Brainstorm with future and existing customers, and
  • Share your ideas and collaborate with the app development community.
Mockery
Mockery enables you to create great UI mockups, quickly and easily.
  • Design great interfaces for the web or desktop.
  • Review your designs with Windows and Mac themes.
  • Annotate your mockups with detailed information.
  • Share your mockups with others.
ForeUI
ForeUI is a handy UI prototyping tool. It can rapidly create static or interactive, skinnable UI prototypes of your website or software. You can use ForeUI to:
  • Create mockup for the GUI in your mind and make others understand quickly.
  • Make working prototype of website or software to collect feedback from potential users.
  • Perform usability testing before releasing the beta version.
  • Generate the schematics that can be inserted in the design documents.
Naview by Volkside
Naview is a navigation preview tool for rapid information architecture prototyping from Volkside.
  • Design and visualise an IA or website navigation structure
  • Build prototypes quickly and get a feel for the navigation
  • Test your IA with users and iterate on the fly
  • Import your IA easily from a spreadsheet
  • No need for coding to simulate real website menu behaviour
C-Inspector
A tool for information architecture testing C–Inspector is a web–based application that helps you to test the information architecture of your website. By analyzing both quantitative and qualitative data collected through the remote test, you can gain insight into the users' mental models and identify possible issues with labelling or grouping
FlairBuilder
A cross-platform prototyping tool that helps you create interactive wireframes & prototypes faster, easier and with better results. We put a strong emphase in interactivity as this is the best way to show your clients something closer to the real product.
MockApp
What can I use MockApp for?
  • Brainstorm and refine a new app idea
  • Show what the app should do so that it’s easy for a developer to code it just right
  • Show-off your brilliant app ideas to your boss, potential business partners, investors, etc. (again, way more effective tan finger puppets!)
Creately
Creately is an easy to use and collaborative diagramming application that runs in your browser. With a powerful and intuitive interface, Creately is great for teams that need to work on designs together
MockFlow
Design, collaborate (in real-time) user interface mockups for your software and websites.
Pidoco
A GUI Design Software for clickable Wireframes. Fast and easy like rapid paper prototyping, but completely web-based and with many more features.
JustProto
The first tool to create the prototypes of network and desktop applications!
JumpChart
Start with a strong foundation. Make planning architecture easier with Jumpchart. By creating pages, and subpages you can quickly sketch out the hierarchy of your site.
iPlotz
iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.
ProtoShare
Historically, web-based applications haven't been able to match the speed and complexity of desktop apps—until now.
CogTool
CogTool is a general purpose UI prototyping tool with a difference - it automatically evaluates your design with a predictive human performance model (a "cognitive crash dummy").

Thursday, December 08, 2011

Business to the Clouds

Most likely that you have heard of Software as a Service, the original “as a service” idea, and you are certainly using this type of service on a daily basis either on your smartphone, tablet or by accessing your online bank account.

The “as a service” world has expanded dramatically in the last decade and we are looking now at a plethora of services that reside “in the cloud”, whatever the type, location or reliability of the cloud may we be talking about.

Here is a top of “as a service” I put together that a business these days should not ignore:

  1. UCAAS or Unified Communications as a Service. The UCaaS industry is led by email, collaboration, conferencing and telephony. (Skype, WebEx, NetMeeting, CallTower, Cypress ..)
  2. BAAS or Backup as a Service. Basically, backup to the cloud. (Amazon, Windows Azure, Iron Mountain ..)
  3. DBAAS or Database as a Service (Daas). Virtually, all major database platforms are "up in the cloud today. This is a service that cannot be ignored. (Amazon RDS, Windows Azure SQL ..)
  4. IAAS or Identity as a Service. Identity and access management, administration, audit and verification for cloud based services (Google, IBM, Windows Passport Services, Verizon Business)
  5. SAAS or Storage as a Service. Also serving the loved and appreciated CDN (content delivery network) and powering BaaS. (Amazon S3, Windows Azure Storage, Google Docs ..)

I am planning to update this list and provide some insight into the ups and downs of using this and that service. I am personally concentrating on two major cloud solutions out there: Amazon and Windows Azure.

For the iCloud crowd, you have to appreciate the fact that Apple starts with the user and then figures out the technology part. The experience is great!

Thursday, June 10, 2010

Implicitly Typed or Named Types

An Implicitly Typed Local Variable, var, is “new” and it is subject to restrictions:

    • The declarator must include an initializer.
    • The initializer must be an expression.
    • The initializer expression must have a compile-time type which cannot be the null type.
    • The local variable declaration cannot include multiple declarators.
    • The initializer cannot refer to the declared variable itself

Beyond the obvious use of var with LINQ, you may also clear the code for readability:

var d = new Dictionary<string, Dictionary<string, List<SomeClass>>>();

The entire debate around using the var is founded on readability.

Another pair of eyes see differently so the code has to self explain. That being said, using the var for just about anything is also an exageration. A method that returns a “hairy” type (like List<string>) would be easier to digest in a var but that would not tell those other pair of eyes anything about the purpose and the intention behind. So you would not know how that specific return was “intended to be used”. Just compare List<string> list = MyMethod():

  • var list = MyMethod()
  • IEnumerable<string> list MyMethod()

The second one is actually saying “I am not going to change this, use an index to access list members or modify members.”. It’s quite a lot to say in that few words. But it’s not over because it is also saying “I am going to use this list simply to iterate across it”.

The intention is what you are giving up if you use var. You are not giving anything up where the usage is obvious through the declaration.

var i = 5;
var s = "Hello";
var d = 1.0;
var numbers = new int[] {1, 2, 3};
var orders = new Dictionary<int,Order>();

are equal to

int i = 5;
string s = "Hello";
double d = 1.0;
int[] numbers = new int[] {1, 2, 3};
Dictionary<int,Order> orders = new Dictionary<int,Order>();

I' would write a LINQ query like:

var rows = from DataRow r in parentRow.GetChildRows(myRelation)
           where r.Field<bool>("Flag")
           orderby r.Field<int>("SortKey")
           select r;

But the debate is in the use of var, not in Anonymous Types, Object and Collection Initializers and Query Expressions, but everywhere in your code, for readability.

Here is Eric Lippert’s take on it:

All code is an abstraction. Is what the code is “really” doing is manipulating data? No. Numbers? Bits? No. Voltages? No. Electrons? Yes, but understanding the code at the level of electrons is a bad idea! The art of coding is figuring out what the right level of abstraction is for the audience.

In a high level language there is always this tension between WHAT the code does (semantically) and HOW the code accomplishes it. Maintenance programmers need to understand both the what and the how if they’re going to be successful in making changes. read more ..

Labels: ,

Friday, April 09, 2010

LinX BoX

This Friday’s Top 3 interesting sites visited this week:


This list is published every Friday and values originality. Submit your suggestions for next week as comments.

And don't forget my web templates shop at Bynapse.com - the easy web.

Reciprocal link of the week : Volunteer to Nepal

Labels:

Friday, April 02, 2010

LinX BoX

This Friday’s Top 3 interesting sites visited this week:

 

This list is published every Friday and values originality. Submit your suggestions for next week as comments.

 
And don't forget my web templates shop at Bynapse.com - the easy web.

 
Reciprocal link of the week : Termic

Labels:

Wednesday, March 31, 2010

PDF and E-book creation

pdf iconEvery now and then, someone tries to edit a PDF file and the old Acrobat and Distiller question pops back. What are the roles of those two and why still use Word to edit? Why is Acrobat still important in e-book creation?

First the basics. Adobe Acrobat only reads PDF files. It does not create PDF files, nor can it be used to create content of any kind. It allows setting of certain attributes and anchors, such as creating hyperlinks and setting document security settings.

Distiller is a print driver that outputs PDF files. It is not a reader, nor an application used to create any content.

Adobe Acrobat (not Acrobat Reader) does not edit files, you create your content in a applications like Word, Photoshop.. then print to Distiller (some applications have a “Save as PDF” functionality like Word does in an optional add-on) and save the resulting file as PDF. All word, spreadsheet or image editing or viewing applications should be able to print.

You may open the PDF in Acrobat for fine tuning:

1) create hyperlinks (see Tools/Locate Web Addresses)
2) create title and author (see File/Document Properties)
3) set your desired security level (see File/Document Security)
4) File SAVE AS whatever.pdf. It is important not to just SAVE but to use SAVE AS because this eliminates unused fonts and makes a smaller PDF.

An important decision is to embed fonts in your PDF, or use system fonts. This impacts the size of your PDF but embedding your fonts guarantees that your reader will see the exact page layout you designed. The better system fonts seem to be the small common ones such as Times Roman or Arial. You should know that embedding fonts is a Distiller option (Printer/Preferences/Adobe PDF Settings/General Conversion Settings).

Currently, High speed internet access is becoming the norm and PDF files are generally small. As I was saying in a previous post, content is King.

Monday, March 29, 2010

LinX BoX

This Friday’s Top 3 interesting sites visited this week: 
This list is published every Friday and values originality. Submit your suggestions for next week as comments.
And don't forget my web templates shop at Bynapse.com - the easy web.
Reciprocal link of the week : Smartbyte

Labels:

Friday, March 26, 2010

Web application security

msgConfirmationIt's a real possibility that the web server is locked down and secured.

Web application hacking requires the attacker to understand application logic.

A website may be ripped entirely and stored locally. While this does not give out the code behind, it shows how input is passed, what types of error messages are returned, and the types of input that various fields will accept.

Here is a list of vulnerabilities and possible attacks to add to your list. Also check this list that Microsoft put out:

http://msdn.microsoft.com/en-us/library/ms998372.aspx#pagpractices0001_indexofpractices

Check out this article: http://msdn.microsoft.com/en-us/library/ms998375.aspx

Hidden Fields

Hidden fields used for obscuring values are poor coding. The theory is that if end users cannot see it, it is safe from tampering. Many sites use these hidden value fields to store the price of the product that is passed to the web application. An example pulled from a website is shown here:

<INPUT TYPE=HIDDEN NAME="name" VALUE="Mens Ring">

<INPUT TYPE=HIDDEN NAME="price" VALUE="$345.50">

<INPUT TYPE=HIDDEN NAME="sh" VALUE="1">

<INPUT TYPE=HIDDEN NAME="return" VALUE="http://www.vulnerable_site.com/cgi-bin/cart.pl?db=stuff.dat&category=&search=Mens-Rings&method=&begin=&display=&price=&merchant=">

<INPUT TYPE=HIDDEN NAME="add2" VALUE="1">

<INPUT TYPE=HIDDEN NAME="img"

VALUE="http://www.vulnerable_site.com/images/c-14kring.jpg">

Here is an example tampering with a poorly written shopping cart:

1.

Save the page locally and open the source code.

2.

Modify the amount and save the page. As an example, change $345.50 to $5.99:

<INPUT TYPE=HIDDEN NAME="name" VALUE="Mens Ring">

<INPUT TYPE=HIDDEN NAME="price" VALUE="$5.99">

3.

Refresh the local HTML page and then click Add to Cart. If successful, you'll be presented with a checkout page that reflects the new hacked value of $5.99.

This is an extreme example for illustration purposes that an application should never rely on the web browser to set the values for sensitive data. Even without changing the price, an attacker might just try to feed large amounts of data into the field to see how the application responds. Values from hidden fields, check boxes, select lists, and HTTP headers might be manipulated by malicious users and used to make web applications misbehave if the designer did not build in proper validation.

If you think that there is a shortage of sites with these types of vulnerabilities, think again. A quick Google search for type=hidden name=price returns hundreds of hits.

Cookies

Cookies have a legitimate purpose. Security by obscurity is never a good idea. Cookies used with forms authentication or other remember me functionality might hold passwords or usernames and cookies can be viewed with cookie viewers. Example:

Set-Cookie: UID= bWlrZTptaWtlc3Bhc3N3b3JkDQoNCg; expires=Fri, 06-Jan-2010

The UID value appears to contain random letters, but more than that is there. If you run it through a Base64 decoder, you end up with mike:mikespassword. It's never good practice to store sensitive information, encrypted, in a cookie, a hash should be preferred.

Cross-Site Scripting

Cross-site scripting (XSS) is a computer security exploit that occurs when a web application is used to gather data from a victim. Here is an example of a possible entry in a text field:

<A HREF="http://example.com/comment.aspx?mycomment=<SCRIPT> malicious code</SCRIPT>">Click here</A>

XSS can be prevented by HtmlEncoding displayed data and the input from a form is validated. Prevention also requires that the users remain leery of embedded links.

Interception, Inspection, Modification

A web proxy allows interception, inspection, and modification the raw contents of the traffic, as explained in the following:

  • Intercept Allows you to see under the hood and watch the traffic move back and forth between the client and the server.
  • Inspect Allows you to enumerate how applications work and see the mechanisms they use.
  • Modify Allows you to modify the data in an attempt to see how the application will respond; for instance, injection attacks.

These tools make it possible to perform SQL injection, cookies subversion, buffer overflows, and other types of attacks.

Labels: ,