Embed CSRF token into Ember CLI application

Question

I'm designing my new Ember CLI application. I gonna use Ember Simple Auth for authorisation. And I also need to use CSRF protection. I know how to inject the token to requests. The problem is how to embed the token to the application in a right way.

It is required the token to be generated on the backend side and to be embedded into the page. And it should be the same one that API uses to verify requests.

In my case API and Ember application would be served by the same web server (most likely Microsoft IIS, since API is build with .NET MVC). So the web server should generate the token and embed it somehow into the Ember application once its index file requested.

But Ember CLI generates static index.html file during its build process. And I see just two ways of embedding the token.

The first one is to parse Ember's index.html file on each request and embed CSRF token metatag to the proper place. I don't really like this way.

The second one is to make Ember CLI produce index.aspx instead of index.html during the build process. In this case web server would put the token automatically. I like this way better, but i'm not sure if it's possible. And if it is then how to do this?

Maybe, there is another better way? Any help and advices would be appreciated.

Answer 1

It is possible to implement your second idea. You need to specify options.outputPaths.app.html property of EmberApp in ember-cli-build.js:

const app = new EmberApp({
    outputPaths: {
        app: {
            html: 'index.aspx'
        }
    }
});

Doing this will result in Ember CLI writing index.aspx instead of index.html to filesystem:

You can read more about configuring output paths of your Ember CLI application in user-guide.

You can also dig directly in Ember CLI's ember-app.js source code to see if you can adjust options more to your needs.

Is it possible to make it environment-dependent? It works perfectly for production build. But it doesn't work for development since Ember CLI can not serve .aspx files. So it would be nice to overwrite output files for production builds only and use generic ones for development and test environments.

You can achieve this by checking value of app.env. So, in ember-cli-build.js, instead of passing outputPaths as argument, use following technique:

const app = new EmberApp();

if (app.env === 'production') {
    app.options.outputPaths.app.html = 'index.aspx';
}

This way you still get index.aspx in dist/ when building for production, but development and test environments' outputPaths options are untouched and live development/testing works.