no-target-blank.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/no-target-blank	disallow `target="_blank"` attribute without `rel="noopener noreferrer"`	v0.0.4

svelte/no-target-blank

disallow target="_blank" attribute without rel="noopener noreferrer"

📖 Rule Details

This rule disallows using target="_blank" attribute without rel="noopener noreferrer" to avoid a security vulnerability in legacy browsers where a page can trigger a navigation in the opener regardless of origin (see here for more details).

<script>
  /* eslint svelte/no-target-blank: "error" */
</script>

<!-- ✓ GOOD -->
<a href="http://example.com" target="_blank" rel="noopener noreferrer">link</a>

<!-- ✗ BAD -->
<a href="http://example.com" target="_blank">link</a>

🔧 Options

{
  "svelte/no-target-blank": [
    "error",
    {
      "allowReferrer": true,
      "enforceDynamicLinks": "always"
    }
  ]
}

• allowReferrer ... If true, allows the Referrer header to be sent by not requiring noreferrer to be present. default false
• enforceDynamicLinks ("always" | "never") ... If always, enforces the rule if the href is a dynamic link. default always

{ allowReferrer: false } (default)

<script>
  /* eslint svelte/no-target-blank: ['error', { allowReferrer: false }] */
</script>

<!-- ✓ GOOD -->
<a href="http://example.com" target="_blank" rel="noopener noreferrer">link</a>

<!-- ✗ BAD -->
<a href="http://example.com" target="_blank" rel="noopener">link</a>

{ allowReferrer: true }

<script>
  /* eslint svelte/no-target-blank: ['error', { allowReferrer: true }] */
</script>

<!-- ✓ GOOD -->
<a href="http://example.com" target="_blank" rel="noopener">link</a>

<!-- ✗ BAD -->
<a href="http://example.com" target="_blank">link</a>

{ "enforceDynamicLinks": "always" } (default)

<script>
  /* eslint svelte/no-target-blank: ['error', { enforceDynamicLinks: 'always' }] */
</script>

<!-- ✓ GOOD -->
<a href={link} target="_blank" rel="noopener noreferrer">link</a>

<!-- ✗ BAD -->
<a href={link} target="_blank">link</a>

{ "enforceDynamicLinks": "never" }

<script>
  /* eslint svelte/no-target-blank: ['error', { enforceDynamicLinks: 'never' }] */
</script>

<!-- ✓ GOOD -->
<a href={link} target="_blank">link</a>

<!-- ✗ BAD -->
<a href="http://example.com" target="_blank">link</a>

🚀 Version

This rule was introduced in eslint-plugin-svelte v0.0.4

🔍 Implementation

• Rule source
• Test source