Problem/Motivation
When you link to a page on another site using the target="_blank" attribute, it opens in a new window and early versions of Chrome, Edge, Safari, etc. would pass a JavaScript reference to your page with the window.opener property, which the destination site could e.g. redirect your page to a malicious URL.
The solution prior to Chrome 49, Edge 79, Safari 16.2, Firefox 52, etc. was to add rel="noopener" to any links that had target="_blank". Note, however, this is still a bug in Internet Explorer 11 as of February 2023.
The Social Media Links Block and Field module can output links with target="_blank", so it may be worth adding rel="noopener" in that case.
More information: Links to cross-origin destinations are unsafe on Google Lighthouse docs, rel=noopener on MDN , rel=noopener on Can I Use
Steps to reproduce
- Install Drupal Core with the minimal install profile
- Download and install the social_media_links-8.x-2.x-dev
- Enable the field_ui, social_media_links, and social_media_links_field submodules.
- Go to /admin/structure/types/add and add a content type named page.
- Click the "save and manage fields" button.
- Click the add field link and select Social Media Links Field from the "Add a new field" dropdown.
- Set the label to social_test and click the "save and continue" button
- Click save field settings on the following page.
- Select a few platforms from the Platforms list and then click the "save settings" button
- Click manage display, click the gear next to social_test, expand the link attributes details, and set default target to "Open in a new browser window or tab (_blank)"
- Note the Default rel dropdown list, does not have a "noopener" option
- Click update and then save
- Go to /node/add/page
- Enter title, body, and values for the social_test fields
- Click save
- Inspect the HTML for the social media links, notice that they have target="_blank" attributes but they do not have rel="noopener" attributes
Proposed resolution
Change the "Default rel" select list to a checkboxes element in both the FieldFormatter settings and the Social Media Links Block settings, so that you can select more than one. Add external, noopener, and noreferrer options to the "Default rel" control.
Note that the patches in comments #15 and #17 include the config schema definition adapted from
🐛
Missing config schema for block
RTBC
Remaining tasks
- and maintainer feedback
- Commit
User interface changes
the "Default rel" select list was changed to a checkboxes element in both the FieldFormatter settings and the Social Media Links Block settings
API changes
The "Default rel" option can contain more than one value; and the "" value no longer exists.
Data model changes
The "Default rel" option can have zero or more values instead of always having one.
Release notes snippet
Adds the "noopener", "external", and "noreferrer" options to the "Default rel" control for both the FieldFormatter settings and the Social Media Links Block settings
Original report by pietervanhove
Linking using target="_blank" poses a security vulnerability.
See documentation by Google for why you should use rel="noopener" in this case:
https://developers.google.com/web/tools/lighthouse/audits/noopener