286 lines
11 KiB
JavaScript
286 lines
11 KiB
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,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|