src/content/docs/linter/rules/no-blank-target.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/security/noBlankTarget`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has a [**safe**](/linter/#safe-fixes) fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Inspired from [`react/jsx-no-target-blank`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md){
"linter": {
"rules": {
"security": {
"noBlankTarget": "error"
}
}
}
}
Disallow target="_blank" attribute without rel="noopener".
When creating an anchor a element, there are times when its link has
to be opened in a new browser tab via the target="_blank" attribute.
This attribute has to be paired with rel="noopener" or you may run
into security issues.
See to the noopener documentation.
<a href='http://external.link' target='_blank'>child</a>
<a href='http://external.link' target='_blank' rel='nofollow'>child</a>
<a {...props} href='http://external.link' target='_blank' rel='nofollow'>child</a>
<a href='http://external.link' rel='noopener' target='_blank'>child</a>
<a href='http://external.link' rel='noreferrer' target='_blank'>child</a>
// The rule accepts elements with spread props, because the required
// attribute may be injected dynamically:
<a href='http://external.link' target='_blank' {...props}>child</a>
allowNoReferrerBy default, noBlankTarget accepts both rel="noopener" and
rel="noreferrer" with links that have target="_blank". This is
because the latter implies the former, so either one is sufficient to
mitigate the security risk.
However, allowing rel="noreferrer" may still be undesirable, because
it can break tracking, which may be an undesirable side-effect. As such,
you can set allowNoReferrer: false to only accept rel="noopener".
See to the noreferrer documentation.
{
"linter": {
"rules": {
"security": {
"noBlankTarget": {
"options": {
"allowNoReferrer": false
}
}
}
}
}
}
<a href='http://external.link' rel='noreferrer' target='_blank'>child</a>
Default: true
allowDomainsThe option allowDomains allows specific domains to use
target="_blank" without rel="noopener". In the following
configuration, it's allowed to use the domains https://example.com and
example.org:
{
"linter": {
"rules": {
"security": {
"noBlankTarget": {
"options": {
"allowDomains": [
"https://example.com",
"example.org"
]
}
}
}
}
}
}
<>
<a target='_blank' testme href='https://example.com'></a>
<a target='_blank' href='example.org'></a>
</>
The diagnostic is applied to all domains not in the allow list:
{
"linter": {
"rules": {
"security": {
"noBlankTarget": {
"options": {
"allowDomains": [
"https://example.com"
]
}
}
}
}
}
}
<>
<a target='_blank' testme href='https://example.com'></a>
<a target='_blank' href='example.org'></a>
</>
Biome doesn't check if the list contains valid URLs.