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 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.document.location.host !== window.location.host;
+  } catch (e) {
+    return true;
+  }
+})();

web/app/common/localStorage.js

@@ -0,0 +1,30 @@
+export const isAvailable = (() => {
+  try {
+    localStorage.setItem('localstorage_availability_test', null);
+    localStorage.removeItem('localstorage_availability_test');
+  } catch (e) {
+    return false;
+  }
+  return true;
+})();
+
+const failMessage = 'remark42: localStorage access denied, check browser preferences';
+
+export const setItem = isAvailable
+  ? localStorage.setItem.bind(localStorage)
+  : () => {
+      console.error(failMessage); // eslint-disable-line no-console
+    };
+
+export const getItem = isAvailable
+  ? localStorage.getItem.bind(localStorage)
+  : () => {
+      console.error(failMessage); // eslint-disable-line no-console
+      return null;
+    };
+
+export const removeItem = isAvailable
+  ? 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, 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 ' : ', ';
+        {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>
+          )}
+
+        {!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>
+          )}
+
+        {!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 } from 'common/localStorage';
 
-const getCollapsedComments = () => JSON.parse(localStorage.getItem(LS_COLLAPSE_KEY) || '[]');
+const getCollapsedComments = () => JSON.parse(getItem(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 } from 'common/localStorage';
 
-const saveCollapsedComments = comments => localStorage.setItem(LS_COLLAPSE_KEY, JSON.stringify(comments));
+const saveCollapsedComments = comments => setItem(LS_COLLAPSE_KEY, JSON.stringify(comments));
 
 export default saveCollapsedComments;

web/comments.ejs

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>remark42</title>
+
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+
+    .container {
+      max-width: 800px;
+      margin: 40px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+	<div id="title"></div>
+    <div id="remark42"></div>
+  </div>
+
+  <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 = '<h1>Comments for <a href="'+query.url+'">'+query.url+'</a></h1>'
+
+      var remark_config = {
+        site_id: 'remark',
+        url: 'https://remark42.com/demo/',
+      };
+
+      (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,