Merge pull request #219 from Reeywhaar/third-party-cookie-crash

third party cookies blocked fallback

web/app/common/constants.js

@@ -38,3 +38,29 @@ export const BLOCKING_DURATIONS = [
     value: `${60 * 24}m`,
   },
 ];
+
+/**
+ * Defines if browser storage features (cookies, localsrotage)
+ * are available or blocked via browser preferences
+ */
+export const IS_STORAGE_AVAILABLE = (() => {
+  try {
+    localStorage.setItem('localstorage_availability_test', null);
+    localStorage.removeItem('localstorage_availability_test');
+  } catch (e) {
+    return false;
+  }
+  return true;
+})();
+
+/**
+ * Defines whether iframe loaded in cross origin environment
+ * Usefull for checking if some privacy restriction may be applied
+ */
+export const IS_THIRD_PARTY = (() => {
+  try {
+    return window.parent.location.host !== window.location.host;
+  } catch (e) {
+    return true;
+  }
+})();

web/app/common/localStorage.js

@@ -0,0 +1,22 @@
+import { IS_STORAGE_AVAILABLE } from 'common/constants';
+
+const failMessage = 'remark42: localStorage access denied, check browser preferences';
+
+export const setItem = IS_STORAGE_AVAILABLE
+  ? localStorage.setItem.bind(localStorage)
+  : () => {
+      console.error(failMessage); // eslint-disable-line no-console
+    };
+
+export const getItem = IS_STORAGE_AVAILABLE
+  ? localStorage.getItem.bind(localStorage)
+  : () => {
+      console.error(failMessage); // eslint-disable-line no-console
+      return null;
+    };
+
+export const removeItem = IS_STORAGE_AVAILABLE
+  ? localStorage.removeItem.bind(localStorage)
+  : () => {
+      console.error(failMessage); // eslint-disable-line no-console
+    };

web/app/components/auth-panel/auth-panel.jsx

@@ -4,7 +4,7 @@ import { h, Component } from 'preact';
 import UserId from './__user-id/auth-panel__user-id';
 import Dropdown, { DropdownItem } from 'components/dropdown';
 import Button from 'components/button';
-import { PROVIDER_NAMES } from 'common/constants';
+import { PROVIDER_NAMES, IS_STORAGE_AVAILABLE, IS_THIRD_PARTY } from 'common/constants';
 import { requestDeletion } from 'utils/email';
 import { getHandleClickProps } from 'common/accessibility';
 
@@ -76,28 +76,46 @@ export default class AuthPanel extends Component {
           </div>
         )}
 
-        {!loggedIn && (
-          <div className="auth-panel__column">
-            Sign in to comment using{' '}
-            {providers.map((provider, i) => {
-              const comma = i === 0 ? '' : i === providers.length - 1 ? ' or ' : ', ';
+        {IS_STORAGE_AVAILABLE &&
+          !loggedIn && (
+            <div className="auth-panel__column">
+              Sign in to comment using{' '}
+              {providers.map((provider, i) => {
+                const comma = i === 0 ? '' : i === providers.length - 1 ? ' or ' : ', ';
 
-              return (
-                <span>
-                  {comma}
-                  <span
-                    className="auth-panel__pseudo-link"
-                    {...getHandleClickProps(() => props.onSignIn(provider))}
-                    role="link"
-                  >
-                    {PROVIDER_NAMES[provider]}
+                return (
+                  <span>
+                    {comma}
+                    <span
+                      className="auth-panel__pseudo-link"
+                      {...getHandleClickProps(() => props.onSignIn(provider))}
+                      role="link"
+                    >
+                      {PROVIDER_NAMES[provider]}
+                    </span>
                   </span>
-                </span>
-              );
-            })}
-            {'.'}
-          </div>
-        )}
+                );
+              })}
+              {'.'}
+            </div>
+          )}
+
+        {!IS_STORAGE_AVAILABLE &&
+          IS_THIRD_PARTY && (
+            <div className="auth-panel__column">
+              Disable third-party cookies blocking to sign in or open comments in{' '}
+              <a
+                class="auth-panel__pseudo-link"
+                href={`${window.location.origin}/web/comments.html${window.location.search}`}
+                target="_blank"
+              >
+                new page
+              </a>
+            </div>
+          )}
+
+        {!IS_STORAGE_AVAILABLE &&
+          !IS_THIRD_PARTY && <div className="auth-panel__column">Allow cookies to sign in and comment</div>}
 
         <div className="auth-panel__column">
           {user.admin && (

web/app/components/thread/getCollapsedComments.js

@@ -1,5 +1,6 @@
 import { LS_COLLAPSE_KEY } from 'common/constants';
+import { getItem as localStorageGetItem } from 'common/localStorage';
 
-const getCollapsedComments = () => JSON.parse(localStorage.getItem(LS_COLLAPSE_KEY) || '[]');
+const getCollapsedComments = () => JSON.parse(localStorageGetItem(LS_COLLAPSE_KEY) || '[]');
 
 export default getCollapsedComments;

web/app/components/thread/saveCollapsedComments.js

@@ -1,5 +1,6 @@
 import { LS_COLLAPSE_KEY } from 'common/constants';
+import { setItem as localStorageSetItem } from 'common/localStorage';
 
-const saveCollapsedComments = comments => localStorage.setItem(LS_COLLAPSE_KEY, JSON.stringify(comments));
+const saveCollapsedComments = comments => localStorageSetItem(LS_COLLAPSE_KEY, JSON.stringify(comments));
 
 export default saveCollapsedComments;

web/comments.ejs

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Remark42 demo</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 20px;
+        text-align: center;
+        font: 18px/24px Helvetica, Arial, sans-serif;
+        color: #333;
+      }
+
+      article {
+        display: block;
+        text-align: left;
+        max-width: 640px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        font-size: 50px;
+        margin-left: -0.05em;
+      }
+
+      ul {
+        color: rgb(23, 67, 78);
+      }
+
+      a {
+        color: rgb(79, 187, 214);
+        text-decoration: none;
+      }
+
+      a:hover {
+        color: rgb(94, 167, 177);
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body>
+    <article>
+      <h1><a href="https://remark42.com/">Remark42</a></h1>
+      <p id="title"></p>
+      <div id="remark42"></div>
+    </article>
+
+    <script>
+      var query = (function() {
+        if (window.location.search.length === 0) return {};
+        return window.location.search
+          .substr(1)
+          .split('&')
+          .map(function(item) {
+            return item.split('=');
+          })
+          .reduce(function(carry, item) {
+            carry[item[0]] = decodeURIComponent(item[1]);
+            return carry;
+          }, {});
+      })();
+
+      if (query.site_id && query.url) {
+        var titleElement = document.getElementById('title');
+        titleElement.innerHTML = 'Comments for <a href="' + query.url + '">' + query.url + '</a>';
+
+        var remark_config = {
+          site_id: query.site_id,
+          url: query.url,
+        };
+
+        (function() {
+          var d = document,
+            s = d.createElement('script');
+          s.src = '/web/embed.js';
+          s.type = 'text/javascript';
+          (d.head || d.body).appendChild(s);
+        })();
+      }
+    </script>
+    <noscript> Please enable JavaScript to view the comments powered by Remark. </noscript>
+  </body>
+</html>

web/webpack.config.js

@@ -114,6 +114,11 @@ module.exports = {
       filename: 'last-comments.html',
       inject: false,
     }),
+    new Html({
+      template: path.resolve(__dirname, 'comments.ejs'),
+      filename: 'comments.html',
+      inject: false,
+    }),
     new ExtractText({
       filename: `remark.css`,
       allChunks: true,