Openapi documentation generator crushed by window.postMessage

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Context

OpenApi preview is rendered in an iframe. The code inside of this iframe listens for a message posted from the parent page and takes a message's data as a spec to render.

The users reported us an issue about crushes of a preview. The investigation shown the cause: some browser extensions post messages on the iframe's window with their own data, and preview code does not validate received data and tries to render it.

To reproduce the issue

1. Install one of the browser extensions using messages. For example https://chromewebstore.google.com/detail/semrush-ai-writer-and-edi/dfajcklndiadlfmiabpohgpbcohchhop. No need to register or do anything else with it.

2. Visit a page with swagger documentation. For example, the one from gitlab's repository.

3. The preview shows error:

   

Proposed

We'd like to propose more strict validation of incoming data inside preview iframe.

1. On the sending side use unique key

     sandboxEl.addEventListener('load', () => {
   -    if (spec) sandboxEl.contentWindow.postMessage(JSON.stringify(spec), '*');
   +    if (spec) sandboxEl.contentWindow.postMessage({ openapiSpecString: JSON.stringify(spec) }, '*');
     });

2. On the listening side check the presence of the unique key in the data.

   const addInitHook = () => {
     window.addEventListener(
       'message',
       (event) => {
         if (event.origin !== window.location.origin) {
           return;
         }
   -     renderSwaggerUI(event.data);
   +     if (isObject(event.data)) {
   +       const { openapiSpecString } = event.data;
   +
   +       if (typeof openapiSpecString === 'string') {
   +         renderSwaggerUI(openapiSpecString);
   +       }
   +     }
       },
       false,
     );
   };