Improved CORS policy support to fix debug mode visualizations

package.json

@@ -185,6 +185,7 @@
     "file-loader": "^1.1.10",
     "glob": "^7.1.6",
     "html-loader": "^0.5.5",
+    "html-webpack-inject-attributes-plugin": "^1.0.6",
     "html-webpack-plugin": "^4.2.0",
     "htmlhint": "^0.11.0",
     "internal-ip": "^6.1.0",

src/avatar.js

@@ -136,6 +136,7 @@ class AvatarPage extends React.Component {
           )}
         </div>
         <img
+          crossOrigin="anonymous"
           className={styles.logo}
           src={configs.image("logo")}
           alt={<FormattedMessage id="avatar-page.logo" defaultMessage="Logo" />}

src/discord.js

@@ -41,7 +41,7 @@ class DiscordPage extends Component {
               <div className={styles.heroPane}>
                 <div className={styles.heroMessage}>
                   <div className={styles.discordLogo}>
-                    <img src={discordBotLogo} />
+                    <img crossOrigin="anonymous" src={discordBotLogo} />
                   </div>
                   <div className={styles.primaryTagline}>
                     <FormattedMessage

src/react-components/avatar-editor.js

@@ -263,7 +263,7 @@ class AvatarEditor extends Component {
       <label htmlFor={`avatar-file_${name}`}>
         <div className="img-box">
           {this.state.avatar.files[name] ? (
-            <img src={this.state.avatar.files[name]} />
+            <img crossOrigin="anonymous" src={this.state.avatar.files[name]} />
           ) : (
             <FontAwesomeIcon icon={faCloudUploadAlt} />
           )}
@@ -387,7 +387,7 @@ class AvatarEditor extends Component {
             className={classNames("item", { selected: a.id === this.state.avatar[propName] })}
             style={{ paddingBottom: `${(a.images.preview.width / a.images.preview.height) * 100}%` }}
           >
-            <img src={a.images.preview.url} />
+            <img crossOrigin="anonymous" src={a.images.preview.url} />
           </div>
         ))}
       </div>

src/react-components/home/HomePage.js

@@ -53,7 +53,7 @@ export function HomePage() {
       <Container>
         <div className={styles.hero}>
           <div className={styles.logoContainer}>
-            <img alt={configs.translation("app-name")} src={configs.image("logo")} />
+            <img crossOrigin="anonymous" alt={configs.translation("app-name")} src={configs.image("logo")} />
           </div>
           <div className={styles.appInfo}>
             <div className={styles.appDescription}>{configs.translation("app-description")}</div>
@@ -62,6 +62,7 @@ export function HomePage() {
           </div>
           <div className={styles.heroImageContainer}>
             <img
+              crossOrigin="anonymous"
               alt={intl.formatMessage(
                 {
                   id: "home-page.hero-image-alt",
@@ -77,7 +78,7 @@ export function HomePage() {
       {configs.feature("show_feature_panels") && (
         <Container className={classNames(styles.features, styles.colLg, styles.centerLg)}>
           <Column padding gap="xl" className={styles.card}>
-            <img src={configs.image("landing_rooms_thumb")} />
+            <img crossOrigin="anonymous" src={configs.image("landing_rooms_thumb")} />
             <h3>
               <FormattedMessage id="home-page.rooms-title" defaultMessage="Instantly create rooms" />
             </h3>
@@ -89,7 +90,7 @@ export function HomePage() {
             </p>
           </Column>
           <Column padding gap="xl" className={styles.card}>
-            <img src={configs.image("landing_communicate_thumb")} />
+            <img crossOrigin="anonymous" src={configs.image("landing_communicate_thumb")} />
             <h3>
               <FormattedMessage id="home-page.communicate-title" defaultMessage="Communicate naturally" />
             </h3>
@@ -101,7 +102,7 @@ export function HomePage() {
             </p>
           </Column>
           <Column padding gap="xl" className={styles.card}>
-            <img src={configs.image("landing_media_thumb")} />
+            <img crossOrigin="anonymous" src={configs.image("landing_media_thumb")} />
             <h3>
               <FormattedMessage id="home-page.media-title" defaultMessage="An easier way to share media" />
             </h3>

src/react-components/image-message.js

@@ -16,7 +16,7 @@ export default function ImageMessage({ name, body: { src: url }, className, mayS
       )}
       <div className={styles.mediaBody}>{name && <div className={styles.messageSource}>{name}:</div>}</div>
       <a href={url} target="_blank" rel="noopener noreferrer">
-        <img src={proxiedUrlFor(url)} />
+        <img crossOrigin="anonymous" src={proxiedUrlFor(url)} />
       </a>
     </div>
   );

src/react-components/layout/Footer.js

@@ -76,6 +76,7 @@ export function Footer({
             {showCompanyLogo && (
               <li>
                 <img
+                  crossOrigin="anonymous"
                   className={styles.companyLogo}
                   src={companyLogoUrl}
                   alt={<FormattedMessage id="footer.logo-alt" defaultMessage="Logo" />}

src/react-components/layout/Header.js

@@ -30,7 +30,7 @@ export function Header({
           <ul>
             <li>
               <a href="/" className={styles.homeLink}>
-                <img alt={appName} src={appLogo} />
+                <img crossOrigin="anonymous" alt={appName} src={appLogo} />
               </a>
             </li>
             {showCloud && (

src/react-components/layout/LoadingScreenLayout.js

@@ -7,7 +7,7 @@ export function LoadingScreenLayout({ center, bottom, logoSrc }) {
   return (
     <div className={styles.loadingScreenLayout}>
       <Column center padding gap="lg" className={styles.center}>
-        <img className={styles.logo} src={logoSrc} />
+        <img crossOrigin="anonymous" className={styles.logo} src={logoSrc} />
         {center}
       </Column>
       {bottom && (

src/react-components/link-root.js

@@ -171,6 +171,7 @@ class LinkRoot extends Component {
           <div className={styles.linkContents}>
             <a className={styles.logo} href="/">
               <img
+                crossOrigin="anonymous"
                 src={configs.image("logo")}
                 alt={<FormattedMessage id="link-page.logo-alt" defaultMessage="Logo" />}
               />

src/react-components/photo-message.js

@@ -49,7 +49,7 @@ export default function PhotoMessage({ name, body: { src: url }, className, mayS
         />
       </div>
       <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
-        <img src={url} />
+        <img crossOrigin="anonymous" src={url} />
       </a>
     </div>
   );

src/react-components/preload-overlay.js

@@ -26,6 +26,7 @@ export default class PreloadOverlay extends Component {
         </div>
         <a href="/" target="_blank" rel="noopener noreferrer" className={styles.logo}>
           <img
+            crossOrigin="anonymous"
             src={configs.image("logo")}
             alt={<FormattedMessage id="preload-overlay.logo-alt" defaultMessage="Logo" />}
           />

src/react-components/room/ChatSidebar.js

@@ -347,7 +347,7 @@ function getMessageComponent(message) {
     case "photo":
       return (
         <MessageBubble key={message.id} media>
-          <img src={message.body.src} />
+          <img crossOrigin="anonymous" src={message.body.src} />
         </MessageBubble>
       );
     default:

src/react-components/room/MediaTiles.js

@@ -193,7 +193,7 @@ export function MediaTile({ entry, processThumbnailUrl, onClick, onEdit, onShowS
             height={thumbnailHeight}
           />
         ) : (
-          <img src={thumbnailUrl} alt={entry.name} width={thumbnailWidth} height={thumbnailHeight} />
+          <img crossOrigin="anonymous" src={thumbnailUrl} alt={entry.name} width={thumbnailWidth} height={thumbnailHeight} />
         )}
       </a>
       {entry.favorited && <StarIcon className={styles.favoriteIcon} />}

src/react-components/room/RoomEntryModal.js

@@ -35,7 +35,7 @@ export function RoomEntryModal({
         {breakpoint !== "sm" &&
           breakpoint !== "md" && (
             <div className={styles.logoContainer}>
-              <img src={logoSrc} alt={appName} />
+              <img crossOrigin="anonymous" src={logoSrc} alt={appName} />
             </div>
           )}
         <div className={styles.roomName}>

src/react-components/room/TweetEditorModal.js

@@ -47,7 +47,7 @@ export function TweetEditorModal({
           {contentSubtype && contentSubtype.startsWith("video") ? (
             <video src={mediaThumbnailUrl} width={450} height={255} controls />
           ) : (
-            <img src={mediaThumbnailUrl} width={450} height={255} />
+            <img crossOrigin="anonymous" src={mediaThumbnailUrl} width={450} height={255} />
           )}
         </div>
         <div className={styles.editor}>

src/react-components/room/UserProfileSidebarContainer.js

@@ -119,7 +119,7 @@ export function UserProfileSidebarContainer({
     <UserProfileSidebar
       displayName={displayName}
       identityName={identityName}
-      avatarPreview={<img src={avatarThumbnailUrl} />}
+      avatarPreview={<img crossOrigin="anonymous" src={avatarThumbnailUrl} />}
       isSignedIn={isSignedIn}
       canPromote={mayAddOwner}
       onPromote={addOwner}

src/react-components/scene-ui.js

@@ -211,14 +211,15 @@ class SceneUI extends Component {
             [styles.screenshotHidden]: this.props.sceneLoaded
           })}
         >
-          {this.state.showScreenshot && <img src={this.props.sceneScreenshotURL} />}
+          {this.state.showScreenshot && <img crossOrigin="anonymous" src={this.props.sceneScreenshotURL} />}
         </div>
         <div className={styles.whiteOverlay} />
         <div className={styles.grid}>
           <div className={styles.mainPanel}>
             <a href="/" className={styles.logo}>
               <img
-                src={configs.image("logo")}
+                 crossOrigin="anonymous"
+                 src={configs.image("logo")}
                 alt={<FormattedMessage id="scene-page.logo-alt" defaultMessage="Logo" />}
               />
             </a>
@@ -264,7 +265,7 @@ class SceneUI extends Component {
               )}
             </IfFeature>
             <a href={tweetLink} rel="noopener noreferrer" target="_blank" className={styles.tweetButton}>
-              <img src="../assets/images/twitter.svg" />
+              <img crossOrigin="anonymous" src="../assets/images/twitter.svg" />
               <div>
                 <FormattedMessage id="scene-page.tweet-button" defaultMessage="Share on Twitter" />
               </div>
@@ -284,7 +285,7 @@ class SceneUI extends Component {
                 values={{
                   a: () => (
                     <a href="/spoke">
-                      <img src={configs.image("editor_logo")} />
+                      <img crossOrigin="anonymous" src={configs.image("editor_logo")} />
                     </a>
                   )
                 }}

webpack.config.js

@@ -5,6 +5,7 @@ const selfsigned = require("selfsigned");
 const webpack = require("webpack");
 const cors = require("cors");
 const HTMLWebpackPlugin = require("html-webpack-plugin");
+const HTMLWebpackInjectAttributesPlugin = require("html-webpack-inject-attributes-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
@@ -275,7 +276,9 @@ module.exports = async (env, argv) => {
     },
     output: {
       filename: "assets/js/[name]-[chunkhash].js",
-      publicPath: process.env.BASE_ASSETS_PATH || ""
+      publicPath: process.env.BASE_ASSETS_PATH || "",
+      // May be required for dynamically loaded scripts
+      crossOriginLoading: "anonymous"
     },
     devtool: argv.mode === "production" ? "source-map" : "inline-source-map",
     devServer: {
@@ -627,7 +630,12 @@ module.exports = async (env, argv) => {
       // Extract required css and add a content hash.
       new MiniCssExtractPlugin({
         filename: "assets/stylesheets/[name]-[contenthash].css",
-        disable: argv.mode !== "production"
+        disable: argv.mode !== "production",
+        attributes: {
+          // May be required for dynamically loaded stylesheets
+          "crossorigin": "anonymous"
+        },
+
       }),
       // Define process.env variables in the browser context.
       new webpack.DefinePlugin({
@@ -645,7 +653,12 @@ module.exports = async (env, argv) => {
           POSTGREST_SERVER: process.env.POSTGREST_SERVER,
           APP_CONFIG: appConfig
         })
+      }),
+      // Add crossorigin attribute to static <script> and <style> tags
+      new HTMLWebpackInjectAttributesPlugin({
+        crossorigin: "anonymous"
       })
+
     ]
   };
 };