JS.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 (https://mathiasbynens.github.io/rel-noopener/)).

{'vue/no-template-target-blank': ['error']}

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

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

Options

Copy
{
  "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)

{'vue/no-template-target-blank': ['error', { allowReferrer: false }]}

Copy
<template>
  <!--  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>
</template>

{ allowReferrer: true }

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

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

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

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

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

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

  <!-- BAD -->
  <a :href="link" target="_blank">link</a>
</template>

{ "enforceDynamicLinks": "never" }

{'vue/no-template-target-blank': ['error', { enforceDynamicLinks: 'never' }]}

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

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

The content on this page is adapted from the ESLint User Guide. Copyright © OpenJS Foundation and other contributors, www.openjsf.org. All rights reserved. https://eslint.org/docs/rules/