Tag Archives: Angular

Getting CSRF to work with Rails and Angular

I had trouble posting to my Rails server from an Angular controller until I found this SO post. In /app/controllers/application_controller.rb I added the following code.

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  after_action :set_csrf_cookie_for_ng

  def set_csrf_cookie_for_ng
    cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
  end

  protected

    # In Rails 4.2 and above
    def verified_request?
      super || valid_authenticity_token?(session, request.headers['X-XSRF-TOKEN'])
    end
end

Open a Text File with Angular

I had some trouble this weekend figuring out how to open a text file in Angular. My luck turned around when I found this StackOverflow question. The question addressed loading an image, but I was able to fiddle with this Plunker example until I was able to load text files. (Basically, I replaced every instance of “readAsDataURL” in the upload.js file with “readAsText”.)

Continue reading Open a Text File with Angular

Blum Mental Hash with Node and Angular

In this post I’ll walk through building a simple Blum Mental Hash application using Node and Angular. I’ll write my Node and Angular code using CoffeeScript, and I’ll build my HTML templates with Jade.

Writing the Application in CoffeeScript

I really enjoy CoffeeScript. I get that real programmers don’t use CoffeeScript, but I don’t care. Javascript makes me crazy. This is my CoffeeScript code–I require a bunch of stuff: express, http, jade. Then I define an express object named app and set some settings on it. Then I tell the root path, '/', to use the './static' subdirectory on the server. Then I tell any GET requests to '/' to return HTML that’s been rendered by jade using my index.jade template.

#!/usr/bin/env node
# app.coffee

express = require "express"
http = require "http"
jade = require "jade"

app = express()

app.set( 'views', './static' )
app.set( 'view engine', 'jade' )
app.engine( 'jade', jade.__express )

app.use '/', express.static('./static')

app.get '/', ( req, res ) ->
    res.render( 'index.jade' )

server = app.listen 8000, ->
    host = server.address().address
    port = server.address().port
    console.log 'Example at http://%s%s', host, port

We can compile this guy at the command line by calling,

 
coffee -c app.coffee

This will create an app.js file in your working directory.

The Controller

The file contoller.coffee sits in the subdirectory ./static/js/. The first items, mapping and perm, should ideally be picked by the user. In this example I’ve hard coded them for convenience. The convert() function brings everything together; it combines mapping and perm in such a way as to hash a string of capital letters. From there myapp.controller can compute the hash for the user.

#!/usr/bin/env node
# ./static/js/controller.coffee

mapping =
    A: 4,   B: 9,   C: 4
    D: 5,   E: 8,   F: 5
    G: 7,   H: 1,   I: 8
    J: 3,   K: 6,   L: 8
    M: 9,   N: 0,   O: 9
    P: 0,   Q: 6,   R: 1
    S: 9,   T: 6,   U: 4
    V: 7,   W: 5,   X: 0
    Y: 9,   Z: 3

f = ( x, mapping ) ->
    ###
    Maps a string `x` to an array of digits
    ###
    a = []
    for i in x
        a.push( mapping[i] )
    return a

perm = [ 8, 2, 5, 4, 9, 0, 3, 7, 1, 6 ]

permute = ( i, perm ) ->
    ###
    Returns the next value in the permutation
    ###
    idx = perm.indexOf( i )
    idx = ( idx + 1 ) % 10
    return perm[ idx ]

g = ( a, perm ) ->
    ###
    Hashes a list of digits into a string of digits
    ###
    b = [ permute( ( a[0] + a[ a.length-1 ] ) % 10, perm ) ]
    for i in [1...a.length]
        b.push( permute( ( b[i-1] + a[i] ) % 10, perm ) )
    return b.join("")

convert = ( x ) ->
    ###
    Convert a string of characters to a hashed string of digits
    ###
    a = f( x, mapping )
    return g( a, perm )

myapp = angular.module( "myapp", [] )

myapp.controller "controller", ($scope) ->
    $scope.plain = ""
    $scope.b = ""
    $scope.update = ( plain ) ->
        $scope.b = convert( plain )

This CoffeeScript file should also be compiled into a Javascript file.

The View

The index.jade file lives in ./static. This prompts a user for a password, and then returns a hash of that password below. That’s it.

doctype html
html
  head
    script(src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js")
    script(src="/js/controller.js")
    link(rel="stylesheet",href="css/style.css")
  body(ng-app="myapp")
    h1 Manuel Blum's Mental Hash (BMH)
    div(ng-controller="controller")
      |Password: 
      input(name="Password: ",type="text",ng-model="plain")
      button(ng-click="update(plain)") Convert
      p Hash: {{ b }}

We can serve the page by calling

node app.js

from the command line, and then navigating to localhost:5000.