blueswen / mkdocs-redoc-tag

A MkDocs plugin supports adding Redoc to the page.
https://blueswen.github.io/mkdocs-redoc-tag/
MIT License
1 stars 1 forks source link

Compatibility with offline plugin #2

Open GarlicHiker opened 9 months ago

GarlicHiker commented 9 months ago

Hi, I just tried to generate a fully static offline documentation website that would be working properly without any webserver. Unfortunately it seems that there is a similar bug to the one described in the issue I've opened for mkdocs-swagger-ui-tag plugin.

When using offline, I see just blank page and in the developer console in web browser, there is an error:

redoc-6bece43f.html:24 Uncaught DOMException: Failed to read a named property 'scheme' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.
    at window.onload (file:///<local path>/redoc-6bece43f.html:24:36)

which points to following section of generated .html file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Redoc</title>
  <link rel="stylesheet" type="text/css" id="slate-css" media="none" href="assets/stylesheets/redark.css" />
  <script src="assets/javascripts/redark.js" charset="UTF-8"> </script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body style="background: ;">
  <div id="redoc-container"></div>
  <script src="assets/javascripts/redoc.standalone.js" charset="UTF-8"> </script>
  <script>
    const openapi_spec_url = "assets/openapi/openapi.json";

    window.onload = function () {
      const parent_scheme = parent.scheme               <---------------- HERE the exception occurrs
      if (parent_scheme === "slate") {
        enable_dark_mode();
      } else {
        disable_dark_mode();
      }
    }

    enable_dark_mode = function(){
      document.getElementById("slate-css").media = ""
      Redoc.init(
        openapi_spec_url,
        { theme: redark },
        document.getElementById('redoc-container'),
      );
    }

    disable_dark_mode = function(){
      document.getElementById("slate-css").media = "none"
      Redoc.init(
        openapi_spec_url,
        {},
        document.getElementById('redoc-container'),
      );
    }
  </script>
</body>

</html>

I appreciate any help. I really like your plugin and this issue is the only thing stopping us to use it on our project.

blueswen commented 5 months ago

Sorry for the late reply. The MkDocs Redoc Tag is not compatible with the Material MkDocs built-in offline plugin due to a cross-origin security issue enforced by the browser by default.

If you really want to use this with the offline plugin, you can add the --allow-file-access-from-files configuration when opening Chrome. However, this may make your Chrome vulnerable. For more details, check https://chrome-allow-file-access-from-file.com/.