[d565449] | 1 | /**
|
---|
| 2 | * @fileoverview Forbid target='_blank' attribute
|
---|
| 3 | * @author Kevin Miller
|
---|
| 4 | */
|
---|
| 5 |
|
---|
| 6 | 'use strict';
|
---|
| 7 |
|
---|
| 8 | const includes = require('array-includes');
|
---|
| 9 | const docsUrl = require('../util/docsUrl');
|
---|
| 10 | const linkComponentsUtil = require('../util/linkComponents');
|
---|
| 11 | const report = require('../util/report');
|
---|
| 12 |
|
---|
| 13 | // ------------------------------------------------------------------------------
|
---|
| 14 | // Rule Definition
|
---|
| 15 | // ------------------------------------------------------------------------------
|
---|
| 16 |
|
---|
| 17 | function findLastIndex(arr, condition) {
|
---|
| 18 | for (let i = arr.length - 1; i >= 0; i -= 1) {
|
---|
| 19 | if (condition(arr[i])) {
|
---|
| 20 | return i;
|
---|
| 21 | }
|
---|
| 22 | }
|
---|
| 23 |
|
---|
| 24 | return -1;
|
---|
| 25 | }
|
---|
| 26 |
|
---|
| 27 | function attributeValuePossiblyBlank(attribute) {
|
---|
| 28 | if (!attribute || !attribute.value) {
|
---|
| 29 | return false;
|
---|
| 30 | }
|
---|
| 31 | const value = attribute.value;
|
---|
| 32 | if (value.type === 'Literal') {
|
---|
| 33 | return typeof value.value === 'string' && value.value.toLowerCase() === '_blank';
|
---|
| 34 | }
|
---|
| 35 | if (value.type === 'JSXExpressionContainer') {
|
---|
| 36 | const expr = value.expression;
|
---|
| 37 | if (expr.type === 'Literal') {
|
---|
| 38 | return typeof expr.value === 'string' && expr.value.toLowerCase() === '_blank';
|
---|
| 39 | }
|
---|
| 40 | if (expr.type === 'ConditionalExpression') {
|
---|
| 41 | if (expr.alternate.type === 'Literal' && expr.alternate.value && expr.alternate.value.toLowerCase() === '_blank') {
|
---|
| 42 | return true;
|
---|
| 43 | }
|
---|
| 44 | if (expr.consequent.type === 'Literal' && expr.consequent.value && expr.consequent.value.toLowerCase() === '_blank') {
|
---|
| 45 | return true;
|
---|
| 46 | }
|
---|
| 47 | }
|
---|
| 48 | }
|
---|
| 49 | return false;
|
---|
| 50 | }
|
---|
| 51 |
|
---|
| 52 | function hasExternalLink(node, linkAttributes, warnOnSpreadAttributes, spreadAttributeIndex) {
|
---|
| 53 | const linkIndex = findLastIndex(node.attributes, (attr) => attr.name && includes(linkAttributes, attr.name.name));
|
---|
| 54 | const foundExternalLink = linkIndex !== -1 && ((attr) => attr.value && attr.value.type === 'Literal' && /^(?:\w+:|\/\/)/.test(attr.value.value))(
|
---|
| 55 | node.attributes[linkIndex]);
|
---|
| 56 | return foundExternalLink || (warnOnSpreadAttributes && linkIndex < spreadAttributeIndex);
|
---|
| 57 | }
|
---|
| 58 |
|
---|
| 59 | function hasDynamicLink(node, linkAttributes) {
|
---|
| 60 | const dynamicLinkIndex = findLastIndex(node.attributes, (attr) => attr.name
|
---|
| 61 | && includes(linkAttributes, attr.name.name)
|
---|
| 62 | && attr.value
|
---|
| 63 | && attr.value.type === 'JSXExpressionContainer');
|
---|
| 64 | if (dynamicLinkIndex !== -1) {
|
---|
| 65 | return true;
|
---|
| 66 | }
|
---|
| 67 | }
|
---|
| 68 |
|
---|
| 69 | /**
|
---|
| 70 | * Get the string(s) from a value
|
---|
| 71 | * @param {ASTNode} value The AST node being checked.
|
---|
| 72 | * @param {ASTNode} targetValue The AST node being checked.
|
---|
| 73 | * @returns {String | String[] | null} The string value, or null if not a string.
|
---|
| 74 | */
|
---|
| 75 | function getStringFromValue(value, targetValue) {
|
---|
| 76 | if (value) {
|
---|
| 77 | if (value.type === 'Literal') {
|
---|
| 78 | return value.value;
|
---|
| 79 | }
|
---|
| 80 | if (value.type === 'JSXExpressionContainer') {
|
---|
| 81 | if (value.expression.type === 'TemplateLiteral') {
|
---|
| 82 | return value.expression.quasis[0].value.cooked;
|
---|
| 83 | }
|
---|
| 84 | const expr = value.expression;
|
---|
| 85 | if (expr && expr.type === 'ConditionalExpression') {
|
---|
| 86 | const relValues = [expr.consequent.value, expr.alternate.value];
|
---|
| 87 | if (targetValue.type === 'JSXExpressionContainer' && targetValue.expression && targetValue.expression.type === 'ConditionalExpression') {
|
---|
| 88 | const targetTestCond = targetValue.expression.test.name;
|
---|
| 89 | const relTestCond = value.expression.test.name;
|
---|
| 90 | if (targetTestCond === relTestCond) {
|
---|
| 91 | const targetBlankIndex = [targetValue.expression.consequent.value, targetValue.expression.alternate.value].indexOf('_blank');
|
---|
| 92 | return relValues[targetBlankIndex];
|
---|
| 93 | }
|
---|
| 94 | }
|
---|
| 95 | return relValues;
|
---|
| 96 | }
|
---|
| 97 | return expr.value;
|
---|
| 98 | }
|
---|
| 99 | }
|
---|
| 100 | return null;
|
---|
| 101 | }
|
---|
| 102 |
|
---|
| 103 | function hasSecureRel(node, allowReferrer, warnOnSpreadAttributes, spreadAttributeIndex) {
|
---|
| 104 | const relIndex = findLastIndex(node.attributes, (attr) => (attr.type === 'JSXAttribute' && attr.name.name === 'rel'));
|
---|
| 105 | const targetIndex = findLastIndex(node.attributes, (attr) => (attr.type === 'JSXAttribute' && attr.name.name === 'target'));
|
---|
| 106 | if (relIndex === -1 || (warnOnSpreadAttributes && relIndex < spreadAttributeIndex)) {
|
---|
| 107 | return false;
|
---|
| 108 | }
|
---|
| 109 |
|
---|
| 110 | const relAttribute = node.attributes[relIndex];
|
---|
| 111 | const targetAttributeValue = node.attributes[targetIndex] && node.attributes[targetIndex].value;
|
---|
| 112 | const value = getStringFromValue(relAttribute.value, targetAttributeValue);
|
---|
| 113 | return [].concat(value).every((item) => {
|
---|
| 114 | const tags = typeof item === 'string' ? item.toLowerCase().split(' ') : false;
|
---|
| 115 | const noreferrer = tags && tags.indexOf('noreferrer') >= 0;
|
---|
| 116 | if (noreferrer) {
|
---|
| 117 | return true;
|
---|
| 118 | }
|
---|
| 119 | const noopener = tags && tags.indexOf('noopener') >= 0;
|
---|
| 120 | return allowReferrer && noopener;
|
---|
| 121 | });
|
---|
| 122 | }
|
---|
| 123 |
|
---|
| 124 | const messages = {
|
---|
| 125 | 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',
|
---|
| 126 | 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',
|
---|
| 127 | };
|
---|
| 128 |
|
---|
| 129 | /** @type {import('eslint').Rule.RuleModule} */
|
---|
| 130 | module.exports = {
|
---|
| 131 | meta: {
|
---|
| 132 | fixable: 'code',
|
---|
| 133 | docs: {
|
---|
| 134 | description: 'Disallow `target="_blank"` attribute without `rel="noreferrer"`',
|
---|
| 135 | category: 'Best Practices',
|
---|
| 136 | recommended: true,
|
---|
| 137 | url: docsUrl('jsx-no-target-blank'),
|
---|
| 138 | },
|
---|
| 139 |
|
---|
| 140 | messages,
|
---|
| 141 |
|
---|
| 142 | schema: [{
|
---|
| 143 | type: 'object',
|
---|
| 144 | properties: {
|
---|
| 145 | allowReferrer: {
|
---|
| 146 | type: 'boolean',
|
---|
| 147 | },
|
---|
| 148 | enforceDynamicLinks: {
|
---|
| 149 | enum: ['always', 'never'],
|
---|
| 150 | },
|
---|
| 151 | warnOnSpreadAttributes: {
|
---|
| 152 | type: 'boolean',
|
---|
| 153 | },
|
---|
| 154 | links: {
|
---|
| 155 | type: 'boolean',
|
---|
| 156 | default: true,
|
---|
| 157 | },
|
---|
| 158 | forms: {
|
---|
| 159 | type: 'boolean',
|
---|
| 160 | default: false,
|
---|
| 161 | },
|
---|
| 162 | },
|
---|
| 163 | additionalProperties: false,
|
---|
| 164 | }],
|
---|
| 165 | },
|
---|
| 166 |
|
---|
| 167 | create(context) {
|
---|
| 168 | const configuration = Object.assign(
|
---|
| 169 | {
|
---|
| 170 | allowReferrer: false,
|
---|
| 171 | warnOnSpreadAttributes: false,
|
---|
| 172 | links: true,
|
---|
| 173 | forms: false,
|
---|
| 174 | },
|
---|
| 175 | context.options[0]
|
---|
| 176 | );
|
---|
| 177 | const allowReferrer = configuration.allowReferrer;
|
---|
| 178 | const warnOnSpreadAttributes = configuration.warnOnSpreadAttributes;
|
---|
| 179 | const enforceDynamicLinks = configuration.enforceDynamicLinks || 'always';
|
---|
| 180 | const linkComponents = linkComponentsUtil.getLinkComponents(context);
|
---|
| 181 | const formComponents = linkComponentsUtil.getFormComponents(context);
|
---|
| 182 |
|
---|
| 183 | return {
|
---|
| 184 | JSXOpeningElement(node) {
|
---|
| 185 | const targetIndex = findLastIndex(node.attributes, (attr) => attr.name && attr.name.name === 'target');
|
---|
| 186 | const spreadAttributeIndex = findLastIndex(node.attributes, (attr) => (attr.type === 'JSXSpreadAttribute'));
|
---|
| 187 |
|
---|
| 188 | if (linkComponents.has(node.name.name)) {
|
---|
| 189 | if (!attributeValuePossiblyBlank(node.attributes[targetIndex])) {
|
---|
| 190 | const hasSpread = spreadAttributeIndex >= 0;
|
---|
| 191 |
|
---|
| 192 | if (warnOnSpreadAttributes && hasSpread) {
|
---|
| 193 | // continue to check below
|
---|
| 194 | } else if ((hasSpread && targetIndex < spreadAttributeIndex) || !hasSpread || !warnOnSpreadAttributes) {
|
---|
| 195 | return;
|
---|
| 196 | }
|
---|
| 197 | }
|
---|
| 198 |
|
---|
| 199 | const linkAttributes = linkComponents.get(node.name.name);
|
---|
| 200 | const hasDangerousLink = hasExternalLink(node, linkAttributes, warnOnSpreadAttributes, spreadAttributeIndex)
|
---|
| 201 | || (enforceDynamicLinks === 'always' && hasDynamicLink(node, linkAttributes));
|
---|
| 202 | if (hasDangerousLink && !hasSecureRel(node, allowReferrer, warnOnSpreadAttributes, spreadAttributeIndex)) {
|
---|
| 203 | const messageId = allowReferrer ? 'noTargetBlankWithoutNoopener' : 'noTargetBlankWithoutNoreferrer';
|
---|
| 204 | const relValue = allowReferrer ? 'noopener' : 'noreferrer';
|
---|
| 205 | report(context, messages[messageId], messageId, {
|
---|
| 206 | node,
|
---|
| 207 | fix(fixer) {
|
---|
| 208 | // eslint 5 uses `node.attributes`; eslint 6+ uses `node.parent.attributes`
|
---|
| 209 | const nodeWithAttrs = node.parent.attributes ? node.parent : node;
|
---|
| 210 | // eslint 5 does not provide a `name` property on JSXSpreadElements
|
---|
| 211 | const relAttribute = nodeWithAttrs.attributes.find((attr) => attr.name && attr.name.name === 'rel');
|
---|
| 212 |
|
---|
| 213 | if (targetIndex < spreadAttributeIndex || (spreadAttributeIndex >= 0 && !relAttribute)) {
|
---|
| 214 | return null;
|
---|
| 215 | }
|
---|
| 216 |
|
---|
| 217 | if (!relAttribute) {
|
---|
| 218 | return fixer.insertTextAfter(nodeWithAttrs.attributes.slice(-1)[0], ` rel="${relValue}"`);
|
---|
| 219 | }
|
---|
| 220 |
|
---|
| 221 | if (!relAttribute.value) {
|
---|
| 222 | return fixer.insertTextAfter(relAttribute, `="${relValue}"`);
|
---|
| 223 | }
|
---|
| 224 |
|
---|
| 225 | if (relAttribute.value.type === 'Literal') {
|
---|
| 226 | const parts = relAttribute.value.value
|
---|
| 227 | .split('noreferrer')
|
---|
| 228 | .filter(Boolean);
|
---|
| 229 | return fixer.replaceText(relAttribute.value, `"${parts.concat('noreferrer').join(' ')}"`);
|
---|
| 230 | }
|
---|
| 231 |
|
---|
| 232 | if (relAttribute.value.type === 'JSXExpressionContainer') {
|
---|
| 233 | if (relAttribute.value.expression.type === 'Literal') {
|
---|
| 234 | if (typeof relAttribute.value.expression.value === 'string') {
|
---|
| 235 | const parts = relAttribute.value.expression.value
|
---|
| 236 | .split('noreferrer')
|
---|
| 237 | .filter(Boolean);
|
---|
| 238 | return fixer.replaceText(relAttribute.value.expression, `"${parts.concat('noreferrer').join(' ')}"`);
|
---|
| 239 | }
|
---|
| 240 |
|
---|
| 241 | // for undefined, boolean, number, symbol, bigint, and null
|
---|
| 242 | return fixer.replaceText(relAttribute.value, '"noreferrer"');
|
---|
| 243 | }
|
---|
| 244 | }
|
---|
| 245 |
|
---|
| 246 | return null;
|
---|
| 247 | },
|
---|
| 248 | });
|
---|
| 249 | }
|
---|
| 250 | }
|
---|
| 251 | if (formComponents.has(node.name.name)) {
|
---|
| 252 | if (!attributeValuePossiblyBlank(node.attributes[targetIndex])) {
|
---|
| 253 | const hasSpread = spreadAttributeIndex >= 0;
|
---|
| 254 |
|
---|
| 255 | if (warnOnSpreadAttributes && hasSpread) {
|
---|
| 256 | // continue to check below
|
---|
| 257 | } else if (
|
---|
| 258 | (hasSpread && targetIndex < spreadAttributeIndex)
|
---|
| 259 | || !hasSpread
|
---|
| 260 | || !warnOnSpreadAttributes
|
---|
| 261 | ) {
|
---|
| 262 | return;
|
---|
| 263 | }
|
---|
| 264 | }
|
---|
| 265 |
|
---|
| 266 | if (!configuration.forms || hasSecureRel(node)) {
|
---|
| 267 | return;
|
---|
| 268 | }
|
---|
| 269 |
|
---|
| 270 | const formAttributes = formComponents.get(node.name.name);
|
---|
| 271 |
|
---|
| 272 | if (
|
---|
| 273 | hasExternalLink(node, formAttributes)
|
---|
| 274 | || (enforceDynamicLinks === 'always' && hasDynamicLink(node, formAttributes))
|
---|
| 275 | ) {
|
---|
| 276 | const messageId = allowReferrer ? 'noTargetBlankWithoutNoopener' : 'noTargetBlankWithoutNoreferrer';
|
---|
| 277 | report(context, messages[messageId], messageId, {
|
---|
| 278 | node,
|
---|
| 279 | });
|
---|
| 280 | }
|
---|
| 281 | }
|
---|
| 282 | },
|
---|
| 283 | };
|
---|
| 284 | },
|
---|
| 285 | };
|
---|