メニュー
Use when reviewing HTML or JSX for anchor elements with target='_blank' to verify rel='noopener noreferrer' is present.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/thedaviddias/Front-End-Checklist --skill new-tabコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation. Validate the final browser-facing markup, not just the source framework abstraction.
Use when auditing metadata, crawlability, structured data, or indexability related to Implement valid BreadcrumbList schema. Verify the rendered HTML and HTTP response rather than relying only on source files.
Use when reviewing templates, rendered HTML, or shared components related to Declare UTF-8 character encoding. Validate the final browser-facing markup, not just the source framework abstraction.
SOC 職業分類に基づく
SKILL.md を表示中
| name | new-tab |
| description | Use when reviewing HTML or JSX for anchor elements with target='_blank' to verify rel='noopener noreferrer' is present. |
| metadata | {"category":"security","priority":"medium","difficulty":"beginner","estimatedTime":"10","source":"frontendchecklist.io","url":"https://frontendchecklist.io/en/rules/security/new-tab"} |
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 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/en/rules/security/new-tab