ASP.NET MVC – Smart Way to Prevent Cross-Site Request Forgery (CSRF) Attempts – WebAPI (AJAX XHR) and Normal POST Operations

Monday, August 12th, 2019

ASP.NET MVC – The Smart Way to Prevent Cross-Site Request Forgery (CSRF) Attempts

WebAPI (AJAX XHR) and Normal POST Operations

If your ASP.NET MVC application uses some WebAPI endpoints which are called using XHR (AJAX) requests from clientside JavaScript, you can still protect against CSRF attacks by validating the origin of such a request (when it is an AJAX request) or perform the default action of validating the anti-CSRF token (for POST form requests).

I modified the below code from https://stackoverflow.com/questions/35085507/set-validateantiforgerytoken-attribute-to-get-post-for-same-action-mvc5#answer-35085970 or ARCHIVE

using System.ComponentModel;
using System.Diagnostics;
using System.Diagnostics.CodeAnalysis;
using System.Web.Helpers;
using System.Linq;
using System.Collections.Generic;
using System.Configuration;
namespace System.Web.Mvc
{
    /// <summary>
    /// Cross-Site Request Forgery (CSRF) Prevention Filter for WebAPI and Normal MVC Controllers
    /// Normal POST operations = token is checked
    /// Normal controller GET operations = ignored
    /// WebAPI requests = check to make sure they were initiated by an AJAX request from a trusted origin
    /// </summary>    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
    public sealed class ValidateAntiForgeryTokenPOSTOrAJAXOrigin : FilterAttribute, IAuthorizationFilter
    {
        private string _salt;        

        public ValidateAntiForgeryTokenAttribute2() : this(AntiForgery.Validate)
        {
        }        

        internal ValidateAntiForgeryTokenAttribute2(Action validateAction)
        {
            Debug.Assert(validateAction != null);
            ValidateAction = validateAction;
        }
        
        [SuppressMessage("Microsoft.Naming", "CA2204:Literals should be spelled correctly", MessageId = "AdditionalDataProvider", Justification = "API name.")]
        [SuppressMessage("Microsoft.Naming", "CA2204:Literals should be spelled correctly", MessageId = "AntiForgeryConfig", Justification = "API name.")]
        [Obsolete("The 'Salt' property is deprecated. To specify custom data to be embedded within the token, use the static AntiForgeryConfig.AdditionalDataProvider property.", error: true)]
        [EditorBrowsable(EditorBrowsableState.Never)]
        
        public string Salt
        {
            get { return _salt; }
            set
            {
                if (!String.IsNullOrEmpty(value))
                {
                    throw new NotSupportedException("The 'Salt' property is deprecated. To specify custom data to be embedded within the token, use the static AntiForgeryConfig.AdditionalDataProvider property.");
                }
                _salt = value;
            }
        }

        internal Action ValidateAction { get; private set; }        
        
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            string validOrigins = ConfigurationManager.AppSettings["AllowedEnvironments"]; // Example in web.config <add key="AllowedEnvironments" value="https://testurl.com:4443,https://testurl.com,https://testurl2.com" />
            bool skipCheck = false;
            
            if(ConfigurationManager.AppSettings["LocalDevMode"] == "1")
            {
                skipCheck = true;
            }
            
            // In AJAX requests, the origin header is always sent (UNLESS IT'S COMING FROM THE SAME ORIGIN), so we can validate that it comes from a trusted location to prevent CSRF attacks - but if one isn't sent, we won't do anything (assume trusted)
            // In which case, we don't need to do any token checking either 🙂
            if(!skipCheck && !string.IsNullOrEmpty(validOrigins))
            {
                List<string> validOriginURLs = validOrigins.Split(',').ToList();
                if(filterContext.HttpContext.Request.Headers["Origin"] != null && !string.IsNullOrEmpty(filterContext.HttpContext.Request.Headers["Origin"].ToString()))
                {
                    string origin = filterContext.HttpContext.Request.Headers["Origin"];
                    if(!validOriginURLs.Contains(origin))
                    {
                        filterContext.Result = new RedirectResult("~/Home/InvalidRequest");
                        skipCheck = true; // Still set to true to prevent additional validation
                    }
                    else
                    {
                        skipCheck = true;
                    }
                }
            }
        
            if(!skipCheck){
                var request = filterContext.HttpContext.Request.HttpMethod;
                if (request != "GET" && (!filterContext.HttpContext.Request.IsAjaxRequest() || (filterContext.HttpContext.Request.IsAjaxRequest() && (filterContext.HttpContext.Request.Headers["X-Request-With"] == null || filterContext.HttpContext.Request.Headers["X-Requested-With"] != "XMLHttpRequest"))))
                {
                    // Do normal form POST antiforgery token check
                    if (filterContext == null)
                    {
                        throw new ArgumentNullException("filterContext");
                    }                    try
                    {
                        ValidateAction();
                    }
                    catch(Exception e)
                    {
                        filterContext.Result = new RedirectResult("~/Home/InvalidRequest");
                    }
                }
            }
        }
    }
}

 

Using JQuery Color Picker and Cookie Plugins to Change Element Background Colors Dynamically Based on User Preference

Sunday, April 21st, 2013

Changing Website Element Colors Dynamically Based on User Preferences

Wouldn't it be cool to dynamically style a website or webpage based on a user's favorite color?  Thanks to several JQuery plugins, it is now possible to do so!  The JQuery Color Picker plugin allows users to select a color based on a color pallete / color wheel similar to those found within photo editing software such as Adobe Photoshop or Corel PaintShop Pro.  The JQuery Color Plugin can darken, lighten, add, multiply, subtract, find color hues, change rgb values, and manipulate colors in all sorts of ways you probably never imagined possible.  The final piece to dynamically styling a page based on a user selected color is to save the picked color's value in a cookie using the JQuery-Cookie Plugin.  When any page loads, you will need to use the document.ready JQuery function to read the cookie and restyle elements as necessary.  If a cookie is not set, the default color can also be specified here. 

Here's a screenshot of the JQuery Color Picker in action:

To load / use the color picker, place this function within the document.ready function:

// Color Picker Loader
    $('#colorpicker').ColorPicker({
    
       color: defaultColor,
         onShow: function (colpkr) {
              $(colpkr).fadeIn(500);
              return false;
         },
         onHide: function (colpkr) {
              $(colpkr).fadeOut(500);
              return false;
         },
         onChange: function (hsb, hex, rgb) {
          var origColor = '#' + hex;
       
          // Set the main div background colors to what was selected in the color picker
              $('#colorpicker').css('backgroundColor', origColor);
          $('#origColor').css('backgroundColor', origColor);
          
          // Set the cookie
          $.cookie("color", '#' + hex, { path: '/' });
          
          // Set the dark and light colors (multi-iterations)
          darkColor = $.xcolor.darken('#' + hex).getHex();
          for (var i = 0; i < iterations; i++) {
            darkColor = $.xcolor.darken(darkColor).getHex();
          }
            
          lightColor = $.xcolor.lighten('#' + hex).getHex();
          for (var i = 0; i < iterations; i++) {
            lightColor = $.xcolor.lighten(lightColor).getHex();
          }
          
          
          // Set the light and dark divs
          $('#darkColor').css('backgroundColor', darkColor);
          $('#lightColor').css('backgroundColor', lightColor);
          
          // Change class attributes
          $('.light').css('backgroundColor', lightColor);
          $('.dark').css('backgroundColor', darkColor);
          $('.pad').css('backgroundColor', origColor);
          
          // Set the border
          $('#colorpicker').css('border-color', darkColor);
          
          
         }
    }); 

Assign a DIV element the ID of "colorpicker" in your HTML file to activate the color picker.    Don't change the "onShow" or "onHide" JQuery sub-functions of the ColorPicker.  When a user chooses a color from the color picker, the color picker "onChange" function is called.  This is where you need to define what should be done with the color the user has picked.  In my example, I call the $.xcolor.lighten and $.xcolor.darken Color Plugin functions to generate a lighter and darker color.  I use then use the color selected, a lighter variant of that color, and a darker variant of that color to style elements appropriately to keep text readable while offering a new color scheme.  As you can see from the code above, I mainly change the css attributes of certain classes, which the elements have been assigned.  What is changed is the backgroundColor and border-color of certain classes based on the three colors that were generated.

To see what other cool things you can do with all of these plugins, check out the links in the first paragraph.  Click here to see a live demonstration of all three plugins in action and download the source for how it all works based on the example discussed above.  The only Javascript file that needs to be changed to experiment with this sample is the "main.js" file within the "js" folder.

I hope this guide helps.  The plugin websites did not provide all of the code needed for a working sample, but luckily, I did the combination work for you.  Go ahead and use my source for anything!  Please comment if you have questions.