feat(cookie): implement SameSite and Cookie Secure options

JakubJachym · Nov 9, 2020 · 93183c7 · 93183c7
1 parent e2177d5
commit 93183c7
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 14 deletions.
diff --git a/cookies.js b/cookies.js
@@ -8,6 +8,8 @@ if (typeof options === "undefined") {
 
   function onGot(item) {
     options.checkCookies.XDEBUG_SESSION = item.idekey || "PHPSTORM";
+    options.samesite = item.cookieSameSite || "Strict";
+    options.secure = item.cookieSecure || false;
   }
 
   options = {
@@ -16,15 +18,17 @@ if (typeof options === "undefined") {
       XDEBUG_SESSION: '',
       /*XDEBUG_TRACE: '',
       XDEBUG_PROFILE: ''*/
-    }
+    },
+    samesite: "Strict",
+    secure: false,
   };
 
   let getting = browser.storage.local.get(["idekey", "cookieSameSite", "cookieSecure"]);
   getting.then(onGot, onError);
 }
 
 
-function createCookie(name, value, days) {
+function createCookie(name, value, days, samesite = "Lax", secure = false) {
   let expires = "";
 
   if (days) {
@@ -35,7 +39,14 @@ function createCookie(name, value, days) {
 
   if (typeof document.cookie != 'undefined') {
     browser.runtime.sendMessage("Cookie " + name + " created with value " + value);
-    document.cookie = name + "=" + value + expires + "; path=/";
+
+    let cookieStr = name + "=" + value + expires + "; path=/; SameSite=" + samesite;
+
+    if (secure || samesite === "None") {
+      cookieStr += "; Secure";
+    }
+
+    document.cookie = cookieStr;
   }
 }
 
@@ -69,6 +80,7 @@ function isSet(name) {
 
 browser.runtime.sendMessage(options);
 browser.runtime.sendMessage({currentState: currentState, userTriggered: userTriggered});
+
 if (userTriggered === false) {
   // tab changed or page loaded
   let result = {};
@@ -81,11 +93,13 @@ if (userTriggered === false) {
     if (isSet(cookieName)) {
       let currentValue = readCookie(cookieName);
       let newValue = options.checkCookies[cookieName];
+      let samesite = options.samesite;
+      let secure = options.secure;
       browser.runtime.sendMessage("Cookie found with value " + currentValue);
       if (newValue !== currentValue) {
         browser.runtime.sendMessage("Cookie values mismatch, resetting (" + currentValue + " -> " + newValue + ")");
         eraseCookie(cookieName);
-        createCookie(cookieName, newValue, 1);
+        createCookie(cookieName, newValue, 1, samesite, secure);
       }
     }
 
@@ -95,13 +109,15 @@ if (userTriggered === false) {
   // widget button pressed
   let cookieName = options.cookieName;
   let cookieValue = options.checkCookies[cookieName];
+  let samesite = options.samesite;
+  let secure = options.secure;
   browser.runtime.sendMessage({"debug": 'Button pressed'});
 
   if (!isSet(cookieName)) {
     browser.runtime.sendMessage({"debug": 'Needs to be set'});
     // sometimes URL is null e.g. when we're on about:addons under linux (is it true?)
     if (typeof document.URL === 'string' && document.URL.substring(0, 4) === 'http') {
-      createCookie(cookieName, cookieValue, 1);
+      createCookie(cookieName, cookieValue, 1, samesite, secure);
 
       // Cookies can be disabled
       let state = isSet(cookieName);
@@ -119,4 +135,3 @@ if (userTriggered === false) {
     browser.runtime.sendMessage({"state": false});
   }
 }
-
diff --git a/options.html b/options.html
@@ -8,19 +8,44 @@
 </head>
 
 <body class="options">
-
 <form>
     <h1>Extension options</h1>
     <p class="learn-more">
-        Learn how to setup your web server and use Xdebug : <a href="https://deliciousbrains.com/xdebug-advanced-php-debugging/">Learn more</a>.
-
+        Learn how to setup your web server and use Xdebug: <a href="https://deliciousbrains.com/xdebug-advanced-php-debugging/">Learn more</a>.
     </p>
     <ul>
         <li>
             <h2>XDEBUG_SESSION Cookie</h2>
-            <p class="hint">Xdebug cookie to allow you debugging of your application at runtime. IDE key should match your server configuration.</p>
-            <label>IDE Key : <input type="text" id="idekey"></label>
-
+            <p>Xdebug cookie to allow you debugging of your application at runtime. IDE key should match your server configuration.</p>
+            <div class="formItemContainer">
+                <label for="idekey">IDE Key:</label>
+                <div class="formItem">
+                    <input type="text" id="idekey">
+                </div>
+            </div>
+            <div class="formItemContainer">
+                <label for="cookie_samesite">SameSite:</label>
+                <div class="formItem">
+                    <select id="cookie_samesite">
+                        <option>Strict</option>
+                        <option>Lax</option>
+                        <option>None</option>
+                    </select>
+                    <span class="help"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#SameSite_attribute" target="_blank">?</a></span>
+                </div>
+            </div>
+
+            <div class="formItemContainer">
+                <label for="cookie_secure">Secure:</label>
+                <div class="formItem">
+                    <select id="cookie_secure">
+                        <option value="1">Yes</option>
+                        <option value="0">No</option>
+                    </select>
+                    <span class="help"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Restrict_access_to_cookies" target="_blank">?</a></span>
+                </div>
+            </div>
+            <div class="samesiteSecureInfo u-isHidden" id="cookie_secure_hint">If SameSite attribute is set to None, Cookie Security must be set to Yes.</div>
         </li>
     </ul>
     <div class="buttons">

diff --git a/options.js b/options.js
@@ -1,7 +1,9 @@
 function saveOptions(e) {
   e.preventDefault();
   browser.storage.local.set({
-    idekey: document.querySelector("#idekey").value
+    idekey: document.querySelector("#idekey").value,
+    cookieSameSite: document.querySelector("#cookie_samesite").value,
+    cookieSecure: (document.querySelector("#cookie_secure").value === "1"),
   });
 
   document.querySelector("#msg_settings_saved").classList.remove("u-isHidden");
@@ -14,6 +16,8 @@ function restoreOptions() {
 
   function setCurrentChoice(result) {
     document.querySelector("#idekey").value = result.idekey || "PHPSTORM";
+    document.querySelector("#cookie_samesite").value = result.cookieSameSite || "Strict";
+    document.querySelector("#cookie_secure").value = (result.cookieSecure === true) ? "1" : "0";
   }
 
   function onError(error) {
@@ -22,7 +26,23 @@ function restoreOptions() {
 
   const getting = browser.storage.local.get(["idekey", "cookieSameSite", "cookieSecure"]);
   getting.then(setCurrentChoice, onError);
+
+  handleSecureOption();
+}
+
+function handleSecureOption() {
+  const secureSelect = document.querySelector("#cookie_secure");
+  const secureHint = document.querySelector("#cookie_secure_hint");
+  if (document.querySelector("#cookie_samesite").value === "None") {
+    secureSelect.value = "1";
+    secureSelect.disabled = true;
+    secureHint.classList.remove("u-isHidden");
+  } else {
+    secureSelect.disabled = false;
+    secureHint.classList.add("u-isHidden");
+  }
 }
 
 document.addEventListener("DOMContentLoaded", restoreOptions);
-document.querySelector("form").addEventListener("submit", saveOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);
+document.querySelector("#cookie_samesite").addEventListener("change", handleSecureOption);
diff --git a/styles.css b/styles.css
@@ -40,6 +40,23 @@ h1 {
     margin-right: 10px;
 }
 
+.options .formItemContainer {
+    margin-bottom: 0.5em;
+    display: flex;
+    align-items: center;
+}
+
+.options .formItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.options .formItem input,
+.options .formItem select {
+    flex-grow: 2;
+}
+
 .options .buttons {
     text-align: left;
 }
@@ -50,14 +67,43 @@ h1 {
     text-align: center;
 }
 
+.options form label {
+    display: inline-flex;
+    width: 5em;
+    margin: 0.2em 0;
+}
+
 .options .u-isHidden {
     display: none;
 }
 
+.options .help {
+    margin-left: 0.5em;
+}
+
+.options .samesiteSecureInfo {
+    margin-left: 5.1em;
+}
+
 .msg {
     margin-left: 1em;
 }
 
 .msg-ok {
     color: #1d6218;
 }
+
+@media only screen and (max-width: 400px) {
+    .options .formItemContainer {
+        flex-direction: column;
+        align-items: normal;
+    }
+
+    .options .formItemContainer > * {
+        margin-right: 5px;
+    }
+
+    .options .samesiteSecureInfo {
+        margin-left: 0;
+    }
+}