cannot load URL (HTML page) using task module for microsoft teams app (node js)

Question

I am trying to show a popup message to user using the task module. I have sent a attachment with type invoke. Here is the code

content.sendActivity(MessageFactory.attachment(CardFactory.heroCard('Task Module Invocation from Hero Card',
    'This is a hero card with a Task Module Action button',
    null, // No images
    [{ type: 'invoke', title: 'Task Module', value: { type: 'task/fetch' } }])));

When I click on the Button I have received a request to my messaging end point and the response I have sent is

reply({
            task: {
                type: 'continue',
                value: {
                    "title": "Task module title",
                    "height": 'large',
                    "width": 'large',
                    "url": "https://67aa9b57.ngrok.io/api/internal/teams/tabs/content",
                    "fallbackUrl": "https://67aa9b57.ngrok.io/api/internal/teams/tabs/content"
                }
            }
        });

But in the popup message is blank. My ngrok url is not even being hit for the HTML page. This is what I see in popup. But the title was updated. I have no idea why it is not working.

Ant help would be thankful

Answer 1

This is pretty much always caused by the domain of the page not being listed in the valid domains for the application (you set this in your manifest json file, inside App Studio if you're using it). Because you've not listed this as a valid and "safe" domain, Teams won't even make any call at all, that's why there's nothing visible in the NGrok log even.

Just to be clear, we're talking about this section of the schema.