Answered

Problem with content blocked error/ warning when trying to run a web plugins example

  • 8 April 2020
  • 5 replies
  • 953 views

Dear Miro dev Community,

 

I’m trying to run the ‘Stickers and Shapes’ web plugin example code in my Sandbox running a ngrok server locally. Although the SDK loads and the plugin in being initialised, I’m getting the following error/ warning: [blocked] The page at about:blank was not allowed to display insecure content from http://11d1b29e.ngrok.io/<file path> (see screen grab below). I’m using Safari on a Mac.

 

I’d really appreciate if you could provide some advice. 

 

Many thanks!

 

icon

Best answer by Boris Borodyansky 10 April 2020, 07:44

View original

5 replies

Userlevel 4
Badge +1

Hey Melanie!

The first thing I would do is try https link for the ngrok, that’s possibly the issue.

 

Using Chrome In Windows.

I get the same problem when publishing code on github: https://github.com/perolo/miro-jirapaste

 

Same problem replicated with Edge: Refused to frame 'https://github.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

 

Using Firefox I get “Loading plugin | JIRAPasteSync | 3074457353344029668 | https://github.com/perolo/miro-jirapaste/blob/main/index.html” - seems OK, but later a timeout “Plugin initialization timeout | JIRAPasteSync | 3074457353344029668”

 

I get the same problem when setting to webplugin adress to miro example: https://github.com/miroapp/app-examples/blob/master/stickers-to-shapes/index.html

If I understand it correctly, to get this to work there are a few different options? Miro needs to:

  • Provide a “whitelisting” option for each webplugin source location?
  • Provide a “miro.com” proxy adress option for webplugin source location?
  • Enable miro to run as a self hosted service on any source location

Probably a bunch of other ways to solve this?

Userlevel 4
Badge

Hello Per,

 

It looks like the web-plugin url that you have provided to Miro is the github.com url of your index.html file. This won’t work because https://github.com/perolo/miro-jirapaste/blob/main/index.html is a Github page and Miro needs just a url that serves the raw index.html file.

You can use Github Pages to serve the code from your Github repo:
https://pages.github.com/

 

Then, the web-plugin url that you provide to Miro will be from github.io. It will look like:
http://username.github.io/repository

and it should work just fine.

 

Otherwise, you can also try hosting your web-plugin code in another service, like Netlify, Vercel or Heroku, to name a few.

 

I hope this helps.

 

Kind regards.

 

Daniela

Thanks for the help - this solved my problem!:grinning:

Reply