Add CSRF token to requests when available in cookies (#598)

Co-authored-by: Paulus Schoutsen <[email protected]>

raw_package/login.template.html

@@ -114,6 +114,7 @@
     <h3 id="login-head" class="center">Login</h3>
     <p class="center">Enter your {% if ha_addon %}Home Assistant{% else %}ESPHome{% end %} credentials.</p>
     <form action="./login" method="post" id="login-form">
+      {% module xsrf_form_html() %}
       {% if has_username or ha_addon %}
       <div class="row">
         <i class="material-icons prefix">person</i>

src/api/index.ts

@@ -1,3 +1,5 @@
+import { getCookie } from "../util/cookie";
+
 export class APIError extends Error {
   constructor(
     message: string,
@@ -16,6 +18,13 @@ const fetchApiBase = async (
     options = {};
   }
   options.credentials = "same-origin";
+  const csrfCookie = getCookie("_xsrf");
+  if (csrfCookie) {
+    if (!options.headers) {
+      options.headers = {};
+    }
+    options.headers["X-CSRFToken"] = csrfCookie;
+  }
   const resp = await fetch(path, options);
   if (!resp.ok) {
     throw new APIError(`Request not successful (${resp.status})`, resp.status);

src/util/cookie.ts

@@ -0,0 +1,4 @@
+export const getCookie = (name: string): string | undefined => {
+  var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
+  return r ? r[1] : undefined;
+};