fix(security): allow more strict CSP for SVG assets (#9209)

Refs #7540
swagger-api · Sep 14, 2023 · b7f5331 · b7f5331
1 parent efe6133
commit b7f5331
Show file tree

Hide file tree

Showing 8 changed files with 605 additions and 62 deletions.
diff --git a/dev-helpers/index.html b/dev-helpers/index.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="Content-Security-Policy" content="img-src 'self'" />
   <title>Swagger UI</title>
   <link rel="stylesheet" type="text/css" href="style.css">
   <style>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -124,6 +124,7 @@
     "@jest/globals": "=29.6.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@release-it/conventional-changelog": "=5.1.0",
+    "@svgr/webpack": "=8.1.0",
     "@wojtekmaj/enzyme-adapter-react-17": "=0.8.0",
     "autoprefixer": "^10.4.15",
     "babel-loader": "^9.1.3",

diff --git a/src/core/components/model.jsx b/src/core/components/model.jsx
@@ -68,7 +68,7 @@ export default class Model extends ImmutablePureComponent {
     if(!schema) {
       return <span className="model model-title">
               <span className="model-title__text">{ displayName || name }</span>
-              <img src={RollingLoadSVG} height={"20px"} width={"20px"} />
+              <RollingLoadSVG height="20px" width="20px" />
             </span>
     }
 

diff --git a/src/core/components/operation.jsx b/src/core/components/operation.jsx
@@ -123,7 +123,7 @@ export default class Operation extends PureComponent {
           <Collapse isOpened={isShown}>
             <div className="opblock-body">
               { (operation && operation.size) || operation === null ? null :
-                <img height={"32px"} width={"32px"} src={RollingLoadSVG} className="opblock-loading-animation" />
+                <RollingLoadSVG height="32px" width="32px" className="opblock-loading-animation" />
               }
               { deprecated && <h4 className="opblock-title_normal"> Warning: Deprecated</h4>}
               { description &&

diff --git a/src/standalone/plugins/top-bar/components/Logo.jsx b/src/standalone/plugins/top-bar/components/Logo.jsx
@@ -4,6 +4,6 @@
 import React from "react"
 import SwaggerUILogo from "../assets/logo_small.svg"
 
-const Logo = () => <img height="40" src={SwaggerUILogo} alt="Swagger UI" />
+const Logo = () => <SwaggerUILogo height="40" />
 
 export default Logo
diff --git a/webpack/_config-builder.js b/webpack/_config-builder.js
@@ -26,9 +26,16 @@ const baseRules = [
       cacheDirectory: true,
     },
   },
-  { test: /\.(txt|yaml)$/, type: "asset/source" },
   {
-    test: /\.(png|jpg|jpeg|gif|svg)$/,
+    test: /\.(txt|yaml)$/,
+    type: "asset/source",
+  },
+  {
+    test: /\.svg$/,
+    use: ["@svgr/webpack"],
+  },
+  {
+    test: /\.(png|jpg|jpeg|gif)$/,
     type: "asset/inline",
   },
 ]

diff --git a/webpack/dev.js b/webpack/dev.js
@@ -89,7 +89,11 @@ const devConfig = configBuilder(
           type: "asset/source",
         },
         {
-          test: /\.(png|jpg|jpeg|gif|svg)$/,
+          test: /\.svg$/,
+          use: ["@svgr/webpack"],
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif)$/,
           type: "asset/inline",
         },
       ],