Add "noopener" to links

[jedgar1mx]

Motivation

Improve lighthouse best practice score.

Implementation

Add the "noopener" to <a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox</a> and <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a> within the control section.

[mourner]

Good idea! Would you like to submit a pull request for this?

[andrewharvey]

@mourner Is it possible to submit a PR? These come from the TileJSON from the Tileset API, the HTML is passed straight through as is to the AttributionControl.

[ryanhamley]

@andrewharvey @mourner There's an old closed ticket for this issue that explicitly says that they can't be changed on the client side. We'd have to generate these links in GL JS to allow this feature https://github.com/mapbox/mapbox-gl-js/issues/4591#issuecomment-350911996

[mourner]

Ah, right. We could either add rel=noopener to all links after every attribution update dynamically, or find out if we could change it in the maps API.

[SWRB]

Hi @mourner @ryanhamley I have a customer that would really appreciate this update if possible. They get a "ding" on their Google lighthouse scores because of this, and they do not see an update in v2.

Direct quote:

"I can see that in Mapbox GL 2.0, the rel="noopener nofollow" gets added to the logo and the "improve this map" links - I think that's new - but still missing from the Maxar/OSM/Mapbox copyright links."

[ryanhamley]

Hi @SWRB as mentioned in previous comments, these links aren't generated in the client. I've alerted our API team to this request though. If I get any updates from them, I'll provide them here.

[SWRB]

thanks @ryanhamley for the clarification, my guess is no update from our API team here?

[smnbbrv]

The following actually works...

const map = new Map({
    container: '...',
    style: '...',
    attributionControl: false,
});

class CustomAttributionControl extends AttributionControl {
    _updateAttributions(...args: any[]) {
        const res = (super._updateAttributions as any)(...args);

        Array.from(document.querySelectorAll('.maplibregl-ctrl-attrib a')).forEach(item => item.setAttribute('rel', 'nofollow noreferrer'));

        return res;
    }
}

const attributionControl = new CustomAttributionControl({
    compact: true,
});

Would be nice however to have access to this hook without overriding a private method.