https://github.com/dxphilo/v-safe-url

Safe and secure URL sanitization in Vuejs
https://github.com/dxphilo/v-safe-url

safe-url vuejs vuejs2 vuejs3

Last synced: 1 day ago
JSON representation

Safe and secure URL sanitization in Vuejs

• Host: GitHub
• URL: https://github.com/dxphilo/v-safe-url
• Owner: dxphilo
• License: mit
• Created: 2024-01-06T09:22:47.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-01-08T10:24:08.000Z (9 months ago)
• Last Synced: 2024-09-18T02:19:22.461Z (10 days ago)
• Topics: safe-url, vuejs, vuejs2, vuejs3
• Language: TypeScript
• Homepage:
• Size: 65.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# v-safe-url

Secure URL Sanitization for Vue.js Applications

## Why

I built this to help with safe URL sanitization in VueJs application. Under the hood, we levarage [sanitize-url](https://github.com/braintree/sanitize-url)

**Note:** The plugin has a bundle size of 1.59 kB, and you can also check its details on [bundlephobia](https://bundlephobia.com/package/v-safe-url).

## Installation

Install the package using your preferred package manager:

```bash

npm install v-safe-url

# or

yarn add v-safe-url

# or

pnpm add v-safe-url

```

## Installation

In your Vue.js app entry file (main.ts or main.js), include the following:

```

  // In main.js or similar

  import { createApp } from 'vue';

  import VueSafeUrl from 'v-safe-url';

  const app = createApp(App);

  app.use(VueSafeUrl);

  app.mount('#app');

```

## Usage

Apply the `v-safe-url` directive in your `a` link HTML tags to securely sanitize URLs.

**Note:** The directive shoudl be used on `` tags since it will inject the `href` attribute. If you need to use `usesafeUrl` in non-links, I suggest you check out the [useSafeUrl](#usesafeurl)


```

import { ref } from 'vue';

const untrustedUrl = ref('www.example.com/\u200D\u0000\u001F\x00\x1F\uFEFFfoo');

  


    Click Here for a Safe Link 

  


```

## useSafeUrl

Alternatively, if you prefer to sanitize the URL within the `` tag, import `useSafeUrl` from `v-safe-url`.

```

<script setup>

import { useSafeUrl } from 'v-safe-url';

import { ref } from 'vue';

const uncleanUrl = ref('www.example.com/\u200D\u0000\u001F\x00\x1F\uFEFFfoo');

const safeUrl = useSafeUrl(uncleanUrl.value);

  


    
Unsafe URL: {{ uncleanUrl }}

    
Safe URL: {{ safeUrl }}

  


```

If you encounter any issues, find a bug, wish to request a new feature, or propose general refactoring, please open an issue for discussion. Your feedback is valuable, and I appreciate your contributions. I hope this helps!

## License

[MIT](./LICENSE) License © 2023-PRESENT [John Philip](https://github.com/dxphilo)