eslint-plugin-reblend
Version:
Reblend specific linting rules for ESLint
396 lines (364 loc) • 12.2 kB
JavaScript
/**
* @fileoverview Forbid target='_blank' attribute
* @author Kevin Miller
*/
'use strict';
const includes = require('array-includes');
const docsUrl = require('../util/docsUrl');
const linkComponentsUtil = require('../util/linkComponents');
const report = require('../util/report');
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
function findLastIndex(arr, condition) {
for (let i = arr.length - 1; i >= 0; i -= 1) {
if (condition(arr[i])) {
return i;
}
}
return -1;
}
function attributeValuePossiblyBlank(attribute) {
if (!attribute || !attribute.value) {
return false;
}
const value = attribute.value;
if (value.type === 'Literal') {
return (
typeof value.value === 'string' && value.value.toLowerCase() === '_blank'
);
}
if (value.type === 'JSXExpressionContainer') {
const expr = value.expression;
if (expr.type === 'Literal') {
return (
typeof expr.value === 'string' && expr.value.toLowerCase() === '_blank'
);
}
if (expr.type === 'ConditionalExpression') {
if (
expr.alternate.type === 'Literal' &&
expr.alternate.value &&
expr.alternate.value.toLowerCase() === '_blank'
) {
return true;
}
if (
expr.consequent.type === 'Literal' &&
expr.consequent.value &&
expr.consequent.value.toLowerCase() === '_blank'
) {
return true;
}
}
}
return false;
}
function hasExternalLink(
node,
linkAttributes,
warnOnSpreadAttributes,
spreadAttributeIndex
) {
const linkIndex = findLastIndex(
node.attributes,
attr => attr.name && includes(linkAttributes, attr.name.name)
);
const foundExternalLink =
linkIndex !== -1 &&
(attr =>
attr.value &&
attr.value.type === 'Literal' &&
/^(?:\w+:|\/\/)/.test(attr.value.value))(node.attributes[linkIndex]);
return (
foundExternalLink ||
(warnOnSpreadAttributes && linkIndex < spreadAttributeIndex)
);
}
function hasDynamicLink(node, linkAttributes) {
const dynamicLinkIndex = findLastIndex(
node.attributes,
attr =>
attr.name &&
includes(linkAttributes, attr.name.name) &&
attr.value &&
attr.value.type === 'JSXExpressionContainer'
);
if (dynamicLinkIndex !== -1) {
return true;
}
}
/**
* Get the string(s) from a value
* @param {ASTNode} value The AST node being checked.
* @param {ASTNode} targetValue The AST node being checked.
* @returns {String | String[] | null} The string value, or null if not a string.
*/
function getStringFromValue(value, targetValue) {
if (value) {
if (value.type === 'Literal') {
return value.value;
}
if (value.type === 'JSXExpressionContainer') {
if (value.expression.type === 'TemplateLiteral') {
return value.expression.quasis[0].value.cooked;
}
const expr = value.expression;
if (expr && expr.type === 'ConditionalExpression') {
const relValues = [expr.consequent.value, expr.alternate.value];
if (
targetValue.type === 'JSXExpressionContainer' &&
targetValue.expression &&
targetValue.expression.type === 'ConditionalExpression'
) {
const targetTestCond = targetValue.expression.test.name;
const relTestCond = value.expression.test.name;
if (targetTestCond === relTestCond) {
const targetBlankIndex = [
targetValue.expression.consequent.value,
targetValue.expression.alternate.value,
].indexOf('_blank');
return relValues[targetBlankIndex];
}
}
return relValues;
}
return expr.value;
}
}
return null;
}
function hasSecureRel(
node,
allowReferrer,
warnOnSpreadAttributes,
spreadAttributeIndex
) {
const relIndex = findLastIndex(
node.attributes,
attr => attr.type === 'JSXAttribute' && attr.name.name === 'rel'
);
const targetIndex = findLastIndex(
node.attributes,
attr => attr.type === 'JSXAttribute' && attr.name.name === 'target'
);
if (
relIndex === -1 ||
(warnOnSpreadAttributes && relIndex < spreadAttributeIndex)
) {
return false;
}
const relAttribute = node.attributes[relIndex];
const targetAttributeValue =
node.attributes[targetIndex] && node.attributes[targetIndex].value;
const value = getStringFromValue(relAttribute.value, targetAttributeValue);
return [].concat(value).every(item => {
const tags =
typeof item === 'string' ? item.toLowerCase().split(' ') : false;
const noreferrer = tags && tags.indexOf('noreferrer') >= 0;
if (noreferrer) {
return true;
}
const noopener = tags && tags.indexOf('noopener') >= 0;
return allowReferrer && noopener;
});
}
const messages = {
noTargetBlankWithoutNoreferrer:
'Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations',
noTargetBlankWithoutNoopener:
'Using target="_blank" without rel="noreferrer" or rel="noopener" (the former implies the latter and is preferred due to wider support) is a security risk: see https://mathiasbynens.github.io/rel-noopener/#recommendations',
};
/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
fixable: 'code',
docs: {
description:
'Disallow `target="_blank"` attribute without `rel="noreferrer"`',
category: 'Best Practices',
recommended: true,
url: docsUrl('jsx-no-target-blank'),
},
messages,
schema: [
{
type: 'object',
properties: {
allowReferrer: {
type: 'boolean',
},
enforceDynamicLinks: {
enum: ['always', 'never'],
},
warnOnSpreadAttributes: {
type: 'boolean',
},
links: {
type: 'boolean',
default: true,
},
forms: {
type: 'boolean',
default: false,
},
},
additionalProperties: false,
},
],
},
create(context) {
const configuration = Object.assign(
{
allowReferrer: false,
warnOnSpreadAttributes: false,
links: true,
forms: false,
},
context.options[0]
);
const allowReferrer = configuration.allowReferrer;
const warnOnSpreadAttributes = configuration.warnOnSpreadAttributes;
const enforceDynamicLinks = configuration.enforceDynamicLinks || 'always';
const linkComponents = linkComponentsUtil.getLinkComponents(context);
const formComponents = linkComponentsUtil.getFormComponents(context);
return {
JSXOpeningElement(node) {
const targetIndex = findLastIndex(
node.attributes,
attr => attr.name && attr.name.name === 'target'
);
const spreadAttributeIndex = findLastIndex(
node.attributes,
attr => attr.type === 'JSXSpreadAttribute'
);
if (linkComponents.has(node.name.name)) {
if (!attributeValuePossiblyBlank(node.attributes[targetIndex])) {
const hasSpread = spreadAttributeIndex >= 0;
if (warnOnSpreadAttributes && hasSpread) {
// continue to check below
} else if (
(hasSpread && targetIndex < spreadAttributeIndex) ||
!hasSpread ||
!warnOnSpreadAttributes
) {
return;
}
}
const linkAttributes = linkComponents.get(node.name.name);
const hasDangerousLink =
hasExternalLink(
node,
linkAttributes,
warnOnSpreadAttributes,
spreadAttributeIndex
) ||
(enforceDynamicLinks === 'always' &&
hasDynamicLink(node, linkAttributes));
if (
hasDangerousLink &&
!hasSecureRel(
node,
allowReferrer,
warnOnSpreadAttributes,
spreadAttributeIndex
)
) {
const messageId = allowReferrer
? 'noTargetBlankWithoutNoopener'
: 'noTargetBlankWithoutNoreferrer';
const relValue = allowReferrer ? 'noopener' : 'noreferrer';
report(context, messages[messageId], messageId, {
node,
fix(fixer) {
// eslint 5 uses `node.attributes`; eslint 6+ uses `node.parent.attributes`
const nodeWithAttrs = node.parent.attributes
? node.parent
: node;
// eslint 5 does not provide a `name` property on JSXSpreadElements
const relAttribute = nodeWithAttrs.attributes.find(
attr => attr.name && attr.name.name === 'rel'
);
if (
targetIndex < spreadAttributeIndex ||
(spreadAttributeIndex >= 0 && !relAttribute)
) {
return null;
}
if (!relAttribute) {
return fixer.insertTextAfter(
nodeWithAttrs.attributes.slice(-1)[0],
` rel="${relValue}"`
);
}
if (!relAttribute.value) {
return fixer.insertTextAfter(relAttribute, `="${relValue}"`);
}
if (relAttribute.value.type === 'Literal') {
const parts = relAttribute.value.value
.split('noreferrer')
.filter(Boolean);
return fixer.replaceText(
relAttribute.value,
`"${parts.concat('noreferrer').join(' ')}"`
);
}
if (relAttribute.value.type === 'JSXExpressionContainer') {
if (relAttribute.value.expression.type === 'Literal') {
if (
typeof relAttribute.value.expression.value === 'string'
) {
const parts = relAttribute.value.expression.value
.split('noreferrer')
.filter(Boolean);
return fixer.replaceText(
relAttribute.value.expression,
`"${parts.concat('noreferrer').join(' ')}"`
);
}
// for undefined, boolean, number, symbol, bigint, and null
return fixer.replaceText(
relAttribute.value,
'"noreferrer"'
);
}
}
return null;
},
});
}
}
if (formComponents.has(node.name.name)) {
if (!attributeValuePossiblyBlank(node.attributes[targetIndex])) {
const hasSpread = spreadAttributeIndex >= 0;
if (warnOnSpreadAttributes && hasSpread) {
// continue to check below
} else if (
(hasSpread && targetIndex < spreadAttributeIndex) ||
!hasSpread ||
!warnOnSpreadAttributes
) {
return;
}
}
if (!configuration.forms || hasSecureRel(node)) {
return;
}
const formAttributes = formComponents.get(node.name.name);
if (
hasExternalLink(node, formAttributes) ||
(enforceDynamicLinks === 'always' &&
hasDynamicLink(node, formAttributes))
) {
const messageId = allowReferrer
? 'noTargetBlankWithoutNoopener'
: 'noTargetBlankWithoutNoreferrer';
report(context, messages[messageId], messageId, {
node,
});
}
}
},
};
},
};