eslint-plugin-vue

# 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 (opens new window)).

<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>
Now loading...

# 🔧 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 href="http://example.com" target="_blank" rel="noopener noreferrer">link</a> <!-- ✗ BAD --> <a href="http://example.com" target="_blank" rel="noopener">link</a> </template>
Now loading...

# { allowReferrer: true }

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

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

# 🔍 Implementation

← vue/no-this-in-before-route-enter →