Botframework-webchat: Embedded links in the same domain as the webchat should open in the same tab, instead of a new tab - related to #3087

[scch1002]

Feature Request

Is your feature request related to a problem? Please describe.
Embedded web links in messages that are for the same domain open in new tabs. It would be nice to be able to control whether an embedded link in the same domain opens in a new tab or in the same tab.

For example,

If the webchat is active in the web domain of 'test' and an embedded link is for a domain 'test1' then the link will be.

<a href='https://test1/...' target='_blank' />

else if the domain of the embedded link is for the same domain as the webchat then the link will be

<a href='https://test/...' target='_self' />

Describe the suggestion or request in detail
It would be nice to have a webchat style option to control whether a link within the same domain as the webchat opens in a new tab or the same tab.

https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js

Describe alternatives you have considered
The only other solutions to solve this problem is to implement a work around using DOM manipulation or to implement a custom webchat client from scratch.

Additional context

This is an issue with embedded links in messages not action buttons that appear on the bottom of cards. Though it would make sense that this feature would also affect the behavior of action buttons as well.

[EdwinOtten]

We added this feature in our custom version of WebChat V3 and very much support this feature request. Please also think about the OpenUrlAction in adaptivecards and herocards.. and consider allowing target="_parent" for those who run WebChat in an iframe 🤫

I'm not sure if this is already possible using cardActionMiddleware in V4 though.

[clearab]

@tdurnford Can you please take a look at this?

[scch1002]

@EdwinOtten that would work for the action buttons on cards but not embedded links.

[EdwinOtten]

@EdwinOtten that would work for the action buttons on cards but not embedded links.

Would it be possible to have some kind of markdownMiddleware that allows to customize how embedded links are rendered?

[tdurnford]

@scch1002 I think the Web Chat team would be open to adding an openInExistingWindow style option; however, we'd need to investigate if a style option is capable of covering all of the possible cases such as markdown, Adaptive Cards buttons and tap actions, and file download links.

In terms of markdown links, Web Chat implements a custom markdown renderer that sets the target to _blank. Developers can currently pass their own markdown renderer to Web Chat that does not set the target. Take a look at the code snippet and screen capture below for more details.

Web Chat v4

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.js"></script>
<script>
  (async function() {
    const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
    const { token } = await res.json();

    const markdownIt = window.markdownit();

    window.WebChat.renderWebChat(
      {
        directLine: window.WebChat.createDirectLine({ token }),
        renderMarkdown: text => markdownIt.render(text)
      },
      document.getElementById('webchat')
    );

    document.querySelector('#webchat > *').focus();
  })().catch(err => console.error(err));
</script>

Screen capture

Relevant Code

https://github.com/microsoft/BotFramework-WebChat/blob/17f406974253eac292637a33f87d6ce07092fb8d/packages/bundle/src/renderMarkdown.js#L61

[scch1002]

Ok, I will take a look at creating a custom markdown renderer.

I am also interested in the openInExistingWindow style option. :)

[cwhitten]

Hi @scch1002. openInExistingWindow style option seems totally reasonable. I'll work with the team to formalize this API. Realistically we'd be looking at a May '20 or August '20 release that introduces this behavior.

[cwhitten]

This is targeted to land in an upcoming release.

[compulim]

Implementation details

• Verify Web Chat should have only 2 ways to open links, Markdown and openUrl card action
• A function should be used to determine whether the URL is local or not
  
  
  
  • The function will be used across both Markdown (generate <a>) and card actions (Adaptive Cards, hero card, suggested actions, etc)
  
  
• The function should return structure similar to
  
  
  
  • { rel: 'noopener noreferrer', target: '_blank' }
  
  
  • This structure will be translated to window.open for card actions
  
  
• If a custom Markdown renderer is used, the function will be passed on render call
  
  
  
  • Devs of the custom renderer should aware of this feature
  
  
  • This allow Markdown renderer can render a "open in new tab" icon next to the link if needed
  
  

Thoughts

• Feature to disable links
  
  
  
  • Disable links to an untrusted domain
  
  
  • Disable absolute links
  
  
  • Disable links appear to be either a normal text (<span> instead of <a>) or disabled button, depends on its appearance
  
  
• Feature to replace links, e.g. with link checker link
• It may sound difficult, but can we have an async link checker?
  
  
  
  • Async link checker = check the link before allow the user to click on it
  
  
  • The link will turn from "disabled" into a "clickable" link/button, when check has completed
  
  
  • Devs should not be asked to write a renderer, they should only write a headless async function (no UI)
  
  
• Feature to allow a different way to open links
  
  
  
  • Passing a custom function, very similar to window.open
  
  
  • Supporting non-browser environment, such as React Native
  
  
  • It should selectively affect <a> generated by Markdown, because <a> is not 100% replaceable by window.open (middle-click is not emulat-able)
  
  
  • Can this function be combined with "async link checker"?
  
  

[RaviMadddulajfs]

We are using the following HTML markup tag in an answer with and without follow-up adaptive cards:

• BEFORE A HEARING

When used without a follow-up adaptative card the page in being rendered exactly as we coded it. That is the html element is rendered as BEFORE A HEARING.

However, if there are follow-up adaptive cards this html element gets altered to: BEFORE A HEARING

As you can see that the class ="ac-anchor" target="_blank" attributes have been added by the botframework .

We are requesting that whatever we enter in QnAMaker not be altered in any way and should be kept in tack as is. This is causing issues with our application as we are not able to utilized the function: onClick: navigateToPage to navigate to the utilizing the following WebChat function as it is be pre-empted from reaching this code:

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({ token }), store, styleOptions, renderMarkdown: markdownIt.render.bind(markdownIt)
    }, wc);

[corinagum]

Related to #3087