Swagger UI shows raw html in Response Body frame

See original GitHub issue

Hi,

I know this probably not a bug, but I have tried to ask for help in swagger forum and failed. I think here must be more helpful so I ask here.

I use swagger with Lavarel. When the response is html, the raw html just showed in the response body frame, but not the rendered web page. I used to use swagger with ruby grape, it could render the html.

I’m not sure if it has something to do with https://github.com/slampenny/Swaggervel Could anyone please hint me, any help will be highly appreciated.

This is my swagger

{
    "swagger": "2.0",
    "info": {
        "version": "1.0.0"
    },
    "basePath": "",
    "consumes": [
        "application/json"
    ],
    "produces": [
        "text/html"
    ],
    "paths": {
        "/api/order/create": {
            "post": {
                "tags": [
                    "Order"
                ],
                "produces": [
                    "text/html"
                ],
                "parameters": [
                    {
                        "name": "body",
                        "in": "body",
                        "required": true,
                        "schema": {
                            "$ref": "#/definitions/order"
                        }
                    }
                ],
                "responses": {
                    "200": {
                        "description": "An example resource"
                    }
                }
            }
        },
        "/": {
            "get": {
                "tags": [
                    "Root"
                ],
                "produces": [
                    "text/html"
                ],
                "responses": {
                    "200": {
                        "description": "An example resource"
                    }
                }
            }
        }
    },
    "definitions": {
        "errorModel": {
            "required": [
                "code",
                "message"
            ],
            "properties": {
                "code": {
                    "type": "integer",
                    "format": "int32"
                },
                "message": {
                    "type": "string"
                }
            }
        },
        "order": {
            "required": [
                "id",
                "name"
            ],
            "properties": {
                "id": {
                    "type": "integer",
                    "format": "int64"
                },
                "name": {
                    "type": "string"
                }
            }
        }
    }
}

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:1
  • Comments:18 (6 by maintainers)

github_iconTop GitHub Comments

7reactions
vdweescommented, Jan 11, 2021

I am using Swagger UI to document a service, and one of the endpoints returns embeddable content. Swagger UI renders the code as HTML, as described above. However, I found it useful to extend Swagger UI with a button to toggle rendering the html inline, so that it is easy to visualize and interact with the response from the server.

Screenshots are below. Notice the Show/Hide preview button in the bottom left corner. Its a small change that adds a really valuable feature without breaking any existing behaviour (https://github.com/vdwees/swagger-ui/commit/1344e49ca471c5eb4b546c7353a1efcff4456c2d)

Would a formal PR be welcome?

image

image

1reaction
nicksellencommented, Nov 16, 2015

We are using swagger for internal developers to use when writing an SPA frontend, django will return some errors in HTML and it is helpful for the developers to see them properly rendered [1].

I patched swagger-ui.js [2] to enable this, it puts the HTML content into an iframe using the srcdoc atttribute, this resolves the stylesheet issue you mentioned, and possibly the security issues too, but it is not supported in ie.

Perhaps this makes the usecase clearer 😃

[1] rendered django error

swagger-ui-html-iframe

[2] swagger-ui patch

--- swagger-ui.js   2015-09-19 20:58:10.000000000 +0200
+++ swagger-ui.js   2015-11-16 13:45:26.958266568 +0100
@@ -31855,9 +31855,10 @@

     // HTML
     } else if (contentType === 'text/html') {
-      code = $('<code />').html(_.escape(content));
-      pre = $('<pre class="xml" />').append(code);
-
+      var iframe = document.createElement('iframe');
+      iframe.srcdoc = content;
+      iframe.style = 'width: 100%; height: 500px;';
+      pre = iframe;
     // Plain Text
     } else if (/text\/plain/.test(contentType)) {
       code = $('<code />').text(content);

Read more comments on GitHub >

github_iconTop Results From Across the Web

Swagger UI shows raw html in Response Body frame
I use swagger with Lavarel. When the response is html, the raw html just showed in the response body frame, but not the...
Read more >
swagger ui showing raw html code in express nodejs
This happens, because your express is configured to always respond with a content-type application / json. Place the Swagger configuration, ...
Read more >
Describing Responses - Swagger
A response is defined by its HTTP status code and the data returned in the response body and/or headers. Here is a minimal...
Read more >
Web on Servlet Stack - Spring
For access to the raw response body, as exposed by the Servlet API. java.util.Map , org.springframework.ui.Model , org.springframework.ui.ModelMap.
Read more >
Request Body - FastAPI
A response body is the data your API sends to the client. ... As it is discouraged, the interactive docs with Swagger UI...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found