Properly encode file names emitted as part of URLs.

jantimon · Aug 7, 2019 · 9d0c155 · 9d0c155
1 parent 34d8aa5
commit 9d0c155
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/index.js b/index.js
@@ -604,7 +604,7 @@ class HtmlWebpackPlugin {
       // E.g. bundle.js -> /bundle.js?hash
       const entryPointPublicPaths = entryPointFiles
         .map(chunkFile => {
-          const entryPointPublicPath = publicPath + chunkFile;
+          const entryPointPublicPath = publicPath + this.urlencodePath(chunkFile);
           return this.options.hash
             ? this.appendHash(entryPointPublicPath, compilationHash)
             : entryPointPublicPath;
@@ -926,6 +926,16 @@ class HtmlWebpackPlugin {
     return url + (url.indexOf('?') === -1 ? '?' : '&') + hash;
   }
 
+  /**
+   * Encode each path component using `encodeURIComponent` as files can contain characters
+   * which needs special encoding in URLs like `+ `.
+   *
+   * @param {string} filePath
+   */
+  urlencodePath (filePath) {
+    return filePath.split('/').map(encodeURIComponent).join('/');
+  }
+
   /**
    * Helper to return the absolute template path with a fallback loader
    * @param {string} template

diff --git a/spec/basic.spec.js b/spec/basic.spec.js
@@ -104,6 +104,18 @@ describe('HtmlWebpackPlugin', () => {
     }, [/<body>[\s]*<script src="index_bundle.js"><\/script>[\s]*<\/body>/], null, done);
   });
 
+  it.only('properly encodes file names in emitted URIs', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'foo/very fancy+name.js'
+      },
+      plugins: [new HtmlWebpackPlugin()]
+    }, [/<body>[\s]*<script src="foo\/very%20fancy%2Bname.js"><\/script>[\s]*<\/body>/], null, done);
+  });
+
   it('generates a default index.html file with multiple entry points', done => {
     testHtmlPlugin({
       mode: 'production',