Fix the crossorigin attribute (#26096)

app/views/layouts/application.html.haml

@@ -29,7 +29,7 @@
     = stylesheet_pack_tag 'common', media: 'all', crossorigin: 'anonymous'
     = stylesheet_pack_tag current_theme, media: 'all', crossorigin: 'anonymous'
     = javascript_pack_tag 'common', crossorigin: 'anonymous'
-    = preload_pack_asset "locale/#{I18n.locale}-json.js", crossorigin: 'anonymous'
+    = preload_pack_asset "locale/#{I18n.locale}-json.js"
     = csrf_meta_tags unless skip_csrf_meta_tags?
     %meta{ name: 'style-nonce', content: request.content_security_policy_nonce }
 

app/views/layouts/embedded.html.haml

@@ -14,7 +14,7 @@
     = stylesheet_pack_tag 'common', media: 'all', crossorigin: 'anonymous'
     = stylesheet_pack_tag Setting.default_settings['theme'], media: 'all', crossorigin: 'anonymous'
     = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
-    = preload_pack_asset "locale/#{I18n.locale}-json.js", crossorigin: 'anonymous'
+    = preload_pack_asset "locale/#{I18n.locale}-json.js"
     = render_initial_state
     = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
   %body.embed

app/views/shared/_web_app.html.haml

@@ -1,8 +1,8 @@
 - content_for :header_tags do
   - if user_signed_in?
-    = preload_pack_asset 'features/compose.js', crossorigin: 'anonymous'
-    = preload_pack_asset 'features/home_timeline.js', crossorigin: 'anonymous'
-    = preload_pack_asset 'features/notifications.js', crossorigin: 'anonymous'
+    = preload_pack_asset 'features/compose.js'
+    = preload_pack_asset 'features/home_timeline.js'
+    = preload_pack_asset 'features/notifications.js'
     %meta{ name: 'initialPath', content: request.path }
 
   %meta{ name: 'applicationServerKey', content: Rails.configuration.x.vapid_public_key }

config/webpack/shared.js

@@ -34,6 +34,7 @@ module.exports = {
     chunkFilename: 'js/[name]-[chunkhash].chunk.js',
     hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
     hashFunction: 'sha256',
+    crossOriginLoading: 'anonymous',
     path: output.path,
     publicPath: output.publicPath,
   },

lib/webpacker/helper_extensions.rb

@@ -13,7 +13,14 @@ module Webpacker::HelperExtensions
 
   def preload_pack_asset(name, **options)
     src, integrity = current_webpacker_instance.manifest.lookup!(name, with_integrity: true)
-    preload_link_tag(src, options.merge(integrity: integrity))
+
+    # This attribute will only work if the assets are on a different domain.
+    # And Webpack will (correctly) only add it in this case, so we need to conditionally set it here
+    # otherwise the preloaded request and the real request will have different crossorigin values
+    # and the preloaded file wont be loaded
+    crossorigin = 'anonymous' if Rails.configuration.action_controller.asset_host.present?
+
+    preload_link_tag(src, options.merge(integrity: integrity, crossorigin: crossorigin))
   end
 end