Fluentui: No Option For Anchor rel Property can be Security Issue

[alxHenry]

Bug Report

• __Package version(s)__: 5.60
• __Browser and OS versions__: Any

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: Yammer

Describe the issue:

The IContextualMenuItem interface allows for users to pass in an href and a target to create a menu item that is actually an anchor tag with the given href and target. This allows the user to enter href='http://whatever.com' and target='_blank' which exposes the consumer to a potential tabjacking attack.

I think there are two solutions:

a.) Adding a rel prop that would also set the rel property on the anchor would allow the user to resolve the issue, for example rel='nofollow noopener noreferrer' to go along with target='_blank'.

b.) If target === '_blank' then automatically add the rel property with value 'nofollow noopener noreferrer'.

Expected behavior:

Either automatically protect the consumer from tabjacking, or allow them to protect themselves.

[alxHenry]

@dzearing @joschect do you all have a preference on either approach?

[joschect]

I'd prefer b, I think in cases like this it's better to force good behavior. Alternatively you could do both A and B so if the consumer still wants to be dangerous then they can pass in their own rel to override.