Add the URL Defanger Tool

components.d.ts

@@ -182,6 +182,7 @@ declare module '@vue/runtime-core' {
     UlidGenerator: typeof import('./src/tools/ulid-generator/ulid-generator.vue')['default']
     UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
     UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
+    UrlDefang: typeof import('./src/tools/url-defang/url-defang.vue')['default']
     UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
     UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
     UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']

locales/en.yml

@@ -205,6 +205,10 @@ tools:
     title: URL parser
     description: Parse a URL into its separate constituent parts (protocol, origin, params, port, username-password, ...)
 
+  url-defang:
+    title: URL Defang
+    description: Defangs a given url to make a potentially malicous domain safe to share for security research or operations purposes.
+
   iban-validator-and-parser:
     title: IBAN validator and parser
     description: Validate and parse IBAN numbers. Check if an IBAN is valid and get the country, BBAN, if it is a QR-IBAN and the IBAN friendly format.

src/tools/index.ts

@@ -83,6 +83,7 @@ import { tool as tokenGenerator } from './token-generator';
 import type { ToolCategory } from './tools.types';
 import { tool as urlEncoder } from './url-encoder';
 import { tool as urlParser } from './url-parser';
+import { tool as urlDefang } from './url-defang';
 import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
@@ -124,6 +125,7 @@ export const toolsByCategory: ToolCategory[] = [
       urlEncoder,
       htmlEntities,
       urlParser,
+      urlDefang,
       deviceInformation,
       basicAuthGenerator,
       metaTagGenerator,

src/tools/url-defang/index.ts

@@ -0,0 +1,12 @@
+import { Unlink } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.url-defang.title'),
+  path: '/url-defang',
+  description: translate('tools.url-defang.description'),
+  keywords: ['url', 'defang'],
+  component: () => import('./url-defang.vue'),
+  icon: Unlink,
+});

src/tools/url-defang/url-defang.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import InputCopyable from '../../components/InputCopyable.vue';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const urlToParse = ref('https://me:[email protected]:3000/url-parser?key1=value&key2=value2#the-hash');
+
+const urlParsed = computed(() => withDefaultOnError(() => defangUrl(urlToParse.value), undefined));
+
+const defangUrl = (url) => {
+  let urlString = url.toString();
+
+  // Remove credentials (username:password)
+  const credentialsPattern = /\/\/([^@]+@)/;
+  urlString = urlString.replace(credentialsPattern, '://');
+
+  // Replace protocol separator to prevent execution (http:// or https:// -> http[:]//)
+  urlString = urlString.replace('://', '[:]//');
+
+  // Replace the dot before TLD with [.] (e.g., domain.tld -> domain[.]tld)
+  const domainPattern = /(\.[a-zA-Z]{2,})(?=\b)/g;
+  urlString = urlString.replace(domainPattern, '[.]$1').replace('.].', '.]');
+
+  return urlString;
+};
+
+</script>
+
+<template>
+  <c-card>
+    <c-input-text
+      v-model:value="urlToParse"
+      label="URL to Defang:"
+      placeholder="Your url to defang..."
+      raw-text
+    />
+
+    <n-divider />
+
+    <InputCopyable
+      label="Defanged URL"
+      :value="(urlParsed as string) ?? ''"
+      readonly
+      label-position="left"
+      label-width="110px"
+      mb-2
+      placeholder=" "
+    />
+  </c-card>
+</template>
+
+<style lang="less" scoped>
+.n-input-group-label {
+  text-align: right;
+}
+.n-input-group {
+  margin: 2px 0;
+}
+</style>