Injecting CSS and JS into HTML

leandrodamascena · leandrodamascena · commit 64377feeb064 · 2024-01-09T16:06:21.000Z
diff --git a/aws_lambda_powertools/event_handler/api_gateway.py b/aws_lambda_powertools/event_handler/api_gateway.py
@@ -1594,26 +1594,6 @@ def enable_swagger(
         """
         from aws_lambda_powertools.event_handler.openapi.models import Server
 
-        if not swagger_base_url:
-
-            @self.get("/swagger.js", include_in_schema=False)
-            def swagger_js():
-                body = Path.open(Path(__file__).parent / "openapi" / "swagger_ui" / "swagger-ui-bundle.min.js").read()
-                return Response(
-                    status_code=200,
-                    content_type="text/javascript",
-                    body=body,
-                )
-
-            @self.get("/swagger.css", include_in_schema=False)
-            def swagger_css():
-                body = Path.open(Path(__file__).parent / "openapi" / "swagger_ui" / "swagger-ui.min.css").read()
-                return Response(
-                    status_code=200,
-                    content_type="text/css",
-                    body=body,
-                )
-
         @self.get(path, middlewares=middlewares, include_in_schema=False)
         def swagger_handler():
             base_path = self._get_base_path()
@@ -1622,8 +1602,11 @@ def swagger_handler():
                 swagger_js = f"{swagger_base_url}/swagger-ui-bundle.min.js"
                 swagger_css = f"{swagger_base_url}/swagger-ui.min.css"
             else:
-                swagger_js = f"{base_path}/swagger.js"
-                swagger_css = f"{base_path}/swagger.css"
+                # We now inject CSS and JS into the SwaggerUI file
+                swagger_js = Path.open(
+                    Path(__file__).parent / "openapi" / "swagger_ui" / "swagger-ui-bundle.min.js",
+                ).read()
+                swagger_css = Path.open(Path(__file__).parent / "openapi" / "swagger_ui" / "swagger-ui.min.css").read()
 
             openapi_servers = servers or [Server(url=(base_path or "/"))]
 
@@ -1640,7 +1623,7 @@ def swagger_handler():
                 license_info=license_info,
             )
 
-            body = generate_swagger_html(spec, swagger_js, swagger_css)
+            body = generate_swagger_html(spec, swagger_js, swagger_css, swagger_base_url)
 
             return Response(
                 status_code=200,
diff --git a/aws_lambda_powertools/event_handler/openapi/swagger_ui/html.py b/aws_lambda_powertools/event_handler/openapi/swagger_ui/html.py
@@ -4,7 +4,7 @@
     from aws_lambda_powertools.event_handler.openapi.models import OpenAPI
 
 
-def generate_swagger_html(spec: "OpenAPI", js_url: str, css_url: str) -> str:
+def generate_swagger_html(spec: "OpenAPI", swagger_js: str, swagger_css: str, swagger_base_url: str) -> str:
     """
     Generate Swagger UI HTML page
 
@@ -30,6 +30,15 @@ def generate_swagger_html(spec: "OpenAPI", js_url: str, css_url: str) -> str:
         indent=2,
     ).replace("</", "<\\/")
 
+    # If Swagger base URL is present, generate HTML content with linked CSS and JavaScript files
+    # If no Swagger base URL is provided, include CSS and JavaScript directly in the HTML
+    if swagger_base_url:
+        swagger_css_content = f"<link rel='stylesheet' type='text/css' href='{swagger_css}'>"
+        swagger_js_content = f"<script src='{swagger_js}'></script>"
+    else:
+        swagger_css_content = f"<style>{swagger_css}</style>"
+        swagger_js_content = f"<script>{swagger_js}</script>"
+
     return f"""
 <!DOCTYPE html>
 <html>
@@ -40,7 +49,7 @@ def generate_swagger_html(spec: "OpenAPI", js_url: str, css_url: str) -> str:
       http-equiv="Cache-control"
       content="no-cache, no-store, must-revalidate"
     />
-    <link rel="stylesheet" type="text/css" href="{css_url}">
+    {swagger_css_content}
 </head>
 
 <body>
@@ -49,7 +58,7 @@ def generate_swagger_html(spec: "OpenAPI", js_url: str, css_url: str) -> str:
     </div>
 </body>
 
-<script src="{js_url}"></script>
+{swagger_js_content}
 
 <script>
   var swaggerUIOptions = {{
diff --git a/docs/core/event_handler/api_gateway.md b/docs/core/event_handler/api_gateway.md
@@ -485,7 +485,6 @@ There are some important **caveats** that you should know before enabling it:
 | Swagger UI is **publicly accessible by default** | When using `enable_swagger` method, you can [protect sensitive API endpoints by implementing a custom middleware](#customizing-swagger-ui) using your preferred authorization mechanism. |
 | **No micro-functions support** yet               | Swagger UI is enabled on a per resolver instance which will limit its accuracy here.                                                                                                     |
 | You need to expose **new routes**                | You'll need to expose the following paths to Lambda: `/swagger`, `/swagger.css`, `/swagger.js`; ignore if you're routing all paths already.                                              |
-| Problems with **{proxy+}** resource and cache    | If you're not using an external CDN for SwaggerUI assets and relying on **Amazon API Gateway cache**, you must specify dedicated paths for `/swagger.js` and `/swagger.css` rather than utilizing `{proxy+}`.                  |
 
 ```python hl_lines="12-13" title="enabling_swagger.py"
 --8<-- "examples/event_handler_rest/src/enabling_swagger.py"
diff --git a/tests/functional/event_handler/test_openapi_swagger.py b/tests/functional/event_handler/test_openapi_swagger.py
@@ -14,32 +14,6 @@ def test_openapi_swagger():
     assert result["statusCode"] == 200
     assert result["multiValueHeaders"]["Content-Type"] == ["text/html"]
 
-    # Using our embedded assets
-    assert "/swagger.css" in result["body"]
-    assert "/swagger.js" in result["body"]
-
-
-def test_openapi_embedded_js():
-    app = APIGatewayRestResolver(enable_validation=True)
-    app.enable_swagger()
-
-    LOAD_GW_EVENT["path"] = "/swagger.js"
-
-    result = app(LOAD_GW_EVENT, {})
-    assert result["statusCode"] == 200
-    assert result["multiValueHeaders"]["Content-Type"] == ["text/javascript"]
-
-
-def test_openapi_embedded_css():
-    app = APIGatewayRestResolver(enable_validation=True)
-    app.enable_swagger()
-
-    LOAD_GW_EVENT["path"] = "/swagger.css"
-
-    result = app(LOAD_GW_EVENT, {})
-    assert result["statusCode"] == 200
-    assert result["multiValueHeaders"]["Content-Type"] == ["text/css"]
-
 
 def test_openapi_swagger_with_custom_base_url():
     app = APIGatewayRestResolver(enable_validation=True)
