apostrophe 3.13.0 → 3.14.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 3.14.2 (2022-02-27)
+
+* Hotfix: fixed a bug introduced by 3.14.1 in which non-parked pages could throw an error during the migration to fix replication issues.
+
+## 3.14.1 (2022-02-25)
+
+* Hotfix: fixed a bug in which replication across locales did not work properly for parked pages configured via the `_children` feature. A one-time migration is included to reconnect improperly replicated versions of the same parked pages. This runs automatically, no manual action is required. Thanks to [justyna1](https://github.com/justyna13) for identifying the issue.
+
+## 3.14.0 (2022-02-22)
+
+### Adds
+
+* To reduce complications for those implementing caching strategies, the CSRF protection cookie now contains a simple constant string, and is not recorded in `req.session`. This is acceptable because the real purpose of the CSRF check is simply to verify that the browser has sent the cookie at all, which it will not allow a cross-origin script to do.
+* As a result of the above, a session cookie is not generated and sent at all unless `req.session` is actually used or a user logs in. Again, this reduces complications for those implementing caching strategies.
+* When logging out, the session cookie is now cleared in the browser. Formerly the session was destroyed on the server side only, which was sufficient for security purposes but could create caching issues.
+* Uses `express-cache-on-demand` lib to make similar and concurrent requests on pieces and pages faster.
+* Frontend build errors now stop app startup in development, and SCSS and JS/Vue build warnings are visible on the terminal console for the first time.
+
+### Fixes
+
+* Fixed a bug when editing a page more than once if the page has a relationship to itself, whether directly or indirectly. Widget ids were unnecessarily regenerated in this situation, causing in-context edits after the first to fail to save.
+* Pages no longer emit double `beforeUpdate` and `beforeSave` events.
+* When the home page extends `@apostrophecms/piece-page-type`, the "show page" URLs for individual pieces should not contain two slashes before the piece slug. Thanks to [Martí Bravo](https://github.com/martibravo) for the fix.
+* Fixes transitions between login page and `afterPasswordVerified` login steps.
+* Frontend build errors now stop the `@apostrophecms/asset:build` task properly in production.
+* `start` replaced with `flex-start` to address SCSS warnings.
+* Dead code removal, as a result of following up on JS/Vue build warnings.
+
 ## 3.13.0 - 2022-02-04
 
 ### Adds

package/index.js

@@ -202,13 +202,15 @@ module.exports = async function(options) {
     await self.emit('modulesRegistered'); // formerly modulesReady
     self.apos.schema.validateAllSchemas();
     self.apos.schema.registerAllSchemas();
-    await self.apos.migration.migrate(); // emits before and after events, inside the lock
-    await self.apos.global.insertIfMissing();
-    await self.apos.page.implementParkAllInDefaultLocale();
-    await self.apos.doc.replicate(); // emits beforeReplicate and afterReplicate events
-    // Replicate will have created the parked pages across locales if needed, but we may
-    // still need to reset parked properties
-    await self.apos.page.implementParkAllInOtherLocales();
+    await self.apos.lock.withLock('@apostrophecms/migration:migrate', async () => {
+      await self.apos.migration.migrate(); // emits before and after events, inside the lock
+      await self.apos.global.insertIfMissing();
+      await self.apos.page.implementParkAllInDefaultLocale();
+      await self.apos.doc.replicate(); // emits beforeReplicate and afterReplicate events
+      // Replicate will have created the parked pages across locales if needed, but we may
+      // still need to reset parked properties
+      await self.apos.page.implementParkAllInOtherLocales();
+    });
     await self.emit('ready'); // formerly afterInit
     if (self.taskRan) {
       process.exit(0);

package/modules/@apostrophecms/asset/index.js

@@ -249,15 +249,23 @@ module.exports = {
               fs.removeSync(`${bundleDir}/${outputFilename}`);
               const cssPath = `${bundleDir}/${outputFilename}`.replace(/\.js$/, '.css');
               fs.removeSync(cssPath);
-              await Promise.promisify(webpackModule)(require(`./lib/webpack/${name}/webpack.config`)(
-                {
-                  importFile,
-                  modulesDir,
-                  outputPath: bundleDir,
-                  outputFilename
-                },
-                self.apos
-              ));
+              const webpack = Promise.promisify(webpackModule);
+              const webpackBaseConfig = require(`./lib/webpack/${name}/webpack.config`);
+              const webpackInstanceConfig = webpackBaseConfig({
+                importFile,
+                modulesDir,
+                outputPath: bundleDir,
+                outputFilename
+              }, self.apos);
+              const result = await webpack(webpackInstanceConfig);
+              if (result.compilation.errors.length) {
+                // Throwing a string is appropriate in a command line task
+                throw cleanErrors(result.toString('errors'));
+              } else if (result.compilation.warnings.length) {
+                self.apos.util.warn(result.toString('errors-warnings'));
+              } else if (process.env.APOS_WEBPACK_VERBOSE) {
+                self.apos.util.info(result.toString('verbose'));
+              }
               if (fs.existsSync(cssPath)) {
                 fs.writeFileSync(cssPath, self.filterCss(fs.readFileSync(cssPath, 'utf8'), {
                   modulesPrefix: `${self.getAssetBaseUrl()}/modules`
@@ -518,6 +526,13 @@ module.exports = {
           function getComponentName(component, options, i) {
             return require('path').basename(component).replace(/\.\w+/, '') + (options.enumerateImports ? `_${i}` : '');
           }
+
+          function cleanErrors(errors) {
+            // Dev experience: remove confusing and inaccurate webpack warning about module loaders
+            // when straightforward JS parse errors occur, stackoverflow is full of people
+            // confused by this
+            return errors.replace(/(ERROR in[\s\S]*?Module parse failed[\s\S]*)You may need an appropriate loader.*/, '$1');
+          }
         }
       }
     };

package/modules/@apostrophecms/doc/index.js

@@ -1005,10 +1005,12 @@ module.exports = {
       async replicate() {
         const localeNames = Object.keys(self.apos.i18n.locales);
         const criteria = [];
-        for (const parked of self.apos.page.parked) {
+        self.apos.page.parked.forEach(pushParkedPageAndParkedChildren);
+        function pushParkedPageAndParkedChildren(page) {
           criteria.push({
-            parkedId: parked.parkedId
+            parkedId: page.parkedId
           });
+          (page._children || []).forEach(pushParkedPageAndParkedChildren);
         }
         const pieceModules = Object.values(self.apos.modules).filter(module => self.apos.instanceOf(module, '@apostrophecms/piece-type') && module.options.replicate);
         for (const module of pieceModules) {
@@ -1075,7 +1077,13 @@ module.exports = {
       },
       deduplicateWidgetIds(doc) {
         const seen = new Set();
-        self.apos.area.walk(doc, area => {
+        self.apos.area.walk(doc, (area, dotPath) => {
+          if (dotPath.includes('_')) {
+            // Ignore relationships so recursive references from a
+            // doc to itself can't result in random regeneration of
+            // widget ids in the doc proper
+            return;
+          }
           for (const widget of area.items || []) {
             if ((!widget._id) || seen.has(widget._id)) {
               widget._id = cuid();

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocContextMenu.vue

@@ -23,7 +23,6 @@ import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange'
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
 import AposArchiveMixin from 'Modules/@apostrophecms/ui/mixins/AposArchiveMixin';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
-import klona from 'klona';
 
 export default {
   name: 'AposDocContextMenu',
@@ -263,12 +262,6 @@ export default {
       // moduleOptions gives us the action, etc. but here we need the schema
       // which is always type specific, even for pages so get it ourselves
       let schema = (apos.modules[this.context.type].schema || []).filter(field => apos.schema.components.fields[field.type]);
-      if (this.restoreOnly) {
-        schema = klona(schema);
-        for (const field of schema) {
-          field.readOnly = true;
-        }
-      }
       // Archive UI is handled via action buttons
       schema = schema.filter(field => field.name !== 'archived');
       return schema;

package/modules/@apostrophecms/express/index.js

@@ -77,7 +77,15 @@
 //   rolling: true,
 //   secret: 'you should have a secret',
 //   name: self.apos.shortName + '.sid',
-//   cookie: {}
+//   cookie: {
+//     path: '/',
+//     httpOnly: true,
+//     secure: false,
+//     // using 'strict' will confuse users if you link to your site
+//     // with the expectation that the user is still logged in on arrival.
+//     // 'lax' still protects against CSRF attacks
+//     sameSite: 'lax'
+//   }
 // }
 // ```
 //
@@ -98,17 +106,16 @@
 //
 // ### `csrf`
 //
-// By default, Apostrophe implements Angular-compatible [CSRF protection](https://en.wikipedia.org/wiki/Cross-site_request_forgery)
-// via an `XSRF-TOKEN` cookie. The `@apostrophecms/asset` module pushes
-// a call to the browser to set a jQuery `ajaxPrefilter` which
-// adds an `X-XSRF-TOKEN` header to all requests, which must
-// match the cookie. This is effective because code running from
-// other sites or iframes will not be able to read the cookie and
-// send the header.
+// By default, Apostrophe implements [CSRF protection](https://en.wikipedia.org/wiki/Cross-site_request_forgery)
+// by setting a cookie with the value `csrf`, which all legitimate requests originating fromt he page will send
+// back (see the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)).
+// All modern browsers will refuse to allow a CSRF attacker, such as a malicious `POST`-method `form` tag on a third
+// party site pointing to an Apostrophe site, to send cookies to the Apostrophe site.
 //
 // All non-safe HTTP requests (not `GET`, `HEAD`, `OPTIONS` or `TRACE`)
-// automatically receive this proection via the csrf middleware, which
-// rejects requests in which the CSRF token does not match the header.
+// automatically receive this protection via the csrf middleware, which
+// rejects requests in which the cookie is not present.
+//
 // If the request was made with a valid api key or bearer token it
 // bypasses this check.
 //
@@ -124,12 +131,6 @@
 // You may need to use this feature when implementing POST form
 // submissions that do not use AJAX and thus don't send the header.
 //
-// There is also a `minimumExceptions` option, which defaults
-// to `[ /login ]`. The login form is the only non-AJAX form
-// that ships with Apostrophe. XSRF protection for login forms
-// is unnecessary because the password itself is unknown to the
-// third party site; it effectively serves as an XSRF token.
-//
 // ### Adding your own middleware
 //
 // Use the `middleware` section in your module. That function should
@@ -323,12 +324,11 @@ module.exports = {
       },
       ...((self.options.csrf === false) ? {} : {
         // Angular-compatible CSRF protection middleware. On safe requests (GET, HEAD, OPTIONS, TRACE),
-        // set the XSRF-TOKEN cookie if missing. On unsafe requests (everything else),
-        // make sure our jQuery `ajaxPrefilter` set the X-XSRF-TOKEN header to match the
-        // cookie.
+        // set the csrf cookie if missing.
         //
-        // This works because if we're running via a script tag or iframe, we won't
-        // be able to read the cookie.
+        // This works because requests not meeting the expectations of the same-origin policy
+        // won't be able to send cookies to the origin at all, even though the value is
+        // well-known.
         csrf(req, res, next) {
           if (req.csrfExempt) {
             return next();
@@ -426,7 +426,11 @@ module.exports = {
         _.defaults(sessionOptions.cookie, {
           path: '/',
           httpOnly: true,
-          secure: false
+          secure: false,
+          // Ensure that Safari follows the same policy as other modern browsers
+          // to prevent CSRF attacks. "lax" just means that navigation links
+          // leading to the site will receive the cookie, it is not insecure
+          sameSite: 'lax'
           // maxAge is set for us by connect-mongo,
           // and defaults to 2 weeks
         });
@@ -506,28 +510,30 @@ module.exports = {
       // that this URL should be subject to CSRF.
 
       csrfWithoutExceptions(req, res, next) {
-        let token;
         // OPTIONS request cannot set a cookie, so manipulating the session here
         // is not helpful. Do not attempt to set XSRF-TOKEN for OPTIONS
         if (req.method === 'OPTIONS') {
           return next();
         }
-        // Safe request establishes XSRF-TOKEN in session if not set already
+        // Safe request establishes CSRF cookie, whose purpose is only to check
+        // that the same-origin policy is followed, not to be unique and secure
+        // in itself
         if (req.method === 'GET' || req.method === 'HEAD' || req.method === 'TRACE') {
-          token = req.session && req.session['XSRF-TOKEN'];
-          if (!token) {
-            token = self.apos.util.generateId();
-            req.session['XSRF-TOKEN'] = token;
-          }
-          // Reset the cookie so that if its lifetime somehow detaches from
-          // that of the session cookie we're still OK
-          res.cookie(self.apos.csrfCookieName, token);
+          // Use the same standard for the session and CSRF cookies
+          res.cookie(self.apos.csrfCookieName, 'csrf', {
+            // Will inherit sameSite: 'lax', which is important for
+            // CSRF protection in Safari
+            ...self.sessionOptions.cookie,
+            // 1 year (the limit). The value is known, we are relying
+            // on SameSite (modern browsers)
+            maxAge: 31536000
+          });
         } else {
-          // All non-safe requests must be preceded by a safe request that establishes
-          // the CSRF token, both as a cookie and in the session. Otherwise a user who is logged
-          // in but doesn't currently have a CSRF token is still vulnerable.
-          // See options.csrfExceptions
-          if (!req.cookies[self.apos.csrfCookieName] || req.get('X-XSRF-TOKEN') !== req.cookies[self.apos.csrfCookieName] || req.session['XSRF-TOKEN'] !== req.cookies[self.apos.csrfCookieName]) {
+          // Check that the request arrived with the CSRF cookie.
+          // This isn't meant to be a unique code that no one could guess,
+          // but rather a check that the request from the same origin,
+          // as cross-origin requests cannot set cookies on our origin at all.
+          if (req.cookies[self.apos.csrfCookieName] !== 'csrf') {
             res.statusCode = 403;
             return res.send({
               name: 'forbidden',

package/modules/@apostrophecms/http/index.js

@@ -86,9 +86,6 @@ module.exports = {
       // `parse` (can be 'json` to always parse the response body as JSON, otherwise the response body is
       // parsed as JSON only if the content-type is application/json)
       // `headers` (an object containing header names and values)
-      // `csrf` (if true, which is the default, and the `jar` contains the CSRF cookie for this Apostrophe site
-      // due to a previous GET request, send it as the X-XSRF-TOKEN header; if a string, send the current value of the cookie of that name
-      // in the `jar` as the X-XSRF-TOKEN header; if false, disable this feature)
       // `fullResponse` (if true, return an object with `status`, `headers` and `body`
       // properties, rather than returning the body directly; the individual `headers` are canonicalized
       // to lowercase names. If a header appears multiple times an array is returned for it)
@@ -113,9 +110,6 @@ module.exports = {
       // `parse` (can be 'json` to always parse the response body as JSON, otherwise the response body is
       // parsed as JSON only if the content-type is application/json)
       // `headers` (an object containing header names and values)
-      // `csrf` (if true, which is the default, and the `jar` contains the CSRF cookie for this Apostrophe site
-      // due to a previous GET request, send it as the X-XSRF-TOKEN header; if a string, send the current value of the cookie of that name
-      // in the `jar` as the X-XSRF-TOKEN header; if false, disable this feature)
       // `fullResponse` (if true, return an object with `status`, `headers` and `body`
       // properties, rather than returning the body directly; the individual `headers` are canonicalized
       // to lowercase names. If a header appears multiple times an array is returned for it)
@@ -140,9 +134,6 @@ module.exports = {
       // `parse` (can be 'json` to always parse the response body as JSON, otherwise the response body is
       // parsed as JSON only if the content-type is application/json)
       // `headers` (an object containing header names and values)
-      // `csrf` (if true, which is the default, and the `jar` contains the CSRF cookie for this Apostrophe site
-      // due to a previous GET request, send it as the X-XSRF-TOKEN header; if a string, send the current value of the cookie of that name
-      // in the `jar` as the X-XSRF-TOKEN header; if false, disable this feature)
       // `fullResponse` (if true, return an object with `status`, `headers` and `body`
       // properties, rather than returning the body directly; the individual `headers` are canonicalized
       // to lowercase names. If a header appears multiple times an array is returned for it)
@@ -167,9 +158,6 @@ module.exports = {
       // `parse` (can be 'json` to always parse the response body as JSON, otherwise the response body is
       // parsed as JSON only if the content-type is application/json)
       // `headers` (an object containing header names and values)
-      // `csrf` (if true, which is the default, and the `jar` contains the CSRF cookie for this Apostrophe site
-      // due to a previous GET request, send it as the X-XSRF-TOKEN header; if a string, send the current value of the cookie of that name
-      // in the `jar` as the X-XSRF-TOKEN header; if false, disable this feature)
       // `fullResponse` (if true, return an object with `status`, `headers` and `body`
       // properties, rather than returning the body directly; the individual `headers` are canonicalized
       // to lowercase names. If a header appears multiple times an array is returned for it)
@@ -228,14 +216,6 @@ module.exports = {
           options.headers = options.headers || {};
           options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
         }
-        if ((options.csrf !== false) && options.jar) {
-          options.headers = options.headers || {};
-          const cookieName = ((typeof options.csrf) === 'string') ? options.csrf : self.apos.csrfCookieName;
-          const cookieValue = self.getCookie(options.jar, url, cookieName);
-          if (cookieValue != null) {
-            options.headers['x-xsrf-token'] = cookieValue;
-          }
-        }
         const res = await fetch(url, options);
         let body;
         if (options.jar) {

package/modules/@apostrophecms/login/index.js

@@ -42,6 +42,7 @@ const Passport = require('passport').Passport;
 const LocalStrategy = require('passport-local');
 const Promise = require('bluebird');
 const cuid = require('cuid');
+const expressSession = require('express-session');
 
 module.exports = {
   cascades: [ 'requirements' ],
@@ -133,7 +134,16 @@ module.exports = {
                 return req.session.destroy(callback);
               })();
             };
+            const cookie = req.session.cookie;
             await destroySession();
+            // Session cookie expiration isn't automatic with `req.session.destroy`.
+            // Fix that to reduce challenges for those attempting to implement custom
+            // caching strategies at the edge
+            // https://github.com/expressjs/session/issues/241
+            const expireCookie = new expressSession.Cookie(cookie);
+            expireCookie.expires = new Date(0);
+            const name = self.apos.modules['@apostrophecms/express'].sessionOptions.name;
+            req.res.header('set-cookie', expireCookie.serialize(name, 'deleted'));
           }
         },
         // invokes the `props(req, user)` function for the requirement specified by

package/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue

@@ -6,8 +6,9 @@
       :class="themeClass"
     >
       <div class="apos-login__wrapper">
-        <transition name="fade-body">
+        <transition name="fade-body" mode="out-in">
           <div
+            key="1"
             class="apos-login__upper"
             v-if="loaded && phase === 'beforeSubmit'"
           >
@@ -18,25 +19,19 @@
             />
 
             <div class="apos-login__body">
-              <form
-                @submit.prevent="submit"
-              >
+              <form @submit.prevent="submit">
                 <AposSchema
                   :schema="schema"
                   v-model="doc"
                 />
-                <!-- Do not ask these components to render without their props,
-                  v-show is not enough -->
-                <template v-if="loaded">
-                  <Component
-                    v-for="requirement in beforeSubmitRequirements"
-                    :key="requirement.name"
-                    :is="requirement.component"
-                    v-bind="getRequirementProps(requirement.name)"
-                    @done="requirementDone(requirement, $event)"
-                    @block="requirementBlock(requirement)"
-                  />
-                </template>
+                <Component
+                  v-for="requirement in beforeSubmitRequirements"
+                  :key="requirement.name"
+                  :is="requirement.component"
+                  v-bind="getRequirementProps(requirement.name)"
+                  @done="requirementDone(requirement, $event)"
+                  @block="requirementBlock(requirement)"
+                />
                 <!-- TODO -->
                 <!-- <a href="#" class="apos-login__link">Forgot Password</a> -->
                 <AposButton
@@ -53,8 +48,9 @@
             </div>
           </div>
           <div
+            key="2"
             class="apos-login__upper"
-            v-else-if="activeSoloRequirement && !fetchingRequirementProps"
+            v-else-if="activeSoloRequirement"
           >
             <TheAposLoginHeader
               :env="context.env"
@@ -64,6 +60,7 @@
             />
             <div class="apos-login__body">
               <Component
+                v-if="!fetchingRequirementProps"
                 v-bind="getRequirementProps(activeSoloRequirement.name)"
                 :is="activeSoloRequirement.component"
                 :success="activeSoloRequirement.success"
@@ -392,12 +389,11 @@ function getRequirements() {
     transition-delay: 0.6s;
   }
 
-  .fade-leave-active {
+  .fade-body-leave-active {
     transition: all 0.25s linear;
-    transition-delay: 0;
   }
 
-  .fade-body-enter-to,.fade-body-leave {
+  .fade-body-enter-to, .fade-body-leave {
     transform: translateY(0);
   }
 
@@ -459,7 +455,7 @@ function getRequirements() {
       max-width: $login-container;
       margin: auto;
       align-items: center;
-      justify-content: start;
+      justify-content: flex-start;
     }
 
     &__project-version {

package/modules/@apostrophecms/login/ui/apos/components/TheAposLoginHeader.vue

@@ -50,7 +50,7 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: start;
+    align-items: flex-start;
     width: max-content;
   }
 

package/modules/@apostrophecms/migration/index.js

@@ -231,41 +231,36 @@ module.exports = {
       // Perform the actual migrations. Implementation of
       // the @apostrophecms/migration:migrate task
       async migrate(options) {
-        await self.apos.lock.lock(self.__meta.name);
         await self.emit('before');
-        try {
-          if (self.apos.isNew) {
-            // Since the site is brand new (zero documents), we may assume
-            // it requires no migrations. Mark them all as "done" but note
-            // that they were skipped, just in case we decide that's an issue later
-            const at = new Date();
-            // Just in case the db has no documents but did
-            // start to run migrations on a previous attempt,
-            // which causes an occasional unique key error if not
-            // corrected for here
-            await self.db.removeMany({});
-            await self.db.insertMany(self.migrations.map(migration => ({
-              _id: migration.name,
-              at,
-              skipped: true
-            })));
-          } else {
-            for (const migration of self.migrations) {
-              await self.runOne(migration);
-            }
+        if (self.apos.isNew) {
+          // Since the site is brand new (zero documents), we may assume
+          // it requires no migrations. Mark them all as "done" but note
+          // that they were skipped, just in case we decide that's an issue later
+          const at = new Date();
+          // Just in case the db has no documents but did
+          // start to run migrations on a previous attempt,
+          // which causes an occasional unique key error if not
+          // corrected for here
+          await self.db.removeMany({});
+          await self.db.insertMany(self.migrations.map(migration => ({
+            _id: migration.name,
+            at,
+            skipped: true
+          })));
+        } else {
+          for (const migration of self.migrations) {
+            await self.runOne(migration);
           }
-          // In production, this event is emitted only at the end of the migrate command line task.
-          // In dev it is emitted at every startup after the automatic migration.
-          //
-          // Intentionally emitted regardless of whether the site is new or not.
-          //
-          // This is the right time to park pages, for instance, because the
-          // database is guaranteed to be in a stable state, whether because the
-          // site is new or because migrations ran successfully.
-          await self.emit('after');
-        } finally {
-          await self.apos.lock.unlock(self.__meta.name);
         }
+        // In production, this event is emitted only at the end of the migrate command line task.
+        // In dev it is emitted at every startup after the automatic migration.
+        //
+        // Intentionally emitted regardless of whether the site is new or not.
+        //
+        // This is the right time to park pages, for instance, because the
+        // database is guaranteed to be in a stable state, whether because the
+        // site is new or because migrations ran successfully.
+        await self.emit('after');
       },
       async runOne(migration) {
         const info = await self.db.findOne({ _id: migration.name });