WIP on fix images requests that require API auth using a SSR helper

src/components/manage/Tiles/Image/Edit.jsx

@@ -306,7 +306,10 @@ export default class Edit extends Component {
             <img
               src={
                 this.props.data.url.includes(settings.apiPath)
-                  ? `${this.props.data.url}/@@images/image`
+                  ? `${this.props.data.url}/@@images/image`.replace(
+                      settings.apiPath,
+                      '',
+                    )
                   : this.props.data.url
               }
               alt=""

src/components/manage/Tiles/Image/View.jsx

@@ -27,7 +27,7 @@ const View = ({ data }) => (
     <Image
       src={
         data.url.startsWith(settings.apiPath)
-          ? `${data.url}/@@images/image`
+          ? `${data.url}/@@images/image`.replace(settings.apiPath, '')
           : data.url
       }
       alt=""

src/components/theme/View/NewsItemView.jsx

@@ -8,6 +8,8 @@ import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { Container, Image } from 'semantic-ui-react';
 
+import { settings } from '~/config';
+
 /**
  * NewsItemView view component class.
  * @function NewsItemView
@@ -34,7 +36,7 @@ const NewsItemView = ({ content }) => (
         src={
           content.image['content-type'] === 'image/svg+xml'
             ? content.image.download
-            : content.image.scales.mini.download
+            : content.image.scales.mini.download.replace(settings.apiPath, '')
         }
         floated="right"
       />

src/helpers/Image/ImageAuth.js

@@ -0,0 +1,34 @@
+/**
+ * Sitemap helper.
+ * @module helpers/Sitemap
+ */
+
+import superagent from 'superagent';
+import { map } from 'lodash';
+import cookie from 'react-cookie';
+import zlib from 'zlib';
+
+import { settings } from '~/config';
+
+/**
+ * Generate sitemap
+ * @function imageAuth
+ * @param {Object} req Request object
+ * @return {string} Generated sitemap
+ */
+export const imageAuth = req =>
+  new Promise(resolve => {
+    const request = superagent.get(`${settings.apiPath}/${req.path}`);
+    // request.set('Accept', 'application/json');
+    const authToken = cookie.load('auth_token');
+    if (authToken) {
+      request.set('Authorization', `Bearer ${authToken}`);
+    }
+    request.end((error, res = {}) => {
+      if (error) {
+        resolve(res || error);
+      } else {
+        resolve(res);
+      }
+    });
+  });

src/helpers/index.js

@@ -12,6 +12,7 @@ export {
 } from '@plone/volto/helpers/AuthToken/AuthToken';
 export { getBaseUrl, getIcon, getView } from '@plone/volto/helpers/Url/Url';
 export { generateSitemap } from '@plone/volto/helpers/Sitemap/Sitemap';
+export { imageAuth } from '@plone/volto/helpers/Image/ImageAuth';
 export {
   nestContent,
   getLayoutFieldname,

src/server.jsx

@@ -5,7 +5,13 @@ import express from 'express';
 import { renderToString } from 'react-dom/server';
 import { createMemoryHistory } from 'history';
 import { ReduxAsyncConnect, loadOnServer } from 'redux-connect';
-import { Html, Api, persistAuthToken, generateSitemap } from './helpers';
+import {
+  Html,
+  Api,
+  persistAuthToken,
+  generateSitemap,
+  imageAuth,
+} from './helpers';
 import { parse as parseUrl } from 'url';
 import { keys } from 'lodash';
 import Raven from 'raven';
@@ -73,13 +79,16 @@ server
 
     if (req.path === '/sitemap.xml.gz') {
       generateSitemap(req).then(sitemap => {
-        res.header('Content-Type: application/x-gzip');
-        res.header('Content-Encoding: gzip');
-        res.header(
-          'Content-Disposition: attachment; filename="sitemap.xml.gz"',
-        );
+        res.set('Content-Type', 'application/x-gzip');
+        res.set('Content-Encoding', 'gzip');
+        res.set('Content-Disposition', 'attachment; filename="sitemap.xml.gz"');
         res.send(sitemap);
       });
+    } else if (req.path.match(/(.*)\/@@images\/(.*)/)) {
+      imageAuth(req).then(image => {
+        res.set('Content-Type', image.headers['content-type']);
+        res.send(image.body);
+      });
     } else {
       loadOnServer({ store, location, routes, api })
         .then(() => {