Use content-disposition for setting the Content-Disposition header (#13072)

GitOrigin-RevId: f84100beb5e00485be4732c954b5ee553fe18558

package-lock.json

@@ -35192,6 +35192,7 @@
         "classnames": "^2.2.6",
         "codemirror": "~5.33.0",
         "connect-redis": "^6.1.3",
+        "content-disposition": "^0.5.0",
         "contentful": "^6.1.1",
         "cookie": "^0.2.3",
         "cookie-parser": "1.3.5",
@@ -35334,7 +35335,6 @@
         "chai-as-promised": "^7.1.1",
         "chai-exclude": "^2.0.3",
         "cheerio": "^1.0.0-rc.3",
-        "content-disposition": "^0.5.0",
         "copy-webpack-plugin": "^10.2.4",
         "css-loader": "^6.7.1",
         "css-minimizer-webpack-plugin": "^3.4.1",

services/web/app/src/Features/Compile/CompileController.js

@@ -339,7 +339,7 @@ module.exports = CompileController = {
       if (req.query.popupDownload) {
         res.setContentDisposition('attachment', { filename })
       } else {
-        res.setContentDisposition('', { filename })
+        res.setContentDisposition('inline', { filename })
       }
 
       rateLimit(function (err, canContinue) {

services/web/app/src/infrastructure/ExpressLocals.js

@@ -7,6 +7,7 @@ const { URL } = require('url')
 const Path = require('path')
 const moment = require('moment')
 const request = require('request')
+const contentDisposition = require('content-disposition')
 const Features = require('./Features')
 const SessionManager = require('../Features/Authentication/SessionManager')
 const SplitTestMiddleware = require('../Features/SplitTests/SplitTestMiddleware')
@@ -104,13 +105,11 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
   })
 
   function addSetContentDisposition(req, res, next) {
-    res.setContentDisposition = function (type, opts) {
-      const directives = _.map(
-        opts,
-        (v, k) => `${k}="${encodeURIComponent(v)}"`
+    res.setContentDisposition = function (type, { filename }) {
+      res.setHeader(
+        'Content-Disposition',
+        contentDisposition(filename, { type })
       )
-      const contentDispositionValue = `${type}; ${directives.join('; ')}`
-      res.setHeader('Content-Disposition', contentDispositionValue)
     }
     next()
   }

services/web/package.json

@@ -147,6 +147,7 @@
     "classnames": "^2.2.6",
     "codemirror": "~5.33.0",
     "connect-redis": "^6.1.3",
+    "content-disposition": "^0.5.0",
     "contentful": "^6.1.1",
     "cookie": "^0.2.3",
     "cookie-parser": "1.3.5",
@@ -289,7 +290,6 @@
     "chai-as-promised": "^7.1.1",
     "chai-exclude": "^2.0.3",
     "cheerio": "^1.0.0-rc.3",
-    "content-disposition": "^0.5.0",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",

services/web/test/unit/src/Compile/CompileControllerTests.js

@@ -379,9 +379,9 @@ describe('CompileController', function () {
       })
 
       it('should set the content-disposition header with a safe version of the project name', function () {
-        this.res.setContentDisposition
-          .calledWith('', { filename: 'test_nam_.pdf' })
-          .should.equal(true)
+        this.res.setContentDisposition.should.be.calledWith('inline', {
+          filename: 'test_nam_.pdf',
+        })
       })
 
       it('should increment the pdf-downloads metric', function () {

services/web/test/unit/src/FileStore/FileStoreControllerTests.js

@@ -81,9 +81,9 @@ describe('FileStoreController', function () {
 
     it('should set the Content-Disposition header', function (done) {
       this.stream.pipe = des => {
-        this.res.setContentDisposition
-          .calledWith('attachment', { filename: this.file.name })
-          .should.equal(true)
+        this.res.setContentDisposition.should.be.calledWith('attachment', {
+          filename: this.file.name,
+        })
         done()
       }
       this.controller.getFile(this.req, this.res)