Storybook: Register addons shouldn't try to add click listeners to iframe elements

[StJohn3D]

Describe the bug
Story book is trying to add click listeners to all elements inside a panel addon. This throws console warnings when the element is an iframe

backend.js:6 Adding a click listener to iframe failed: DOMException: Blocked a frame with origin "http://localhost:9009" from accessing a cross-origin frame.

To Reproduce
Steps to reproduce the behavior:

1. I followed the most basic writing addon instructions found here, to create a panel addon.
2. All I want the addon to do is render an iFrame - doesn't matter what url src it has.
3. Open the dev tools
4. See error

Expected behavior
No console warnings

Code snippets
register.js

import React from 'react';
import { STORY_RENDERED } from '@storybook/core-events'
import { addons, types } from '@storybook/addons'
import { useParameter } from '@storybook/api'
import { AddonPanel } from '@storybook/components'

const ADDON_ID = 'styleguide';
const PARAM_KEY = 'styleguide';
const PANEL_ID = `${ADDON_ID}/panel`;

const MyPanel = () => {
  const data = useParameter(PARAM_KEY, null);
  if (!data) return null // TODO use data.page or data.url in iframe src
  return <iframe
      src="https://storybook.js.org/docs/addons/writing-addons/"
      width="100%"
      height="100%"
    />
}

addons.register(ADDON_ID, api => {
  const render = ({ active, key }) => (
    <AddonPanel active={active} key={key} >
      <MyPanel />
    </AddonPanel>
  )
  const title = 'Style Guide';

  addons.add(PANEL_ID, {
    type: types.PANEL,
    title,
    render,
    paramKey: PARAM_KEY,
  })
})

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-7820HK CPU @ 2.90GHz
Binaries:
Node: 12.10.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.387.0

Additional context
The code example is what I'm using all except the url which I can't share here. But the url in the code above produces the same unwanted behavior.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[eashwar]

Hi there!

Myself and @christopherhafke are interested in working on this bug. We're first-time contributors! Can we try it?

[shilman]

@eashwar of course! contributions always welcome!

[ndelangen]

@eashwa @christopherhafke I'd be happy to assist you, reach out to me on the Storybook discord or plan a meeting here:
https://calendly.com/ndelangen/storybook

[christopherhafke]

@StJohn3D What version were you encountering this problem on? We're not able to reproduce it on the current release.

[StJohn3D]

@christopherhafke that's good to hear! I know I'm a release or two behind. I forget what stopped me from upgrading. I just remember trying to upgrade, things breaking, so I left it alone to do later and then never got back to it. I'll close this issue and reopen if I'm able to reproduce after upgrading.

[StJohn3D]

I have upgraded storybook to latest 5.3.18 and am still seeing this issue.

[StJohn3D]

Hi @christopherhafke,
First, thank you for taking a look at this issue.
When you attempted to reproduce the issue, did you register the addon from the code snippet, then create a story and open the addons panel to see the custom addon? The consol warnings won't appear until you bring up the addons panel and view the custom addon. If you already tried all of those things I'll try to put together a public repo that reproduces the issue.

[ndelangen]

I think we changed all the offending addons in the monorepo (core addons), in 6.0.0 beta. Would you mind testing this for us?

[StJohn3D]

@ndelangen Looks like something has changed from 5 -> 6. I switched all of my @storybook/ dependencies to use next but am having issues with npm start now. First problem was @storybook/addon-notes which it's last few releases only contain the package.json file. I had to roll it back to "@storybook/addon-notes": "6.0.0-alpha.2", in order to get a successful install with register-panel.js included.
Now I'm looking at this error: Module parse failed: Unexpected character '@' (1:0)
After looking into it the issue might be that I'm still using the three deprecated files so when I have time I'll try to correct that to see if I can get storybook to build again. It might be a couple more days before I'm able to test this.

[ndelangen]

addon-notes has been deprecated:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-info-addon-notes

The info/notes addons have been replaced by addon-docs. We've documented a migration in the docs recipes.

[gallogit]

Describe el error El linberar
libro de historias está tratando de agregar oyentes de clics a todos los elementos dentro de un complemento de panel. Esto arroja advertencias de consola cuando el elemento es un iframe

backend.js:6 Adding a click listener to iframe failed: DOMException: Blocked a frame with origin "http://localhost:9009" from accessing a cross-origin frame.

Para reproducir
Pasos para reproducir el comportamiento:

1. Seguí las instrucciones de complemento de escritura más básicas que se encuentran aquí , para crear un complemento de panel.
2. Todo lo que quiero que haga el complemento es renderizar un iFrame, no importa qué URL src tenga.
3. Abra las herramientas de desarrollo
4. Ver error

Comportamiento esperado
Sin advertencias de consola

Fragmentos de código
register.js

importar  React  de  'reaccionar' ; 
importar  {  STORY_RENDERED  }  desde  '@ storybook / core-events' 
importar  {  addons ,  types  }  desde  '@ storybook / addons' 
importar  {  useParameter  }  desde  '@ storybook / api' 
importar  {  AddonPanel  }  desde  '@ storybook / components'

const ADDON_ID = 'styleguide';
const PARAM_KEY = 'styleguide';
const PANEL_ID = `${ADDON_ID}/panel`;

const MyPanel = () => {
  const data = useParameter(PARAM_KEY, null);
  if (!data) return null // TODO use data.page or data.url in iframe src
  return <iframe
      src="https://storybook.js.org/docs/addons/writing-addons/"
      width="100%"
      height="100%"
    />
}

addons.register(ADDON_ID, api => {
  const render = ({ active, key }) => (
    <AddonPanel active={active} key={key} >
      <MyPanel />
    </AddonPanel>
  )
  const title = 'Style Guide';

  addons.add(PANEL_ID, {
    type: types.PANEL,
    title,
    render,
    paramKey: PARAM_KEY,
  })
})

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-7820HK CPU @ 2.90GHz
Binaries:
Node: 12.10.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.387.0

Additional context
The code example is what I'm using all except the url which I can't share here. But the url in the code above produces the same unwanted behavior.

[gallogit]

Liberar un Moto e5 cuiser americano