Swagger UIのVALIDバッジを非表示にする方法

ZOZO Advent Calendar 2021 12日目の記事です。
Swagger UIを利用する際、右下に以下のようなバッジが表示されます。

f:id:jon20:20211212015837p:plain

VAILIDで表示されている場合は良いですが、外部のアクセスを遮断した状態でSwagger UIをホスティングする際はErrorが常に表示され続けます。Errorが表示されても特に支障はないのですがSwagger UIを見る人に誤解を招くので削除したいです。 小さいTipsになりますが、右下のVAILIDバッジを非表示にする方法を紹介します。

消し方

validatorUrlの設定を変更すると削除できます。 Swagger UIで変更可能な設定は以下にまとまっています。

swagger.io

validatorUrlはデフォルトだとswagger.ioのonline validatorに対してvalidationを行います。なので外部のアクセスを遮断した場合はswagger.ioのonline validatorにアクセスができないので常にErrorが表示されます。

具体的な設定方法は下記になります。

index.html

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
    <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }

      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }
    </style>
  </head>

  <body>
    <div id="swagger-ui"></div>

    <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
    <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
    <script>
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        configUrl: "swagger-config.yaml",
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      });
      // End Swagger UI call region

      window.ui = ui;
    };
  </script>
  </body>
</html>

swagger-config.yaml

url: "swagger.yaml"
dom_id: "#swagger-ui"
validatorUrl: ""

Swagger UIのconfigファイルはconfigUrlを利用し外出しで管理可能なのでswagger-config.yamlに記載しています。 ドキュメントではバッジを無効にする場合は下記のように設定すると説明されています。

none, 127.0.0.1 or localhost will disable validation.

しかし、この方法では非表示にすることはできなかったのでvalidatorUrl: ""で設定すると良いです。 設定した結果が以下になります。バッジが非表示になっていることわかります。

f:id:jon20:20211212030558p:plain

まとめ

小さいTipsになりますがVALIDバッジを非表示にすることができました。OpenAPIのvalidationに関してはswagger-cliを利用しvalidationも可能なのでUI上で表示する旨みは特にないのかなと思いました。VALIDバッジを非表示にしたい場合は是非参考にしていただければと思います。