Securing Single-page-application from CSRF and XSS using CSP + localStorage

Question

I have a single page application, having sensitive content, and needs to be secured. This question is specific with securing against XSS and CSRF attacks.

Explan

Answer 1

I was recently thinking about a very similar problem - but the difference in my scenario has a greater impact than your case.

Specifically I was thinking about an OLTP application which used cacheable content for all the HTML and AJAX/SJAX + JSON for retrieving transactional data. I've yet to consider in depth wither to use a conventional POST or AJAX/SJAX for sending the transactional data back to the server.

The advantage of this approach for me (over a conventional HTML / GET / POST OLTP) is that everything apart from the transactional data becomes cacheable allowing for optimal capacity, and based on the expected usage scenario a performance benefit.

It's also a gateway to implementing PJAX on the site thereby eliminating the startup cost retrieving content from the local cache and parsing. But I'm waffling about stuff which is not really relevant to your question.

Your non-cookie approach similarly isolates the cacheable content from the data - this is not strictly true of all single page applications, but with fewer page level transitions the net benefit is not as great.

As you say, CSP reduces the likelihood and impact of a XSS attack, but it does not eliminate it - in the case where the script is stored on the victim site and replayed to visitors. Despite there being no real "cross-site", this is still described as a type of XSS attack. And it still allows a request forgery to be directed at the same-origin.

Hence unless you can be completely confident that your CSP will never allow unsafe-inline, I think you still need some sort of CSRF protection in there. The Microsoft solution is neat in that it is stateless - but is reliant on the page of your single page application being non-cacheable (which eliminates the performance benefit).