Anchor External Link Navigation

[uditadhikari117]

Hi folks,
I was reading the Twilio Paste doc about external links in Anchor : https://paste.twilio.design/components/anchor#external-anchor
The documentation mentions the following :

If an external URL is used for the href, the target and rel will automatically be updated to:
target=”_blank” rel=”noreferrer noopener”
This is done for security purposes. Even though the target and rel are set by default for external anchors, they can be overridden using the target and rel props.

If someone was to put in a console.twilio.com or a subdomain of *.twilio.com full url in the href property of Anchor, would that be treated as an external link as well and would that attach noreferrer and noopener values to the rel property?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Extra Documentation for Anchors (updated: 04/21/2021, similarity score: 84%)
• Are internal links that open in a new tab considered external anchors? - Answer (updated: 08/17/2022, similarity score: 84%)
• Are internal links that open in a new tab considered external anchors? (updated: 08/17/2022, similarity score: 83%)

[dosubot[bot]]

Hey @uditadhikari117! I'm here to help you with any bugs, questions, or contributions. Let's tackle this together!

The Paste design system uses a regular expression to determine if a URL is external. This regex checks if the URL starts with "http" or "https" ^[1]. There is no specific logic or configuration mentioned in the available information that identifies Twilio domains or subdomains as internal links. Therefore, URLs like console.twilio.com or any subdomain of *.twilio.com would be treated as external links by default, and the target and rel attributes would be set to "_blank" and "noreferrer noopener", respectively. However, you can override these attributes using the target and rel props if needed ^[2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[krisantrobus]

Hey @uditadhikari117, dosubot summarized this pretty well. We do use regex to check if the url starts with https and we use this to determine whether to treat is as an external link. We do no checks to see what the current domain is where paste is being implemented.

Does this cause issues for you? If so could you elaborate on your use case and we can discuss internally if there are changes required.

[uditadhikari117]

Ok thank you bot :) and @krisantrobus. I do think this is a good summary. I think I have a follow on request. Because of what is mentioned here in Twilio Paste Anchor docs :
"They unfortunately all work slightly differently, have different APIs, and many versions that an application might have installed. We want Paste to be used in as many different applications as possible and as such, we have chosen to not support any one router."

Web platform built a wrapper component called ConnectedAnchor that at the end returns Twilio Paste Anchor but uses react router to navigate.
Here is the Web Platform ConnectedAnchor component.
Here is the useAnchorClickHandler hook it uses.
Does behavior of ConnectedAnchor for handling external link match with that of Anchor or is there something that we should consider adding?

[krisantrobus]

Hey Udit, I took a look through those implementations and the logic does match with ours to determine external links. One note, it looks like you're already doing it but be sure to keep the href on the Anchor to keep the component accessible

[uditadhikari117]

Yep the href property is left as is.