tl;dr — If your SPA uses a private REST API, use CORS and a CSRF Token header. If your SPA uses a public REST API, use a SameSite Strict cookie for mutating operations (if you only support newer browsers) or separate API security domains (if you support older browsers as well); public API clients just use OAuth Bearer tokens.

tl; dr —如果您的SPA使用私有REST API，请使用CORS和CSRF令牌标头。 如果您的SPA使用公共REST API，请使用SameSite Strict cookie进行操作更改(如果您仅支持更新的浏览器)或单独的API安全域(如果您也支持旧的浏览器)； 公共API客户端仅使用OAuth Bearer令牌。

The world of web app security is a strange place. It’s a bit like playing whack-a-mole, because one security measure may often introduce a new security hole.

Web应用程序安全性的世界很奇怪。 这有点像打w子，因为一种安全措施可能经常会引入一个新的安全漏洞。

This post walks through the CSRF-vulnerability analysis I did recently for my company, and the thinking that went behind it. In particular, we wanted to ensure that our React-based app is secure from CSRF attacks, even though the backend REST API doesn’t require CSRF tokens.

这篇文章介绍了我最近为公司所做的CSRF漏洞分析以及其背后的想法。 特别是，即使后端REST API不需要CSRF令牌，我们也要确保基于React的应用程序免受CSRF攻击。

CSRF (CSRF)

Let’s start with Cross Site Request Forgery (CSRF). This is when a malicious website is able to perform actions on your web app within the context of a logged-in user. This happens because your browser helpfully sends your auth credentials along with the request, which is how the site knows that you’re still logged in. Most of the time, this is an HTTP cookie, but you can also be susceptible with any user agent -managed credentials (such as HTTP basic auth, HTTP digest auth, or even mTLS).

让我们从跨站点请求伪造 (CSRF)开始。 这是指恶意网站能够在已登录用户的上下文中对您的Web应用程序执行操作的情况。 发生这种情况是因为您的浏览器会帮助您将身份验证凭据与请求一起发送，这是网站知道您仍在登录的方式。大多数情况下，这是一个HTTP cookie，但是您也容易受到任何用户代理的影响管理的凭据(例如HTTP基本身份验证，HTTP摘要身份验证，甚至是mTLS)。

How do you prevent this? Your first stop when dealing with any web app security should be OWASP; sure enough, they have a whole guide to CSRF prevention. The traditional mitigation involves generating a CSRF token on the server and added as a hidden form field during server-side rendering.

您如何防止这种情况？ 处理任何Web应用程序安全性的第一站应该是OWASP； 的确，他们有CSRF预防的完整指南 。 传统的缓解措施包括在服务器上生成CSRF令牌，并在服务器端渲染期间将其添加为隐藏表单字段。

But how does this work for a modern web development stack, where you have a javascript “Single Page App” (SPA) frontend backed by a REST API?

但是，对于具有REST API支持的javascript“单页应用”(SPA)前端的现代Web开发堆栈，这如何工作？

On its face, the easiest way to prevent CSRF is to not use cookies to store your auth. No cookies, no CSRF. However, this just opens up a new problem- where do you store your auth now? The most obvious second choice is to use local storage. However, this exposes your web app to Cross Site Scripting attacks (XSS), and is thus not recommended.

从表面上看，防止CSRF的最简单方法是不使用cookie来存储您的身份验证。 没有Cookie，没有CSRF。 但是，这只是一个新问题-您现在将身份验证存储在哪里？ 第二种最明显的选择是使用本地存储。 但是，这会使您的Web应用程序遭受跨站点脚本攻击(XSS)，因此不建议这样做。

XSS (XSS)

Cross Site Scripting (XSS) is one of the most common and most dangerous attacks online. This effectively enables an attacker to coerce your website to run arbitrary code, usually JavaScript, in the context of another logged-in user.

跨站点脚本 (XSS)是最常见和最危险的在线攻击之一。 这有效地使攻击者可以在另一个登录用户的情况下，强迫您的网站运行任意代码，通常是JavaScript。

XSS is particular dangerous if it enables the attacker to access their auth credentials or session directly. The best mitigation again exposing your auth credentials in the first place. To avoid XSS, you want to store your auth in a HttpOnly, Secure cookie. This ensures that JavaScript is unable to read it, and it will only ever be sent over HTTPS.

如果XSS使攻击者能够直接访问其身份验证凭据或会话，则它特别危险。 最好的缓解措施再次将您的身份验证凭据公开。 为了避免XSS，您要将身份验证存储在HttpOnly安全cookie中。 这样可以确保JavaScript无法读取，并且只能通过HTTPS发送。

But this takes us right back to our original CSRF vulnerability.

但这将我们带回到了我们最初的CSRF漏洞。

SOP / CORS (SOP/CORS)

Some people mistakenly believe that the Same Origin Policy (SOP) or Cross-Origin Resource Sharing (CORS) should protect SPAs from CSRF attacks. But even if your SPA uses XHR requests for everything- and thus relies on SOP/CORS — your attackers aren’t limited to XHR. A malicious website hosting a simple HTML form won’t go through a CORS pre-flight check.

有些人错误地认为， 同源起源策略 (SOP)或跨域资源共享 (CORS)应该保护SPA免受CSRF攻击。 但是，即使您的SPA对所有内容都使用XHR请求-因此依赖于SOP / CORS-您的攻击者并不仅限于XHR。 托管简单HTML表单的恶意网站将无法通过CORS飞行前检查。

This brings up an interesting point. The browser will send the form-submitted POST request with a content type of application/x-www-form-urlencoded (or perhaps multipart/form-data or text/plain). So some sites try to prevent CSRF attacks by using only allowing application/json content types, effectively disabling simple form-based requests. However, this has its own edge cases, such as POST endpoints that don't require a body (e.g., an operation that "favorites" or "stars" an item).

这提出了一个有趣的观点。 浏览器将发送内容提交类型为application/x-www-form-urlencoded的表单提交的POST请求(或者可能是multipart / form-data或text / plain )。 因此，某些站点尝试通过仅使用application/json内容类型来阻止CSRF攻击，从而有效地禁用基于表单的简单请求。 但是，这有其自身的优势，例如不需要正文的POST端点(例如，“收藏”或“加注星标”的操作)。

Furthermore, simple form-based requests and XHR requests aren’t the only browser APIs that a malicious site could use. For example, the Web Beacon API has a 5+ year-old bug in Chrome that doesn’t perform CORS preflight requests for application/json data.

此外，基于表单的简单请求和XHR请求并不是恶意站点可以使用的唯一浏览器API。 例如， Web Beacon API在Chrome中存在5年以上的错误 ，该错误不会对application/json数据执行CORS预检请求。

CSRF代币 (CSRF Tokens)

So clearly CORS doesn’t prevent CSRF, even with the addition of content-type checks. Let’s revisit the trusty CSRF Tokens.

显然，即使添加了内容类型检查，CORS也不会阻止CSRF。 让我们重新访问可信赖的CSRF令牌。

Obviously, using a hidden form field doesn’t make sense in the context of a REST API. However, there is a popular variant of the CSRF Token approach that uses HTTP headers instead of a form field. The server includes an X-CSRF-Token response header and validates that all mutating API requests include the same as a request header. This is easy enough, and built-in to many frameworks (like gorilla/csrf for golang).

显然，在REST API的上下文中使用隐藏的表单字段没有任何意义。 但是，存在CSRF令牌方法的一种流行变体，该方法使用HTTP标头而不是表单字段。 该服务器包含一个X-CSRF-Token响应标头，并验证所有变异API请求都包括与请求标头相同的变量。 这很容易，并且内置在许多框架中(例如gorilla / csrf用于golang)。

Ok, fair enough. This provides effective CSRF protection for SPAs. But many modern websites want to make their REST API public. You don’t want to burden your customers’ API clients with CSRF tokens and such. So what’s a developer to do?

好，可以。 这为SPA提供了有效的CSRF保护。 但是许多现代网站都希望公开其REST API。 您不想让CSRF令牌等负担您的客户的API客户端。 那么开发人员该怎么办？

SameSite饼干 (SameSite Cookies)

If you don’t want to require a CSRF Token for your public APIs, but need to need to store your auth in a cookie (to prevent XSS) for your SPA, what other options do we have to prevent CSRF? Recall that CSRF only occurs when a malicious site can trigger a request that will includes your auth cookie. A newer cookie standard introduced “SameSite” cookies:

如果您不想为公共API要求使用CSRF令牌，但是需要将auth身份验证存储在SPA的Cookie中(以防止XSS)，那么我们还需要其他哪些选择来阻止CSRF？ 回想一下，仅当恶意站点可以触发包含您的身份验证Cookie的请求时，CSRF才会发生。 较新的cookie标准引入了“ SameSite” cookie：

• SameSite=Strict - This instructs the browser only send the cookie for same-site requests. This is a tradeoff of security for usability, however, as this means that links from email, corporate intranet, and other websites will effectively require re-login.

  SameSite=Strict指示浏览器仅发送相同站点请求的cookie。 但是，这是对可用性进行安全性的权衡，因为这意味着来自电子邮件，企业内部网和其他网站的链接将需要重新登录。

• SameSite=Lax - This relaxes the "strict" mode to allow safe requests like links which perform GET requests to proceed, but doesn't send the cookie on non-safe operations like POST which are CSRF-prone.

  SameSite=Lax放宽“严格”模式，以允许执行诸如GET请求的链接之类的安全请求继续进行，但不会在容易发生CSRF的POST等非安全操作上发送cookie。

This can offer a pretty strong solution. Of course, this only works if your product explicitly only supports newer browsers. Most companies have an official “browser support policy” for their web application, and many use a tool such as Browser Update to automatically notify customers when they require an update.

这可以提供一个非常强大的解决方案。 当然，这仅在您的产品明确仅支持更新的浏览器时才有效。 大多数公司对其Web应用程序都有正式的“浏览器支持政策”，并且许多公司使用诸如“ 浏览器更新”之类的工具在需要更新时自动通知客户。

For example, when I ran the analysis for my company, I determined that we’re protected from CSRF attacks by the SameSite=Strict attribute on our auth cookie in 91.91% of all browsers, 97.45% of all the browsers we notify as outdated, and 100% of browsers that we officially support.

例如，当我为公司运行分析时，我确定在91.91％的所有浏览器 ，97.45％的所有通知为过时的浏览器中 ，我们的auth cookie上的SameSite=Strict属性可以保护我们免受CSRF攻击以及我们正式支持的100％浏览器。

Note that using a “Lax” cookie alone isn’t considered a sufficient solution to CSRF. If the “Strict” option is too challenging for your product’s usability, the recommended approach is to use two cookies: a “lax” cookie for read requests and a “strict” cookie for mutating requests.

请注意，单独使用“ Lax” Cookie 不足以解决CSRF 。 如果“严格”选项对于您产品的可用性而言太过挑战，建议的方法是使用两个cookie ：用于读取请求的“松散” cookie和用于更改请求的“严格” cookie。

单独的安全域 (Separate Security Domains)

If you support older browsers that don’t enforce SameSite cookies and can’t rely on them, your next option is to expose your APIs at two domains with different security requirements.

如果您支持不强制使用SameSite cookie且不能依赖它们的较旧的浏览器，那么您的下一个选择是将API暴露在两个具有不同安全性要求的域中。

For example, you could

例如，您可以

• expose your public API at https://api.example.com and configure it to only respect an OAuth Bearer token (sent in the Authorization header)

  在https://api.example.com上公开您的公共API，并将其配置为仅遵守OAuth承载令牌(在Authorization标头中发送)

• expose the same API at https://example.com/api and configure it to use a (HttpOnly, Secure) auth cookie, CORS, and a CSRF Token header.

  在https://example.com/api上公开相同的API，并将其配置为使用(HttpOnly，安全)身份验证cookie，CORS和CSRF令牌标头。

Alternatively, you could expose a single API domain that optionally supports either an OAuth Bearer token or a cookie. To do so, you need to

或者，您可以公开一个API域，该域可选地支持OAuth Bearer令牌或cookie。 为此，您需要

• Conditionally check for the CSRF Token header if the request was authorized using a cookie.如果请求已使用Cookie授权，则有条件地检查CSRF令牌标头。
• Allow all domains to make CORS requests, if you want to support third-party browser-based API clients.如果要支持基于第三方浏览器的API客户端，请允许所有域发出CORS请求。

Even without CORS protection against script-based attacks, the CSRF Token should sufficiently protect you for both script and form -based CSRF attacks.

即使没有针对基于脚本的攻击的CORS保护，CSRF令牌也应足以保护您免受基于脚本和基于表单的CSRF攻击。

资源资源 (Resources)

There are a lot of great resources out there, written by people who are much more knowledge about web app security than I am.

那里有很多很棒的资源，都是由比我更了解Web应用程序安全性知识的人撰写的。

• https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#defense-in-depth-techniques

  https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#defense-in-depth-techniques

• https://github.com/pillarjs/understanding-csrf

  https://github.com/pillarjs/understanding-csrf

• https://engineering.mixmax.com/blog/modern-csrf/

  https://engineering.mixmax.com/blog/modern-csrf/

• https://www.nccgroup.com/us/about-us/newsroom-and-events/blog/2017/september/common-csrf-prevention-misconceptions/

  https://www.nccgroup.com/cn/about-us/newsroom-and-events/blog/2017/september/common-csrf-prevention-misconceptions/

• https://security.stackexchange.com/questions/166724/should-i-use-csrf-protection-on-rest-api-endpoints

  https://security.stackexchange.com/questions/166724/should-i-use-csrf-protection-on-rest-api-endpoints

• http://www.thedreaming.org/2020/05/26/avoid-csrf-attacks-with-api-design/

  http://www.thedreaming.org/2020/05/26/avoid-csrf-attacks-with-api-design/

• https://www.netsparker.com/blog/web-security/same-site-cookie-attribute-prevent-cross-site-request-forgery/

  https://www.netsparker.com/blog/web-security/same-site-cookie-attribute-prevent-cross-site-request-forgery/

• https://web.dev/samesite-cookies-explained/

  https://web.dev/samesite-cookies-explained/

• https://mathieu.fenniak.net/is-your-web-api-susceptible-to-a-csrf-exploit/

  https://mathieu.fenniak.net/is-your-web-api-susceptible-to-a-csrf-exploit/

• https://medium.com/lightrail/getting-token-authentication-right-in-a-stateless-single-page-application-57d0c6474e3

  https://medium.com/lightrail/getting-token-authentication-right-in-a-stateless-single-page-application-57d0c6474e3

Originally published at http://codyaray.com on August 16, 2020.

最初于 2020年8月16日 发布在 http://codyaray.com 上。