You wrote that XSS is much less risky that CSRF, but 'based on our experience' argument is not really strong. For example OWASP study lists CSRF as easier to prevent than XSS: http://owasptop10.googlecode.com/files/OWASP%20Top%2010%20-%... To me this makes sense, XSS vulnerability can be introduced anywhere in your application code, CSRF can be dealt with in a single middleware, which greatly simplifies prevention.
How about https only cookies? Can you enforce that tokens won't ever be send over http? Can your enforcement work in a presence of XSS (as is the case with a combination of 'secure' and 'httponly' cookie flags).
With tokens it is easier to do authenticated cross origin requests. But a new mechanism may be vulnerable to a new class of vulnerability, where a web app will be tricked to make such requests to evil domains (it may sound unrealistic, but remember that CSRF was discovered many years after cookies were introduced).
Cookies can also require no server side state. You can put signed, encrypted content in them and many frameworks support this, which shrinks a list of token benefits a bit.
I do think that token based approach is more elegant from the architecture point of view, because you don't need to deal with two different authentication schemes to support browser traffic and API calls, but I'll still stay with cookies for browser auth.
Basically render a token with a hidden input with your form associated with the user session and as you mention use a middleware to validate the token on every request.
So, let's talk about Syncronizer Token and "Single Page Applications" which was the topic on our first blog post. The recommended way for this is to get a token the first time and use the token in a header in every AJAX request. 
If you think XSS is that common, the http only cookie+synchronizer token is more work and equally vulnerable to CSRF.
While with JWT you can stole my token if the site is XSS-vulnerable, but you can't trick me with the browser to do things I didn't meant.
I still consider XSS is easy to prevent than CSRF, you just need to escape user inputs always which is what every major template engine does by default. Usually you get the common syntax which does ESCAPE the user input.
Why OWASP states the contrary? I have one word: php. I blame php, wordpress and wordpress plugins. Consider that half of the internet runs on wordpress.
We are here to answer any question about this one.
(The code sections don't highlight or don't show up at all, etc).
For example, I can't use an 'img' HTML tag to include images that require authorization, because browser won't set a Bearer header while requesting images?
With opaque bearer tokens you effectively have the same claims but these are stored on the server (e.g. in a database) and keyed by the opaque token value. The claims never leave the server.
Is that roughly correct?
e.g., can I get the browser to send the auth header when the user clicks a link after having signed in? Suppose I'm not using any JS on my page at all, or the browser has JS disabled.
If you really don't want to do that, you could probably work up something like the author discusses in item No. 5, and generate query parameter "tokens", and append those query params to every link on the rendered page.
I've just started working with AngularJS with a Django backend and authenticating users has been one of the biggest issues I've faced so far.
Jose Paddilla is using it with django and he wrote a blog post:
and he wrote the backend for django:
I hope this help you.