no-template-target-blank.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/no-template-target-blank	disallow target="_blank" attribute without rel="noopener noreferrer"

vue/no-template-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(see here for more details).

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

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

🔧 Options

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

• allowReferrer ... If true, does not require noreferrer.default false
• enforceDynamicLinks ("always" | "never") ... If always, enforces the rule if the href is a dynamic link. default always.

{ allowReferrer: false } (default)

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

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

{ allowReferrer: true }

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

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

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

<template>
  <!-- ✓ Good -->
  <a :link="link" target="_blank" rel="noopener noreferrer">link</a>

  <!-- ✗ BAD -->
  <a :link="link" target="_blank">link</a>
</temlate>

{ "enforceDynamicLinks": "never" }

<template>
  <!-- ✓ Good -->
  <a :link="link" target="_blank">link</a>

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

🔍 Implementation

• Rule source
• Test source