Category Archives: Uncategorized

CURRRRGGHHHSSSS

AKA CORS

I thought I had CORS all figured out. Of course, like all things programming, the more you think you know the sooner something is going to blow your world wide open. As a guy who codes for the web a lot, these errors are get under my skin. They’re annoying when you know you put a line of code in your server to allow all origins. They’re even more so annoying when the browser (or framework you’re using) tells you that you CAN’T use a wildcard and just allow ALL origins.

Let me leave this link right here: https://enable-cors.org/index.html

If you’re having CORS trouble on your server, it would behoove you to click that link there and finally be done with it. If you’re using ASP.NET chances are you’re using a Windows server and you’ll be able to use either the ASP.NET or IIS6/7 solutions.

My current favorite method for handling CORS with ASP.NET applications ( especially if you’re using SIGNALR and UseCors(CorsOptions.AllowAll) isn’t what you need, as browsers still puke with this in place )

<system.webServer>
     <httpProtocol>
         <customHeaders>
             <add name="Access-Control-Allow-Origin" value="http://localhost:58547" />
             <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE, TOKEN" />
             <add name="Access-Control-Allow-Credentials" value="true"/>
         </customHeaders> 
     </httpProtocol>
 </system.webServer>

This goes in your web.config with <configuration> as its parent element. You can use a wild card in place of the

"http://localhost:58547"

You CANNOT add another origin to the Access-Control-Allow-Origin. Why? No idea. But if you try, you’ll get an error like this

The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:58547, http://wolf-mywebsite.com&#8217;, but only one is allowed. Origin ‘http://wolf-mywebsite.com&#8217; is therefore not allowed access.


 

Advertisements

Being less stupid.

This is going to be basically just a ramble — TLDR version at the bottom.

I’ve been learning IdentityServer3 for the better part of 2, maybe 3 weeks now. I’m a self-taught developer with nearing 3 years of development. When I jumped on, I knew how web servers worked to a degree thanks to taking HTML classes and my Net Sec degree but I never understood how underlying frameworks like ASP.NET MVC and OWIN worked. I pressed a pretty button and BOOM a WEB API / MVC Application was born and I could start coding away. For the most part, how it worked was magic to me but I knew which code did what after the project was spun up and was good to go. While attempting to setup my server w/ IDS3 to accept its own tokens for the API it is also hosting… I’ve begun to start understanding what goes on underneath those templates when you hit the button for a new project…

I was tasked to spin up a new API in a language I’m unfamiliar with, where there are no pretty templates to get things up and running… you just have to understand how the underlying framework works. I failed. I had no idea HOW MVC created an API or, as I’m realizing now, what OWIN even was. Each of these frameworks can be used separately or in conjunction to spin up a flavor of Web API whether you’re using MVC’s global.asax which is tied to a code-behind file for configuration or using OWIN to specify a start-up file which does about the same thing, with a different flow.

I never really took the time to actually learn how the hell these things worked, and I see now I’ve suffered because of it. Here’s an example of what I’ve been talking about:

In an ASP.NET project, there’s a file called global.asax…

The Global.asax file, also known as the ASP.NET application file, is an optional
file that contains code for responding to application-level events raised by 
ASP.NET or by HttpModules. The Global.asax file resides in the root directory of 
an ASP.NET-based application.

When you’re spinning up a WEB API with ASP.NET, this file routes to a code-behind which begins all the configuration for the server. So the markup for it would look like

<%@ Application Codebehind="Global.asax.cs" Inherits=" WolfSoftware.IdentityServer.WebApiApplication" Language="C#" %>

The codebehind for it would then by default have some configuration done

public class WebApiApplication : HttpApplication
 {
    protected void Application_Start()
    {
       AreaRegistration.RegisterAllAreas();
       GlobalConfiguration.Configure(WebApiConfig.Register);
       FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
       RouteConfig.RegisterRoutes(RouteTable.Routes);
       BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
 }

Up until now, this was all really magic code for me. I didn’t understand how this really configured the server, just that it did.

So now, throwing OWIN into play…

Open Web Interface for .NET (OWIN) defines an abstraction between .NET web 
servers and web applications. OWIN decouples the web application from the server,
which makes OWIN ideal for self-hosting a web application in your own process, 
outside of IIS.

So OWIN can do exactly what ASP.NET just did, but without having the global.asax and depending on markup. With OWIN, you declare a class as the startup class and begin configuration from there.

[assembly: OwinStartup(typeof(LobbyGuard.IdentityServer.Startup))]

namespace LobbyGuard.IdentityServer
{
   public partial class Startup
   {
      public void Configuration(IAppBuilder app)
      {
         ConfigureWebApi(app);
      }
      private void ConfigureWebApi(IAppBuilder app)
      {
         HttpConfiguration config = new HttpConfiguration();
         config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
         );
         app.UseWebApi(config);
      }
 }

This has a bit less configuration than what was shown with the ASP.NET but the idea is there. Now that I know (I feel like I did, it just didn’t click when I needed it to…) how it all works… I completely understand now how to spin up the Web API in the new language I was tasked with because I know how more about the framework itself.

TL;DR

I didn’t know how to spin up a ASP.NET or OWIN Web Api in a new language because I’ve been used to C# templates doing the configuration for me; Now I understand the differences between the two, how they both work, and how I could use said new language.

I don’t know what was mystifying me before about any of this, did I just not look? did I not read? Time to be a little less… stupid.

Getting started with package management using NPM’s package.json file in VSCODE

The files used in this blog can be found here: https://github.com/PhilWolf91/blog_package_json

Precursor

I’ve really been getting into VSCode recently when doing my own projects and even at work. One thing I’ve noticed is that packages seem to be handled a little differently between using something like a feature-packed IDE like Visual Studio 2015 compared to Visual Studio Code or another editor like Sublime or Brackets. In Visual Studio 2015 you generally have proj files like a .csproj and/or a .sln which would handle packages using a list of entries in a package.config file which is used by NuGet. The entries would probably look a little something like

<?xml version="1.0" encoding="utf-8"?>
<packages>
 <package id="angularjs" version="1.5.8" targetFramework="net452" />
 <package id="bootstrap" version="3.3.7" targetFramework="net452" />
 <package id="jQuery" version="1.9.1" targetFramework="net452" />
</packages>

This package.config file would install angularjs, bootstrap, and jquery to a nice and tidy Scripts folder and you wouldn’t really have to worry about them again unless you wanted to update the packages. Other Developers coming onto the project would most likely already have those files in source or would be able to run a NuGet restore to get those files into their environment. Package.json works kind of in the same way except it uses packages from NPM, stores those packages in a node_modules directory, and generally come with insanely long file paths that drive Windows and myself mad (the package will have dependencies, which will have dependencies, which will have dependencies… etc, outcome = long ass file paths).

Getting Started

Alright… so lets start off with an empty website and lets add some basic files to start off

starterfiles

All of these files are empty except the .gitignore which has one entry… node_modules/
This is because node_modules shouldn’t be placed into source and only on the machines that will be developing the app or the server running the app (so part of the build/deployment process would be to run ‘npm install’ so that all the dependencies are available on deployment)

Ok. So what the hell do we do now? We’ve got an empty package.json file… what goes in it? Well, with a little help from VSCode’s intellisense… it’s pretty easy to know what can go in this file along with some help from NPM’s documentation located here https://docs.npmjs.com/files/package.json.

As its a JSON file, you might be able to infer that you’d start off with some squiggly brackets and that properties will be listed in normal JSON format using “property”: “value”… so what happens when we attempt to add a new property?

intellisense.png

Well hi there intellisense, long time no see, are those the properties I can use in the file? Why yes, yes they are. I can see two properties already that’ll be helpful, 1) author and 2) dependencies. So if we begin to enter author, we’ll see what this property is suppose to contain in terms of it’s value.

author

OK Cool, so the author property is supposed to include information about me. Now, in your own project you don’t really need to add this property as its really more helpful for when you actually put a lib on NPM so people can know who created the package as that’s what you’re essentially doing by using package.json, you’re entire project is now technically a ‘package’. Filling out the author though intellisense will allow you to tab-complete a new object for its value so once that’s done you can then start to add properties of the object belonging to ‘author’

author2

As you can see, the object that belongs to ‘author’ contains email,name, and url properties. Lets fill those out really quick. After adding those properties to the object ‘author’ will be happy it has been given the correct data. But you may notice there is a green squiggly under the very first bracket… why is this?

missing

Looks like the package.json file is looking for two properties right off the bat that we don’t have, lets go ahead and add those. After seeing how the author property was added, you should be able to have intellisense help you add these two properties. You should end up with something that looks like this:

nextproperties

Ok. So that’s nice, we’ve got this information in our package.json but… WHAT ABOUT THE DEPENDENCIES?!?!? That’s what you’re here for in the first place, right?

Adding Dependencies to your package.json file

So if you read Getting Started section you’ve been exposed to the intellisense provided by VS Code in the package.json file and you might be able to conclude that intellisense will also help us with adding dependencies… you’d be correct. Remember seeing dependencies in the intellisense from before? Lets try adding that property now.

dependencies1

By clicking on the blue ? icon next to ‘dependencies’ when intellisense pops up, you’ll see the full version of the description for this property. Ok, so this property contains the dependencies of our package AKA our project. Let’s tab complete it and see what we get.

dependencies2

Alrighttttt, so this is where intellisense abandons us, and for good reason… there’s a shit ton of packages out there and trying to fit them all in that intellisense window would be kind of asinine and probably be a humongous load to handle. So, in order to begin adding the dependencies we want, we have to go checkout npmjs.com for the packages we need. So say we want Angular…

npmjsangular

That first package looks right to me, lets add it to the dependencies. Add “angular”: “” under dependencies and that will tell package.json to install any version of angular available, which means it will choose highest version it can find and install it.

adddependency

What if we want a specific version, or, near a specific version if that version cannot be found? Well, intellisense can actually help us out here but it requires the first number and decimal to pick up. We can see the current version on npmjs, the screenshot above shows that angular is currently on 1.5.8 so lets start to define the version as 1.5.8… but wait… what is that intellisense?

dependencyintellisense

VSCode can pick up on the rest of version… but sometimes there are different options that’ll show up here. Sometimes you’ll get the prefixes on the version to appear to which show how can infer which version to use based on a specific version. Here’s the documentation from npmjs.com to show you your available options for versions:

versiontypes

So we now know that we can do a lot of different things when specifying the version such as expecting an exact version, multiple ways to choose a version close to the one we specify using > and < variants as well as using git repositories to get packages instead of NPM’s repository. Lets try finishing the angular dependency by using an exact version then adding another dependency to jQuery but use a variant of the version selector.

dependency2

Intellisense on jQuery is giving me the option to use the approximate version, so lets give that a shot. Ok. Cool. How do we actually install these dependencies now?

Installing your dependencies

If you’ve followed through this far, you might realize I’ve made a mistake. The version needs to be in a specific format for node, something like v1.0.0 instead of 1.0 so lets go ahead and change that now.

correctversion

After you’ve filled out your package.json with the dependencies (and fixed the version number!) all you have to do is run ‘npm install’ through the command prompt or a terminal. I prefer using VScode’s built in terminal which can be opened by pressing CTRL + ` (backtick) at the same time.

packagesinstalled

If you look in the TERMINAL window in bottom-middle of the screen you can see ‘npm install’ was ran, a few errors about missing details in the package.json file which aren’t required and the packages were installed. Looking at the Explorer pane on the right you can see that there is now a node_modules directory with angular and jquery installed.

 

Congratulations – You’ve officially created your first package.json file and installed dependencies onto your machine!

TypeScript definition files

As you may know, TypeScript is a superset of JavaScript. However, that doesn’t mean when you use a framework such as Knockout or Angular that TypeScript will be able to interpret what you’re trying to do. Typescript allows you to  use the keyword ‘declare’ on a variable to indicate that it’s supposed to be from an external resource. This will prevent errors but we don’t get any intellisense. This is a pretty error prone way to work, hmm?

2016-03-22_TypeScriptDeclare

Here’s an example of using Declare to define ko. Now… notice something wrong in that code?

2016-03-22_TypeScriptDeclare

What the hell is an oberserverable?! This was an a mistake I honestly didn’t mean to make when I was going to show off what ‘declare’ does. But there it is. I created an error in the first 3 lines of code because I always screw up typing ‘observable’

In order to solve this, TypeScript allows you to make use of Type Definition files. These files allow TypeScript to utilize the frameworks you want to use instead of flying around without that oh-so handy intellisense. Where does one get a Type Definition file? Well…

https://github.com/DefinitelyTyped/DefinitelyTyped

There are TONS and TONS of definition files for TypeScript in the link above, including knockout. Download the file or copy/paste the code into a new one, whatever works. I’d recommend putting it somewhere close to your .ts, but hey, go crazy if you want. Now, if you’re using an editor like Visual Studio you can just drag and drop the file into your .ts and it’ll create a reference to that file, if not, you can just manually enter the reference.

2016-03-22_dts.png

 

2016-03-22_TypeDefinitionFile.png

****This reference is supposed to be commented out! Its not actually used in the JavaScript that gets transpiled! It ONLY helps TypeScript****

Now that there’s a reference to the Knockout Definition file, if I remove my declaration of the variable ‘ko’, I’ll see an error where I misspelled observable.

2016-03-22_spellingError

If I delete my crappy spelling and try again…

2016-03-22_intellisense

Oh… Well hey there intellisense… long time no see buddy.

The definition file even takes the intellisense a step further than what you normally get in regular JavaScript. Say I have a observable and placed “” as the default value. In TypeScript, this will be recognized and intellisense will show you that a string is supposed to go in. JavaScript does not do this because JavaScript doesn’t care. JavaScript is a Honey Badger.

JavaScript:

2016-03-22_jsHoneyBadger

TypeScript:

2016-03-22_observableConstructor.png

 

If you try to put a string for the name value, everything is A-OK; If you try to pass in a number it gives you a red squiggly telling you that the value isn’t the correct type.

2016-03-22_dataType.png

Getting Started with TypeScript in Visual Studio Code

 

TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain 
JavaScript. Any browser. Any host. Any OS. Open Source
--typescriptlang.org

 

TypeScript brings classes, types, constructors, interfaces, and a whole bunch of other shenanigans to JavaScript. Learn more @ http://www.typescriptlang.org/ because they know all the stuff and things.

Prerequisites

  1. Visual Studio Code https://code.visualstudio.com/
    (Any IDE will work but I’ll be setting this up with VS Code)
  2. TypeScript installed (npm install -g typescript)
    This installs the compiler that converts the .ts to .js
    (go to https://nodejs.org/en/ for npm to work in cmd)

Getting Started

Visual Studio Code allows you to work on a single file or in a directory. Navigate to a folder on your drive and select it to be the folder you work in.Some steps if you need help:

  1. Click ‘File’
  2. Click ‘Open Folder…’
  3. Navigate to folder
  4. Click ‘Select Folder’

The folder will now open in Visual Studio. Click it in the explorer so the the little drop down arrow triggers and then select new file.

2016-03-01_23-51-33

A prompt appears to name the file, give a name with a .ts extension (like typeScript.ts).

When the file has been created, it will open in the right pane as an empty file. If you’re used to using a language like C#, this will be a breeze for you. We can start filling this file up by creating a new class. Place the following, or something similar, into the file:

2016-03-04_aClass.png

A class is defined by prefixing it’s name with the keyword ‘class’ and then two curly braces for all the code to go in. We can then put a function inside that’ll do some work for us, you may notice some familiar keywords like ‘public’, ‘static’, and ‘void’. These all do exactly what you think they do if you’re familiar with them. The public keyword sets the accessibility level on the function, the static keyword means it doesn’t have to be newed up, and the void represents the nothingness that the function returns… deep. Inside the function is a normal console.log() with a string.

 

Compile/Transpile… gimme the .js

Now that we’ve got some TypeScript down… how is it actually used? Visual Studio Code comes with a built-in Task Runner that will need to be configured to compile the TypeScript file down to a JavaScript file that’ll actually be used in your view.  Press F1 to open Visual Studio Code’s command prompt and put in Configure Task Runner as the command, press Enter when done. This will have created a .vscode folder in your working directory with a tasks.json file in it.

2016-03-04_TASKSdotJSON.png

Scroll down until you see something familiar to what’s above. the “args” value should be the location of your .ts file in your working directory. When you compile the .ts file it creates a .js file, so I have my .ts in a scripts folder inside my working directory.(TYPESCRIPTLEARNING is my working directory, .vscode and scripts are two folders inside my TYPESCRIPTLEARNING folder). After your change the args to your .ts file’s location save the file. You should now be able to compile the file by pressing CTRL + SHIFT + B which is the shortcut for Run Build Task. A little spinny thingy appears at the bottom left of Visual Studio Code to let you know the task runner is working in the background. When it stops you’ll have .js inside the same directory as your .ts file.

 

So as you can now see, the TypeScript has compiled/transpiled down to JavaScript and now that we’ve got the JavaScript we can attach it to a view. By the way – doing things in TypeScript and reviewing what it compiles down to is actually a pretty neat way to learn some new tricks in JavaScript. Create an index.html in the root of your working directory and add a script reference to the JavaScript file that was generated.

2016-03-04_scriptReference

Save the file and open it in a browser, then open the browser’s developer tools to see the log!

2016-03-04_weveStartedUp.png

So now that we know how to create a TypeScript file, fill it with a class, get some output, and how to generate the JavaScript for it. Just a heads up, if this was a full fledge version of Visual Studio the JavaScript would be auto-generated and we wouldn’t have to compile this every time.

 

Properties, Constructors, Variables

Look over this next block of code, would you kindly.

2016-03-04_propertiesConstructorsVariables

I’m going to guess you can tell what this code does just by looking at it. Lets run through it though just in case.

main() on (lines 2-6) now creates an instance of the Greeter class on Line 4 passing in a string “HULK”. The string passed in is used by the constructor on line 12 to set the value passed in equal to the name property on the Greeter class. You may notice the syntax used to create the variables in the constructor and property, you define the name of the variable and you can declare its type by adding ‘: typeName’ where typeName can be ‘number’, ‘string’, or ‘any’. The property is also referred to throughout the class using the this keyword, this.myProperty,  which may be a little new to you if you’re coming from C# where property names don’t require the keyword to use.

Continuing on, line 5 invokes the greet function of the Greeter class and also passes in a string. Line 16 defines what the greet function does, it takes a variable of type string, has a return type of void just like main(), and then logs a message that uses the name property and the string passed into the function.

If you build this using the task runner, the same way as before using CTRL + SHIFT + B and open up the view, you’ll see the new message appear in the log.

2016-03-05_HulkSmash

So we’ve now got at least and understand of how the basic building blocks work in TypeScript, nothing fancy as of yet. We know how to set up Visual Studio Code to be able to read and compile/transpile ( I’m really still not sure which term I’m supposed to use, I feel like transpile is a better word for it than compile ) and how to use the generated JavaScript file in a view. I’m probably going to be doing some follow up posts with TypeScript and eventually with Angular 2 so if this interests you, stick around for more posts 😀

 

Creating an HTML5/AngularJS hybrid mobile app using the Ionic CLI

The Ionic Framework is an open source front-end SDK which helps developers create beautiful hybrid HTML5 mobile applications alongside with AngularJS. Creating an app while using the Ionic Framework allows for the GUI of mobile applications to be built uniform manner with relative ease. With the CLI commands provided after downloading Ionic Framework it only takes seconds to begin work!

Installing the Ionic Framework

Ionic is installed with npm, which means that Node.js will need to be downloaded and installed first. This is easily done by visiting https://nodejs.org and clicking the INSTALL button right smack dab on the front page.

2015-05-17_NodeJs

Once node is installed, you have access to using the npm (node package manager) which will allow you to install thousands of different packages like Ionic. Open up a command prompt (or Power Shell) and issue the following command

npm install -g Ionic

This will install Ionic globally on your system and allow the Ionic commands to be used from the command line

2015-05-17_InstallIonic

Creating an Ionic application

Now that Ionic has been installed globally, creating the base application will take only seconds using the command line. The Ionic CLI provides a couple templates to create an application, the possible templates are Blank, Tabs, and Sidemenu. Let’s take a look at what these will look like, from the command line, enter the following:

Ionic start myTabsApp tabs

2015-05-17_IonicTabs

This command will create an app called myTabsApp with the tabs template in place in whichever directory you are currently in.

2015-05-17_IonicTabsDirectory

We can now launch the application as-is by using the Ionic Framework command Ionic serve, this will create a locally hosted version of the application for you much like starting an application in Visual Studio would do.

2015-05-17_IonicServe

The tabs application will look like this once ‘served’

2015-05-17_IonicServeTabs

As the template name indicated, there are 3 tabs at the bottom of the page which allows you to switch between different pages using provided tabs. If we used Ionic Start to create an app using the sidemenu template, this is what it would look like:

2015-05-17_IonicSideMenu

and finally, here’s the blank template which provides the most basic form of the app with of course all the required resource to build out what the other templates provide from the get-go

2015-05-17_IonicBlankApp

next, let’s take a look at the different directories that were generated and try to make some sense out of it. Here’s what the structure of an Ionic application looks like:

2015-05-17_IonicStructure

There’s a couple directories here that control different parts of the application. the www directory is where the actual application is housed and contains all the html, js, css, and image files that your application will use. The resources folder contains items like icons and splace screens for the different platforms you’ll be deploying to like Android and iOS. The plugins directory includes the different ionic and cordova plugins that will help your application feel more native such as the com.ionic.keyboard plugin. The platforms folder contains the code required to build your application for the different mobile platforms and also helps to emulate the app using Cordova’s or Ionic’s emulate CLI commands.

By default, the platforms folder will be empty, in order to add the platforms you want to build for issue the following command

Ionic platform add <platform>

where platform could wp8 (windows phone 8), android, ios, or blackberry. Once a platform has been added, you’ll have the ability to emulate your application for that given platform using the following command

Ionic emulate <platform>

As a heads up though, some extra setup may be required in order to get the emulators to work correctly.

Protecting Azure VM from unwanted attempted access with ACLs

For about the past two weeks, I’ve been noticing that my server has been running a little slow. It’s a tiny server and I was just chalking it up to that – small server = not great response, no biggie right? Yesterday however, My server was down for good, which actually turned out be unrelated… but what I found was a little unsettling. While I was looking through my servers Event Viewer I noticed a lot of failed log ins going to MSSQL… and I mean, 4-5 a minute failed log ins… for over a week. Needless to say, somebody was trying to get access to the data in my SQL via some sort of Brute-Force or Dictionary attack.

Here what Event Viewer looked like (x10000)

2015-04-14_UnderAttack

There were tons of different IPs being used to attempt these log ins

222.186.51.165, 219.235.1.82, 111.73.45.18, 107.160.9.212 — the list goes on

this means someone’s also spoofing their IP address like anyone trying this sort of thing would. The one in the above image for example is supposedly from the city of Nanjin in Jangsu, China… another one identified as being from California. You can easily find out where an IP address is located by using free services like whatismyip.com, however, it doesn’t mean much when your attacking is spoofing their IP address to throw you off the trail.

This could have been easily avoided had I taken the necessary preventative measures. Azure’s VM management allows for the easy control of an ACL over each VM you may have. ACL, if you don’t already know, stands for Access Control List. What it does, is exactly like what it sounds like it does, it’s a list that controls access to your machine. This is done by permitting and/or denying selected ranges of IP addresses.

When you choose a VM from from your list of Azure items, you’re brought that VM’s dashboard.

2015-04-14_TheDashboard

The third item on the row of tabs for your VM are your endpoints which are used for connecting to that VM via Remote Desktop, PowerShell, and SQL. Each endpoint is allowed to have to have it’s own ACL in order to provide access from whomever may need that resource and deny everyone else that shouldn’t have access. When you choose one of the endpoints, in the footer menu of the page, the option for ‘MANAGE ACL’ will appear.

2015-04-14_MANAGE_ACL

Once MANAGE ACL has been selected, a window will appear

2015-04-14_ACL_LIST

This is where you’ll actually provide the permitted IP ranges as well as the denied IP ranges. ACLs work top to bottom, if you deny an address up top, then permit it lower down, that address will be denied. If you do the opposite and permit an address up top then deny that address lower down the list, that address will be permitted. The remote subnet requires a CIRDR address which uses a {ipAddress}/{subnetBits} notation – you may need to do some research on this to permit or deny the correct ranges of addresses. The best way to ensure that no one but you want to permit access to the endpoint is allowed in is by putting the permitted address in then on the bottom of the list, enter the CIDR address 0.0.0.0/0 — this will deny everyone who was not approved before this point. Any address afterwards will not be permitted.

2015-04-14_ACL_LIST_MODIFIED

Addresses beginning in 192.168 area addresses reserved for interfaces that aren’t actually connected to the internet – so this address isn’t actually viable. You can use WhatIsMyIP.com here as well to discover what your actual Public IP address is. Once your ACL list is finished, click the checkbox on the bottom and Azure will set the rest up for you in a matter of seconds.