Review HTML and JSX links that open new tabs, identify missing rel attributes, and add protective values. The skill also explains how these values prevent changes to the original tab and control referral information.
Use when reviewing HTML or JSX for anchor elements with target='_blank' to verify rel='noopener noreferrer' is present.
Run score Not tested
See how to installReviews the safety of links in HTML and JSX that open in new tabs. It finds links with target="_blank", checks for rel="noopener noreferrer" or at least noopener, and helps correct missing values. It also explains attacks in which the newly opened page redirects the original tab to a fake login screen, along with the role of the attributes that prevent this.
Use it before publishing pages that contain external links, or when reviewing link implementations in React. It helps explain why the attributes are added and supports considering an ESLint configuration to prevent the same omissions from recurring.
rel values.”noopener and noreferrer.”noopener prevents the opened page from accessing the original tab. noreferrer also suppresses referrer information sent to the destination. The material calls for setting these attributes explicitly, taking older browsers into account. Keep their separate roles in mind when making changes.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).
Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 23, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
A malicious site opened via target='_blank' can use window.opener.location to silently redirect your original tab to a phishing page — the user switches back and sees a fake login screen on what appears to be your domain.
rel="noopener noreferrer" to any <a target="_blank"> linknoopener prevents the new tab from accessing window.opener and redirecting your pagenoreferrer additionally suppresses the Referer header sent to the destination sitenoopener for cross-origin _blank links, but explicit markup is required for older browsers and same-origin linksjsx-a11y/anchor-is-valid and eslint-plugin-security can enforce this automaticallyFind all anchor elements with target='_blank' in the HTML and JSX source. Verify each one includes rel='noopener noreferrer' (or at minimum rel='noopener'). Flag any external links opening in a new tab that are missing this attribute.
Add rel='noopener noreferrer' to all <a target='_blank'> elements. In React/JSX this is rel="noopener noreferrer". Configure an ESLint rule to prevent this from recurring.
Explain the reverse tabnapping attack enabled by window.opener, how rel='noopener' and rel='noreferrer' prevent it, and the difference between the two values.
Review server config, headers, forms, and integration points related to External Link Security. Flag exact responses, cookies, or browser behaviors that violate the rule, and verify them against the effective production-like response.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/security/new-tab
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.
Review and add automated accessibility checks for components, pages, and continuous integration workflows. Use axe-based tools to detect structural and attribute issues, while identifying checks that still need keyboard or screen reader testing.
Review sign-in, registration, multi-factor authentication, and account recovery for accessibility barriers. Find blocked paste, difficult code entry, and inaccessible backup methods, then suggest authentication paths that support password managers, autofill, or device approval.
Review form errors, success messages, and live updates so screen reader users receive important notifications. Check the HTML delivered to the browser, announcement settings, display duration, and dismissal controls, then identify specific elements that need changes.
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.