propose fix for CORS issues with missing crossorigin tag

README.md

@@ -24,7 +24,10 @@ webpack_encore:
     output_path: '%kernel.project_dir%/public/build'
     # If multiple builds are defined (as shown below), you can disable the default build:
     # output_path: false
-
+
+    # if using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
+    # crossorigin: 'anonymous'
+
     # if you have multiple builds:
     # builds:
         # pass "frontend" as the 3rg arg to the Twig functions

src/Asset/TagRenderer.php

@@ -18,9 +18,12 @@ final class TagRenderer
 
     private $packages;
 
+    private $defaultAttributes;
+
     public function __construct(
         $entrypointLookupCollection,
-        Packages $packages
+        Packages $packages,
+        array $defaultAttributes = []
     ) {
         if ($entrypointLookupCollection instanceof EntrypointLookupInterface) {
             @trigger_error(sprintf('The "$entrypointLookupCollection" argument in method "%s()" must be an instance of EntrypointLookupCollection.', __METHOD__), E_USER_DEPRECATED);
@@ -37,6 +40,7 @@ public function __construct(
         }
 
         $this->packages = $packages;
+        $this->defaultAttributes = $defaultAttributes;
     }
 
     public function renderWebpackScriptTags(string $entryName, string $packageName = null, string $entrypointName = '_default'): string
@@ -46,9 +50,8 @@ public function renderWebpackScriptTags(string $entryName, string $packageName =
         $integrityHashes = ($entryPointLookup instanceof IntegrityDataProviderInterface) ? $entryPointLookup->getIntegrityData() : [];
 
         foreach ($entryPointLookup->getJavaScriptFiles($entryName) as $filename) {
-            $attributes = [
-                'src' => $this->getAssetPath($filename, $packageName),
-            ];
+            $attributes = $this->defaultAttributes;
+            $attributes['src'] = $this->getAssetPath($filename, $packageName);
 
             if (isset($integrityHashes[$filename])) {
                 $attributes['integrity'] = $integrityHashes[$filename];
@@ -70,10 +73,9 @@ public function renderWebpackLinkTags(string $entryName, string $packageName = n
         $integrityHashes = ($entryPointLookup instanceof IntegrityDataProviderInterface) ? $entryPointLookup->getIntegrityData() : [];
 
         foreach ($entryPointLookup->getCssFiles($entryName) as $filename) {
-            $attributes = [
-                'rel' => 'stylesheet',
-                'href' => $this->getAssetPath($filename, $packageName),
-            ];
+            $attributes = $this->defaultAttributes;
+            $attributes['rel'] = 'stylesheet';
+            $attributes['href'] = $this->getAssetPath($filename, $packageName);
 
             if (isset($integrityHashes[$filename])) {
                 $attributes['integrity'] = $integrityHashes[$filename];

src/DependencyInjection/Configuration.php

@@ -34,6 +34,11 @@ public function getConfigTreeBuilder()
                     ->isRequired()
                     ->info('The path where Encore is building the assets - i.e. Encore.setOutputPath()')
                 ->end()
+                ->enumNode('crossorigin')
+                    ->defaultFalse()
+                    ->values([false, 'anonymous', 'use-credentials'])
+                    ->info('crossorigin value when Encore.enableIntegrityHashes() is used, can be false (default), anonymous or use-credentials')
+                ->end()
                 ->booleanNode('cache')
                     ->info('Enable caching of the entry point file(s)')
                     ->defaultFalse()

src/DependencyInjection/WebpackEncoreExtension.php

@@ -50,10 +50,18 @@ public function load(array $configs, ContainerBuilder $container)
 
         $container->getDefinition('webpack_encore.entrypoint_lookup_collection')
             ->replaceArgument(0, ServiceLocatorTagPass::register($container, $factories));
-
         if (false !== $config['output_path']) {
             $container->setAlias(EntrypointLookupInterface::class, new Alias($this->getEntrypointServiceId('_default')));
         }
+
+        $defaultAttributes = [];
+
+        if (false !== $config['crossorigin']) {
+            $defaultAttributes['crossorigin'] = $config['crossorigin'];
+        }
+
+        $container->getDefinition('webpack_encore.tag_renderer')
+            ->replaceArgument(2, $defaultAttributes);
     }
 
     private function entrypointFactory(ContainerBuilder $container, string $name, string $path, bool $cacheEnabled): Reference

src/Resources/config/services.xml

@@ -16,6 +16,7 @@
         <service id="webpack_encore.tag_renderer" class="Symfony\WebpackEncoreBundle\Asset\TagRenderer">
             <argument type="service" id="webpack_encore.entrypoint_lookup_collection" />
             <argument type="service" id="assets.packages" />
+            <argument type="collection" />
         </service>
 
         <service id="webpack_encore.twig_entry_files_extension" class="Symfony\WebpackEncoreBundle\Twig\EntryFilesTwigExtension">

tests/Asset/TagRendererTest.php

@@ -18,7 +18,7 @@
 
 class TagRendererTest extends TestCase
 {
-    public function testRenderScriptTags()
+    public function testRenderScriptTagsWithDefaultAttributes()
     {
         $entrypointLookup = $this->createMock(EntrypointLookupInterface::class);
         $entrypointLookup->expects($this->once())
@@ -40,7 +40,7 @@ public function testRenderScriptTags()
             ->willReturnCallback(function ($path) {
                 return 'http://localhost:8080'.$path;
             });
-        $renderer = new TagRenderer($entrypointCollection, $packages);
+        $renderer = new TagRenderer($entrypointCollection, $packages,  []);
 
         $output = $renderer->renderWebpackScriptTags('my_entry', 'custom_package');
         $this->assertContains(
@@ -71,11 +71,11 @@ public function testRenderScriptTagsWithBadFilename()
             ->willReturnCallback(function ($path) {
                 return 'http://localhost:8080'.$path;
             });
-        $renderer = new TagRenderer($entrypointCollection, $packages);
+        $renderer = new TagRenderer($entrypointCollection, $packages, ['crossorigin'=>'anonymous']);
 
         $output = $renderer->renderWebpackScriptTags('my_entry', 'custom_package');
         $this->assertContains(
-            '<script src="http://localhost:8080/build/file&lt;&quot;bad_chars.js"></script>',
+            '<script crossorigin="anonymous" src="http://localhost:8080/build/file&lt;&quot;bad_chars.js"></script>',
             $output
         );
     }
@@ -117,21 +117,21 @@ public function testRenderScriptTagsWithinAnEntryPointCollection()
             ->willReturnCallback(function ($path) {
                 return 'http://localhost:8080'.$path;
             });
-        $renderer = new TagRenderer($entrypointCollection, $packages);
+        $renderer = new TagRenderer($entrypointCollection, $packages, ['crossorigin'=>'anonymous']);
 
         $output = $renderer->renderWebpackScriptTags('my_entry', 'custom_package');
         $this->assertContains(
-            '<script src="http://localhost:8080/build/file1.js"></script>',
+            '<script crossorigin="anonymous" src="http://localhost:8080/build/file1.js"></script>',
             $output
         );
         $output = $renderer->renderWebpackScriptTags('my_entry', null, 'second');
         $this->assertContains(
-            '<script src="http://localhost:8080/build/file2.js"></script>',
+            '<script crossorigin="anonymous" src="http://localhost:8080/build/file2.js"></script>',
             $output
         );
         $output = $renderer->renderWebpackScriptTags('my_entry', 'specific_package', 'third');
         $this->assertContains(
-            '<script src="http://localhost:8080/build/file3.js"></script>',
+            '<script crossorigin="anonymous" src="http://localhost:8080/build/file3.js"></script>',
             $output
         );
     }
@@ -167,15 +167,15 @@ public function testRenderScriptTagsWithHashes()
             ->willReturnCallback(function ($path) {
                 return 'http://localhost:8080'.$path;
             });
-        $renderer = new TagRenderer($entrypointCollection, $packages, true);
+        $renderer = new TagRenderer($entrypointCollection, $packages, ['crossorigin'=>'anonymous']);
 
         $output = $renderer->renderWebpackScriptTags('my_entry', 'custom_package');
         $this->assertContains(
-            '<script src="http://localhost:8080/build/file1.js" integrity="sha384-Q86c+opr0lBUPWN28BLJFqmLhho+9ZcJpXHorQvX6mYDWJ24RQcdDarXFQYN8HLc"></script>',
+            '<script crossorigin="anonymous" src="http://localhost:8080/build/file1.js" integrity="sha384-Q86c+opr0lBUPWN28BLJFqmLhho+9ZcJpXHorQvX6mYDWJ24RQcdDarXFQYN8HLc"></script>',
             $output
         );
         $this->assertContains(
-            '<script src="http://localhost:8080/build/file2.js" integrity="sha384-ymG7OyjISWrOpH9jsGvajKMDEOP/mKJq8bHC0XdjQA6P8sg2nu+2RLQxcNNwE/3J"></script>',
+            '<script crossorigin="anonymous" src="http://localhost:8080/build/file2.js" integrity="sha384-ymG7OyjISWrOpH9jsGvajKMDEOP/mKJq8bHC0XdjQA6P8sg2nu+2RLQxcNNwE/3J"></script>',
             $output
         );
     }

tests/IntegrationTest.php

@@ -154,6 +154,7 @@ public function registerContainerConfiguration(LoaderInterface $loader)
             $container->loadFromExtension('webpack_encore', [
                 'output_path' => __DIR__.'/fixtures/build',
                 'cache' => true,
+                'crossorigin' => false,
                 'builds' => [
                     'different_build' => __DIR__.'/fixtures/different_build',
                 ],