How can I prevent the 'links to cross-origin destinations are unsafe' warning in Google Lighthouse when adding external links to my websites?
To prevent the "links to cross-origin destinations are unsafe" warning in Google Lighthouse when adding external links to your websites, you can follow these steps:
-
Use the
rel="noopener"attribute: Addrel="noopener"to all your external links. This attribute prevents the newly opened page from having access to the original page'swindowobject, which helps in preventing any potential security risks. -
Add
target="_blank"attribute: Includetarget="_blank"along withrel="noopener"in your external links. This ensures that the link opens in a new browser tab or window, providing a better user experience and making it clear that the link leads to an external site.```html
External Link
``` -
Use Webflow's built-in attributes: If you're using Webflow as your website builder, you can take advantage of its built-in link attributes. To add
rel="noopener"andtarget="_blank"automatically to all external links, follow these steps:
- Select the link element you want to modify.
-
In the right-hand sidebar, under the "Settings" tab, click on the "Open in new tab" checkbox. This will automatically add
target="_blank"to the link. -
To add
rel="noopener", click on the "Add Field" button in the "Link settings" section, and choose "Rel". Enter "noopener" as the value.
- Test your website: After implementing these changes, test your website again using Google Lighthouse to ensure that the warning is resolved. If the warning still persists, double-check the code implementation and make any necessary revisions.
Following these steps will help prevent the "links to cross-origin destinations are unsafe" warning in Google Lighthouse when you add external links to your websites.
Additional Questions:
- How can I improve my website's SEO using Webflow?
- What are the best practices for optimizing images in Webflow?
- How can I improve the loading speed of my Webflow website?
