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
... Iftrue
, does not require noreferrer.defaultfalse
enforceDynamicLinks ("always" | "never")
... Ifalways
, enforces the rule if the href is a dynamic link. defaultalways
.
{ 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>