This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
get_swagger_ui_html does not pass X-API-Key to openapi_url for authorized access #2678
Comments
|
Relevant SO item at
If I've read those correctly, the proposed solution is a // The spec URL
const url = "https://www.example.com/authorised-users-only/spec.json";
SwaggerUI({
url, // spec url
requestInterceptor: (req) => {
// Only set Authorization header if the request matches the spec URL
if (req.url === url) {
req.headers.Authorization = "Basic " + btoa("myUser" + ":" + "myPassword");
}
return req;
}
})For my question, the header details would be an For comparison, the <body>
<div id="swagger-ui">
</div>
<script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
<!-- `SwaggerUIBundle` is now available on the page -->
<script>
const ui = SwaggerUIBundle({
url: '/openapi.json',
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],
layout: "BaseLayout",
deepLinking: true,
showExtensions: true,
showCommonExtensions: true
})
</script>
</body> |
|
Using a copy-paste and hack-it, the following custom function adds support for a request interceptor that adds an X-API-Key header in order to get the The key addition is the if api_key:
req = ' requestInterceptor: (req) => { if (req.url.endsWith("openapi.json")) { req.headers["X-API-Key"] = "%s"; }; return req; },' % api_key
html += reqThe full function: import json
from typing import Any
from typing import Dict
from typing import Optional
from fastapi.encoders import jsonable_encoder
from starlette.responses import HTMLResponse
def custom_swagger_ui_html(
*,
openapi_url: str,
title: str,
swagger_js_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui-bundle.js",
swagger_css_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui.css",
swagger_favicon_url: str = "https://fastapi.tiangolo.com/img/favicon.png",
oauth2_redirect_url: Optional[str] = None,
init_oauth: Optional[Dict[str, Any]] = None,
api_key: Optional[str] = None,
) -> HTMLResponse:
# Adapted from fastapi.openapi.docs.get_swagger_ui_html
# Related to https://github.com/tiangolo/fastapi/issues/2678
# Related to https://github.com/swagger-api/swagger-ui/issues/2793
html = f"""
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="{swagger_css_url}">
<link rel="shortcut icon" href="{swagger_favicon_url}">
<title>{title}</title>
</head>
<body>
<div id="swagger-ui">
</div>
<script src="{swagger_js_url}"></script>
<!-- `SwaggerUIBundle` is now available on the page -->
<script>
const ui = SwaggerUIBundle({{
url: '{openapi_url}',
"""
if api_key:
req = ' requestInterceptor: (req) => { if (req.url.endsWith("openapi.json")) { req.headers["X-API-Key"] = "%s"; }; return req; },' % api_key
html += req
if oauth2_redirect_url:
html += f"oauth2RedirectUrl: window.location.origin + '{oauth2_redirect_url}',"
html += """
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],
layout: "BaseLayout",
deepLinking: true,
showExtensions: true,
showCommonExtensions: true
})"""
if init_oauth:
html += f"""
ui.initOAuth({json.dumps(jsonable_encoder(init_oauth))})
"""
html += """
</script>
</body>
</html>
"""
return HTMLResponse(html)The resulting HTML contains const ui = SwaggerUIBundle({
url: '/openapi.json',
requestInterceptor: (req) => { if (req.url.endsWith("openapi.json")) { req.headers["X-API-Key"] = "xxx-api_key-xxx"; }; return req; },
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],
layout: "BaseLayout",
deepLinking: true,
showExtensions: true,
showCommonExtensions: true
})It seems to work, so that the openapi.json doc is protected, e.g. @app.get("/openapi.json", include_in_schema=False, tags=["documentation"])
async def get_open_api_endpoint(api_key: str = Depends(get_api_key)):
response = JSONResponse(app.openapi())
return responseThe swagger-ui exposes any API Keys in the browser in the curl command after using the swagger authorize UI, so any concerns about exposing the API key may just belong with the end user. Perhaps the requestInterceptor could also check that the endpoint is an HTTPS connection before adding the API key (maybe it makes localhost dev/test cycles more tedious or difficult while better protecting the API key in the wild). |
|
The additional tweaks for this to work with AWS API-Gateway require adding an API-Gateway server to the openapi.json doc, e.g. assume that def get_aws_uri(request: Request) -> Optional[str]:
# https://mangum.io/adapter/#retrieving-the-aws-event-and-context
# https://github.com/awsdocs/aws-lambda-developer-guide/blob/master/sample-apps/nodejs-apig/event.json
aws_event = request.scope.get("aws.event", {})
context = aws_event.get("requestContext", {})
domain_name = context.get("domainName")
domain_stage = context.get("stage")
if domain_name and domain_stage:
url = f"https://{domain_name}/{domain_stage}"
return urlparse(url).geturl()
# now within factory method that creates FastAPI app:
def custom_openapi(request: Request):
if app.openapi_schema:
return app.openapi_schema
openapi_schema = app.openapi()
aws_uri = get_aws_uri(request)
if aws_uri:
# AWS API-Gateway is deployed to a baseURL path for a stage
openapi_schema["servers"] = [{"url": aws_uri}]
app.openapi_schema = openapi_schema
return app.openapi_schema
@app.get("/openapi.json", include_in_schema=False, tags=["documentation"])
async def get_open_api_endpoint(
request: Request, api_key: str = Depends(get_api_key)
):
response = JSONResponse(custom_openapi(request))
return response
@app.get("/docs", include_in_schema=False, tags=["documentation"])
async def get_documentation(request: Request, api_key: str = Depends(get_api_key)):
aws_uri = get_aws_uri(request)
if aws_uri:
openapi_uri = f"{aws_uri}/openapi.json"
else:
openapi_uri = "/openapi.json"
response = custom_swagger_ui_html(
openapi_url=openapi_uri, title="docs", api_key=api_key
)
return responseMaybe all that could be avoided if the |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
First check
get_swagger_ui_htmlExample
See https://medium.com/data-rebels/fastapi-authentication-revisited-enabling-api-key-authentication-122dc5975680 but the use of cookies to hold an API Key circumvents the behavior of the swagger-UI so that all the authorized endpoints are working without using the swagger authenticate entry. If the cookie is not set (as below) and the api-key auth only allows an X-API-Key header, then the swagger-UI fails to get the openapi.json document; an error appears like "Failed to load API definition. Fetch Error. Unauthorized /openapi.json".
It seems like there should be a way to call
get_swagger_ui_htmlso that any swagger JS can use an X-API-Key to authenticate when it tries to fetch the /openapi.json document. Or, is there a way to define/docsso that the swagger-ui is provided theapp.openapi()content without needing to call a/openapi.jsonendpoint that is protected by an X-API-Key? (Additional context - a deployment uses an AWS API-Gateway with X-API-Key auth enabled on the API-Gateway with a use policy attached to the API keys - the API-Gateway seems to be tricky to configure to allow unrestricted access to/openapi.jsonwhen everything else requires an API key or some other auth, even if the fastapi itself might allow unrestricted access to/openapi.json.). Is it considered safe/secure to allow unrestricted access to/openapi.json?See the medium post link above but, below, the cookie for an api key is disabled.
# assume that get_api_key() checks X-API-Key header and returns key (str) when valid # see medium post linked above for example @app.get("/openapi.json", include_in_schema=False, tags=["documentation"]) async def get_open_api_endpoint(api_key: str = Depends(get_api_key)): # note how this endpoint requires authentication with an X-API-Key response = JSONResponse(app.openapi()) return response @app.get("/docs", include_in_schema=False, tags=["documentation"]) async def get_documentation(api_key: str = Depends(get_api_key)): response = get_swagger_ui_html(openapi_url="/openapi.json", title="docs") # Note that when cookie is set, it works, but it also circumvents the swagger auth, # but when the cookie is not set, the swagger-ui cannot get the openapi.json doc; # how can `get_swagger_ui_html` pass an X-API-Key to the /openapi.json endpoint? # Can the `response` here be modified so this works with API keys? The following # addition to the response headers is _not_ the way to go for this, it exposes the API # in the response to /docs and the swagger-js does not pass it along anyways. response.headers["X-API-Key"] = api_key # While this cookie approach works, it circumvents the swagger-ui control over auth; # any 'Try it out' will use this cookie and work, without setting any swagger-ui auth. # response.set_cookie( # API_KEY_NAME, # value=api_key, # # domain=COOKIE_DOMAIN, # httponly=True, # max_age=1800, # expires=1800, # ) return responseDescription
/docs.Request
Would it be possible to use
The function signature does not yet include such an option, i.e.
The X-API-Key auth option is not covered by any
init_oauthoptions, is it? It should not require any OAuth flows.I'm not so familiar with swagger JS, is it possible to use it with an X-API-Key?
Are there fatal security flaws in attempting to use swagger JS in this way? e.g. it could embed the API key in the JS payload somewhere, basically exposing it in the HTML/JS response payload.
When
/docsreturns, it is possible to force it to open a modal dialog that would present the swagger-ui auth dialog that requires an API-key auth? (Assuming that the swagger JS can even get the/openapi.jsondoc)Environment
The text was updated successfully, but these errors were encountered: