Using CSRF with Spring Security and AJAX calls

I’m fairly new to Spring and especially Spring Security, so I had quite the time figuring out why ajax calls were failing after enabling CSRF (to allow ClearTrust)

First we allowed CSRF which is a strange syntax in my opinion

<security:csrf disabled="false" />

After we did that we were getting “405: Method Not Allowed” responses on all of our ajax requests. After some googling we discovered this is a security precaution to prevent cross site attacks, which makes a lot of sense. The biggest problem was we had probably 25 ajax calls and didn’t want to spend all day updating them individually, so we ended up adding in the csrf token and header name into the head meta tags in our application. This meant they were available on every page automatically and since they stay valid as long as the users’ session this made the most sense.

Added to the header template

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

Added to each JavaScript template (or could be added to a global JS file as well)

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

Added to each ajax call

, beforeSend: function( xhr ) {
  xhr.setRequestHeader(header, token);
}

Showing all hidden elements on a page using jQuery

I’ve been working on a large browser compatibilty project which involves also giving the page a facelift to bootstrap. We’re mostly modifying XML which creates the markup and there are a few pages with a lot of rules that hide element based on certain scenarios and hitting those scenarios became very tedious when we were already 98% sure the page would work. The divs are hidden on the page and aren’t just not generated server side. The elements are hidden both by adding a class of hidden and by using display:none.

I ended up writing a bookmarklet that runs through all the elements in the DOM and removes the style attribute and removes the hidden class from all elements. This isn’t being used anywhere other than on a developers machine, so efficiency wasn’t the goal here. The goal was to show all hidden elements to make sure they’re being styled correctly. They’re being styled with classes, so that’s why removing the style attribute was an easier option.

Here’s the jQuery code

$(function() {
  $("body *").each(function() {
    $(this).removeAttr("style");
    $(this).removeClass("hidden");
  })
});

Here’s the bookmarklet. You can simply create a new bookmark with this as the URL and click it to show the hidden elements.


javascript:(function(){$(function(){$("body *").each(function(){$(this).removeAttr("style"),$(this).removeClass("hidden")})})})()

Cross browser compatible numbers only textbox

While working on a browser compatibility project recently I ran into an issue where using an onkeypress attribute on an input field was firing when using the left and right arrows keys and the delete button. This functionality differs from how IE and Chrome work, so the old code that used to be IE only compatible wouldn’t let a user do anything except type numbers (Good!) and use the backspace (Bad!). The users needed to be able to use arrow keys and the delete button in Firefox.

Since we’re only supporting the latest browsers, IE 11, Chrome, Safari and Firefox, We thought using an input with type=”number” was a good solution, but it adds awful looking up/down arrow buttons in the field and it actually doesn’t do anything to prevent letters from being entered, so that was obviously out.

We tried countless regEx patterns but finally settled on the following which lets you use all arrow keys and the delete key, but still only allows you to enter numbers into the text field. Big thanks to Scott Busche for coming up with the correct regEx

$('.numbersOnly').keyup(function() {
var pattern = new RegExp(/\D/);
var validString = $(this).val().replace(pattern, '');
if ($(this).val() !== validString) {
$(this).val(validString);
}
});

Rather than calling a function on key press however we decided to add a specific class to these fields and handle the result with a jQuery selector. The downside to this function is that you are actually allowed to type letters and special characters and they will show up for a millisecond, but they will be removed from the input box.

If anyone has anything that works better and is compatible on all the latest browsers I’d love to hear your solution.

Checking an HTML page for duplicate IDs using jQuery

At work our testers make use of the ID elements on HTML tags quite frequently and when they’re not unique, it usually causes them issues with testing. To avoid the manual parsing of trying to find duplicate IDs in the page source I looked for (and found) a JavaScript function that loops through each ID found on the page and outputs any duplicates into your console.

This code does require that jQuery is defined on the page you are testing.


javascript:(function () {
var ids = {};
var found = false;
$('[id]').each(function() {
if (this.id &amp;&amp; ids[this.id]) {
found = true;
console.warn('Duplicate ID #'+this.id);
}
ids[this.id] = 1;
});
if (!found) console.log('No duplicate IDs found');
})();

You can copy and paste the entire JavaScript function into a bookmark for quick access.


javascript:(function () { var ids = {}; var found = false; $('[id]').each(function() { if (this.id &amp;&amp; ids[this.id]) { found = true; console.warn('Duplicate ID #'+this.id); } ids[this.id] = 1; }); if (!found) console.log('No duplicate IDs found'); })();