Chore: add require-noopener rule

Author: mysticatea

.eslintrc.json

@@ -28,6 +28,8 @@
         "node/no-missing-import": "error",
         "node/no-unpublished-import": "error",
         "vue/html-indent": ["error", 4],
-        "vue/max-attributes-per-line": "off"
+        "vue/max-attributes-per-line": "off",
+
+        "require-noopener": "error"
     }
 }

.vscode/settings.json

@@ -2,5 +2,8 @@
     "eslint.validate": [
         "javascript",
         {"autoFix": true, "language": "vue"}
-    ]
+    ],
+    "eslint.options": {
+        "rulePaths": ["eslint-rules"]
+    }
 }

eslint-rules/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+    "root": true,
+    "extends": [
+        "mysticatea",
+        "mysticatea/node"
+    ],
+    "rules": {
+        "no-console": "off"
+    }
+}

eslint-rules/require-noopener.js

@@ -0,0 +1,31 @@
+"use strict"
+
+module.exports = (context) =>
+    context.parserServices.defineTemplateBodyVisitor({
+        "VElement[name='a']"(node) {
+            const attributes = node.startTag.attributes
+            const hasTargetBlank = attributes.some(attribute =>
+                !attribute.directive &&
+                attribute.key.name === "target" &&
+                attribute.value != null &&
+                attribute.value.value === "_blank"
+            )
+            const hasRelNoopener = attributes.some(attribute =>
+                !attribute.directive &&
+                attribute.key.name === "rel" &&
+                attribute.value != null &&
+                attribute.value.value === "noopener"
+            )
+
+            if (hasTargetBlank && !hasRelNoopener) {
+                context.report({
+                    node: node.startTag,
+                    message: "Use 'rel=\"noopener\" to open new tab.",
+                    * fix(fixer) {
+                        const lastAttribute = attributes[attributes.length - 1]
+                        yield fixer.insertTextAfter(lastAttribute, " rel=\"noopener\"")
+                    },
+                })
+            }
+        },
+    })

src/app.vue

@@ -2,7 +2,7 @@
     <div class="app__root">
         <div class="app__header">
             <div class="app__header-title">
-                Playground for <a href="https://github.com/vuejs/eslint-plugin-vue#readme" target="_blank">eslint-plugin-vue</a>.
+                Playground for <a href="https://github.com/vuejs/eslint-plugin-vue#readme" target="_blank" rel="noopener">eslint-plugin-vue</a>.
             </div>
             <label class="app__header-option-item">
                 <select v-model.number="indentSize">
@@ -54,7 +54,7 @@
                 v-for="(v, name) in versions"
                 :key="name"
             >
-                <a :href="'https://github.com/' + v.repo" target="_blank">{{ name }}</a>
+                <a :href="'https://github.com/' + v.repo" target="_blank" rel="noopener">{{ name }}</a>
                 v{{ v.version }}
             </div>
         </div>

src/message-list.vue

@@ -14,7 +14,7 @@
             :key="i"
         >
             <md-icon kind="warning"/>
-            {{ m.line }}:{{ m.column }}{{ space(m) }}{{ m.message }} (<a :href="url(m.ruleId)" target="_blank" v-if="m.ruleId != null">{{ m.ruleId }}</a><span v-else>FATAL</span>)
+            {{ m.line }}:{{ m.column }}{{ space(m) }}{{ m.message }} (<a :href="url(m.ruleId)" target="_blank" v-if="m.ruleId != null" rel="noopener">{{ m.ruleId }}</a><span v-else>FATAL</span>)
         </li>
     </ul>
 </template>

src/rule-select-category.vue

@@ -42,7 +42,7 @@
                     <div class="rule-select-category__rule-name">
                         {{ stripPrefix(rule.name) }}
                     </div>
-                    <a class="rule-select-category__rule-link" :href="url(rule.name)" target="_blank">
+                    <a class="rule-select-category__rule-link" :href="url(rule.name)" target="_blank" rel="noopener">
                         <md-icon kind="launch" title="Open document"/>
                     </a>
                 </label>