Better access-control headers PROD-4372

Author: jmgasper

config/webpack/app-base.js

@@ -73,6 +73,10 @@ module.exports = function configFactory(ops) {
 
       /* Build timestamp. */
       timestamp: now.utc().toISOString(),
+
+      ...(o.crossOriginLoading ? {
+        crossOriginLoading: o.crossOriginLoading
+      } : {})
     };
     fs.writeFileSync(buildInfoUrl, JSON.stringify(buildInfo));
   }
@@ -103,6 +107,9 @@ module.exports = function configFactory(ops) {
       filename: `[name]-${now.valueOf()}.js`,
       path: path.resolve(__dirname, o.context, 'build'),
       publicPath: `${o.publicPath}/`,
+      ...(o.crossOriginLoading ? {
+        crossOriginLoading: o.crossOriginLoading
+      } : {})
     },
     plugins: [
       new MiniCssExtractPlugin({

src/server/renderer.jsx

@@ -157,7 +157,8 @@ export default function factory(webpackConfig, options) {
       const INJ = forge.util.encode64(`${iv}${cipher.output.data}`);
 
       /* It is supposed to end with '/' symbol as path separator. */
-      const { publicPath } = webpackConfig.output;
+      const { publicPath, crossOriginLoading } = webpackConfig.output;
+      const crossorigin = crossOriginLoading ? `crossorigin="${crossOriginLoading}"` : "";
 
       let assetsByChunkName;
       const { webpackStats } = res.locals;
@@ -177,7 +178,7 @@ export default function factory(webpackConfig, options) {
         assets = assets.filter(asset => asset.endsWith('.css'));
         assets.forEach((asset) => {
           styles.push((
-            `<link data-chunk="${chunk}" id="tru-style" href="https://github.com/%3Cspan%20class="pl-s1">${publicPath}${asset}" rel="stylesheet" />`
+            `<link data-chunk="${chunk}" id="tru-style" href="https://github.com/%3Cspan%20class="pl-s1">${publicPath}${asset}" ${crossorigin} rel="stylesheet" />`
           ));
         });
       });
@@ -192,6 +193,7 @@ export default function factory(webpackConfig, options) {
             <link rel="manifest" href="${publicPath}manifest.json">
             <link
               href="${publicPath}main-${timestamp}.css"
+              ${crossorigin}
               id="tru-style"
               rel="stylesheet"
             />
@@ -211,11 +213,13 @@ export default function factory(webpackConfig, options) {
             </script>
             <script
               src="${publicPath}polyfills-${timestamp}.js"
+              ${crossorigin}
               type="application/javascript"
             ></script>
             ${extraScripts ? extraScripts.join('') : ''}
             <script
               src="${publicPath}main-${timestamp}.js"
+              ${crossorigin}
               type="application/javascript"
             ></script>
           </body>

src/shared/containers/AppChunk/index.jsx

@@ -61,6 +61,7 @@ export default class SplitRoute extends React.Component {
     } = this.props;
 
     const PUBLIC_PATH = global.TRU_BUILD_INFO.publicPath;
+    const CROSS_ORIGIN_LOADING = global.TRU_BUILD_INFO.crossOriginLoading;
 
     const timestamp = moment(buildTimestamp()).valueOf();
 
@@ -171,6 +172,9 @@ export default class SplitRoute extends React.Component {
               link = document.createElement('link');
               link.setAttribute('data-chunk', chunkName);
               link.setAttribute('href', `${PUBLIC_PATH}/${chunkName}-${timestamp}.css`);
+              if (CROSS_ORIGIN_LOADING) {
+                link.setAttribute('crossorigin', CROSS_ORIGIN_LOADING);
+              }
               link.setAttribute('id', 'tru-style');
               link.setAttribute('rel', 'stylesheet');
               const head = document.getElementsByTagName('head')[0];