Add-on XXX is not responding. Wait or cancel?

[Deleted user]

I developed a connect macro for confluence using Atlasssian Cloud Express. When I add the macro to the page I am getting message "Add-on XXX is not responding. Wait or cancel?" but the functionality is working fine. Any idea when this message will be shown?

Below is my atlassian-connect.json file:

{  

   "key":"",

   "name":"",

   "description":"",

   "vendor":{  

      "name”:"XXX",

      "url":"https://www.XXX.com"

   },

   "baseUrl":"{{localBaseUrl}}",

   "links":{  

      "self":"{{localBaseUrl}}/atlassian-connect.json",

      "homepage":"{{localBaseUrl}}/atlassian-connect.json"

   },

   "authentication":{  

      "type":"jwt"

   },

   "lifecycle":{

   "installed": "/installed"

   },

   "scopes":[  

      "NONE"

   ],

   "modules":{  

      "dynamicContentMacros":[  

         {  

            "key”:"XXX",

            "url":”/show?url={url}",

            "description":{  

               "value”:"show page "

            },

            "width":"700",

            "height":"500",

            "icon": {

                "width": 80,

                "height": 80,

                "url": "/favicon.png"

             },

            "categories":[  

               "media"

            ],

            "outputType":"block",

            "bodyType":"none",

            "name":{  

               "value”:”show-page"

            },

            "parameters":[  

               {  

                  "identifier":"url",

                  "name":{  

                     "value":"URL"

                  },

                  "type":"string",

                  "required":true,

                  "multiple":false,

                  "description": {

                      "value": “Full URL"

                  }

               }

            ]

         }

      ]

   }

Below is how I am rendering the my hbs:

res.render('page', {

              data: macro_parameters

  });

I neither see errors in browser console nor in server log.

Any pointers would be appreciated. Thanks in advance !!!

[Deleted user · Accepted solution]

Found a way to do this. Thanks !!!

Source: https://developer.atlassian.com/static/connect/docs/latest/concepts/javascript-api.html#all.js

<script id="connect-loader" data-options="sizeToParent:true;">

(function() {

  var getUrlParam = function (param) {

    var codedParam = (new RegExp(param + '=([^&]*)')).exec(window.location.search)[1];

    return decodeURIComponent(codedParam);

  };


  var baseUrl = getUrlParam('xdm_e') + getUrlParam('cp');

  var options = document.getElementById('connect-loader').getAttribute('data-options');


  var script = document.createElement("script");

  script.src = baseUrl + '/atlassian-connect/all.js';


  if(options) {

    script.setAttribute('data-options', options);

  }


  document.getElementsByTagName("head")[0].appendChild(script);

})();

</script>

[Jake Furler]

Hi Ravi,

Glad to hear you've found the issue 

Did you find that snippet from our documentation? You should be aware that the snippet is only intended to be used by add-ons that only provide client-side static content. As our docs say:

Loading all.js is necessary to use the AP object and access Connect APIs. This sample only applies to static add-ons. Add-ons with server components should validate JWT signatures on the server, and then generate the URL for all.js. Accepting <script> tag locations from untrusted query string sources could open your application up to XSS attacks.

You said you're using Atlassian Connect Express, which means your add-on will have server components. Therefore, for security reasons, you should not be including all.js in this way.

It should be very simple to include all.js using Atlassian Connect Express, though. Are you using a handlebars template for your iframe content? If so, you can just have {{!< layout}} at the top of your hbs file and all.js will be included for you. Alternatively, you can just have the line:

<script src="{{hostScriptUrl}}" type="text/javascript"></script>

if you only wish to include all.js and nothing else.

Hope this helps!

Jake

[Deleted user]

Thanks a lot for all the detailed explanation. The above suggested approach is simple and solved the problem too 

[Robert Massaioli _Atlassian_]

Have you included all.js from the parent product in the <head> section of your iframe? The spinner will only dissappear when the all.js file has finished loading and built the bridge between your iframe and the parent product.

[Deleted user]

Adding all.js is fixing the problem. Any idea on how to get the parent product details to load the same as our page will be loaded inside an iframe?