OWASP Top 10 Security Priorities for Vue.js Developers

// composables/useAuth.js
// SPA-only pattern. For SSR (Nuxt, Vike, etc.) move state into a per-request store
// like Pinia — module-level refs leak across requests.
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const user = ref(null)
const isAuthenticated = ref(false)

export function useAuth() {
  const router = useRouter()

  const hasRole = (role) => user.value?.roles?.includes(role)

  const requireAuth = () => {
    if (!isAuthenticated.value) {
      router.push('/login')
      return false
    }
    return true
  }

  const requireRole = (role) => {
    if (!requireAuth() || !hasRole(role)) {
      router.push('/unauthorized')
      return false
    }
    return true
  }

  return { isAuthenticated, hasRole, requireAuth, requireRole }
}

// router/index.js - Route Guards
router.beforeEach((to, from, next) => {
  const { isAuthenticated, hasRole } = useAuth()

  if (to.meta.requiresAuth && !isAuthenticated.value) {
    next('/login')
  } else if (to.meta.requiresRole && !hasRole(to.meta.requiresRole)) {
    next('/unauthorized')
  } else {
    next()
  }
})

// composables/useSecureStorage.js
import { ref } from 'vue'

export function useSecureStorage() {
  // Never store sensitive data in localStorage/sessionStorage
  const setSecureData = (key, value) => {
    // Use httpOnly cookies for sensitive data via API calls
    return fetch('/api/secure-storage', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include', // Include httpOnly cookies
      body: JSON.stringify({ key, value }),
    })
  }

  const getSecureData = async (key) => {
    const response = await fetch(`/api/secure-storage/${key}`, {
      credentials: 'include',
    })
    return response.json()
  }

  return { setSecureData, getSecureData }
}

// HTTPS and Secure Headers Configuration
// Always use HTTPS in production
const apiClient = axios.create({
  baseURL:
    process.env.NODE_ENV === 'production'
      ? 'https://api.yourapp.com'
      : 'http://localhost:3000',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
  },
})

<!-- SECURE: Vue automatically escapes interpolations -->
<template>
  <div>
    <!-- Safe - Vue escapes HTML automatically -->
    <p>{{ userInput }}</p>

    <!-- DANGEROUS - Raw HTML insertion -->
    <!-- <p v-html="userInput"></p> -->

    <!-- SECURE: Sanitized HTML if v-html is necessary -->
    <p v-html="sanitizedUserInput"></p>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import DOMPurify from 'dompurify'

const props = defineProps(['userInput'])

// Always sanitize before using v-html
const sanitizedUserInput = computed(() => {
  return DOMPurify.sanitize(props.userInput)
})
</script>

// composables/useSafeInput.js
import { ref, computed } from 'vue'
import DOMPurify from 'dompurify'

export function useSafeInput() {
  const rawInput = ref('')

  // Sanitize input for safe display
  const sanitizedInput = computed(() => {
    return DOMPurify.sanitize(rawInput.value, {
      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p'],
      ALLOWED_ATTR: [],
    })
  })

  // Encode for safe insertion into HTML output. Do NOT use this for JSON API
  // payloads — JSON encodes itself and HTML-escaping user data corrupts it.
  const escapeForHtmlOutput = (input) => {
    return input
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#x27;')
  }

  return { rawInput, sanitizedInput, escapeForHtmlOutput }
}

// composables/useSecureForm.js
import { ref } from 'vue'

export function useSecureForm() {
  const isSubmitting = ref(false)
  const errors = ref({})
  const csrfToken = ref('')

  // Get CSRF token from server. Pair this with `SameSite=Lax` (or `Strict`)
  // session cookies — the cookie attribute is the primary CSRF defense in
  // modern browsers; the token is the second layer.
  const initializeForm = async () => {
    try {
      const response = await fetch('/api/csrf-token', {
        credentials: 'include',
      })
      const data = await response.json()
      csrfToken.value = data.token
    } catch (error) {
      console.error('Failed to get CSRF token:', error)
    }
  }

  const submitForm = async (formData) => {
    if (isSubmitting.value) return

    isSubmitting.value = true
    errors.value = {}

    try {
      const response = await fetch('/api/form-submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrfToken.value,
        },
        credentials: 'include',
        body: JSON.stringify(formData),
      })

      if (!response.ok) {
        const errorData = await response.json()
        errors.value = errorData.errors || {}
        throw new Error('Form submission failed')
      }

      return await response.json()
    } finally {
      isSubmitting.value = false
    }
  }

  return { isSubmitting, errors, submitForm, initializeForm }
}

// vite.config.js - Production Security Configuration
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  define: {
    // Strip Vue devtools from production builds
    __VUE_PROD_DEVTOOLS__: false,
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
  },
  build: {
    // Source maps off in production so internal logic is not handed to attackers
    sourcemap: process.env.NODE_ENV !== 'production',
    // Vite's default esbuild minifier drops console/debugger via `esbuild.drop`
  },
  esbuild: {
    drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [],
  },
  server: {
    // Headers worth setting at the dev server. Skip the legacy `X-XSS-Protection`
    // header — modern browsers ignore it and OWASP recommends omitting it.
    // CSP is what blocks XSS in 2026.
    headers: {
      'X-Content-Type-Options': 'nosniff',
      'X-Frame-Options': 'DENY',
      'Referrer-Policy': 'strict-origin-when-cross-origin',
    },
  },
})

// Environment Configuration
// Vite only exposes variables prefixed with `VITE_` to the client bundle.
// Anything else stays server-side. (Vue CLI used `VUE_APP_` — that's gone.)

// .env.production
VITE_API_URL=https://api.production.com
VITE_LOG_LEVEL=error

// .env.development
VITE_API_URL=http://localhost:3000
VITE_LOG_LEVEL=debug

// Never put secrets in any client-side env var. `VITE_*` values ship in the
// bundle in plain text — treat them as public. Secrets belong in server-only
// runtime config (env vars on the API host, never imported by the client).

# Regular security auditing commands
npm audit
npm audit fix

# Check for outdated packages
npm outdated

# Use npm-check-updates for safe updates
npx npm-check-updates
npx npm-check-updates -u

# Audit with detailed information
npm audit --audit-level=moderate

// package.json - Security-focused configuration
{
  "scripts": {
    "audit": "npm audit",
    "audit:fix": "npm audit fix",
    "audit:check": "npm audit --audit-level=high",
    "update:check": "npx npm-check-updates",
    "prebuild": "npm run audit:check"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "@vue/runtime-core": "^3.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^5.0.0"
  }
}

// composables/useAuthentication.js
//
// Client-side throttling here is a UX nicety, NOT a security control. The
// server must enforce its own per-account and per-IP lockout — anyone hitting
// /api/auth/login with curl bypasses everything below. Treat the client
// counter as "stop pestering the user with a button that won't work."
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const user = ref(null)
const isLoading = ref(false)
const cooldownUntil = ref(null) // server-supplied retry hint, see below

export function useAuthentication() {
  const router = useRouter()

  const isAuthenticated = computed(() => !!user.value)
  const inCooldown = computed(() => {
    return cooldownUntil.value && Date.now() < cooldownUntil.value
  })

  const login = async (credentials) => {
    if (inCooldown.value) {
      throw new Error('Account temporarily locked. Please try again later.')
    }

    isLoading.value = true

    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include', // session cookie should be HttpOnly + Secure + SameSite=Lax
        body: JSON.stringify({
          email: credentials.email,
          password: credentials.password,
          captchaToken: credentials.captchaToken,
        }),
      })

      if (response.status === 429) {
        // Honour the server's Retry-After header (seconds) for the UI cooldown
        const retryAfter = Number(response.headers.get('Retry-After')) || 900
        cooldownUntil.value = Date.now() + retryAfter * 1000
        throw new Error('Too many attempts. Try again later.')
      }

      if (!response.ok) {
        throw new Error('Invalid credentials')
      }

      const data = await response.json()
      user.value = data.user
      cooldownUntil.value = null

      router.push('/dashboard')
    } finally {
      isLoading.value = false
    }
  }

  const logout = async () => {
    try {
      await fetch('/api/auth/logout', {
        method: 'POST',
        credentials: 'include',
      })
    } finally {
      user.value = null
      router.push('/login')
    }
  }

  return { isAuthenticated, isLoading, inCooldown, login, logout }
}

# .github/workflows/security-check.yml
name: Security Check
on: [push, pull_request]

jobs:
  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run security audit
        run: npm audit --audit-level=high

      - name: Run dependency check
        uses: snyk/actions/node@master
        env:
          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}

      - name: Build application
        run: npm run build

      - name: Verify build integrity
        run: |
          # Check that build artifacts are generated correctly
          ls -la dist/
          # Verify no sensitive data in build
          ! grep -r "password\|secret\|key" dist/ || exit 1

// Build verification script
// scripts/verify-build.js
import { readFileSync, readdirSync } from 'fs'
import { join } from 'path'
import crypto from 'crypto'

const distDir = './dist'
const manifestFile = './build-manifest.json'

// Generate checksums for build artifacts
function generateManifest() {
  const manifest = {}
  const files = readdirSync(distDir, { recursive: true })

  for (const file of files) {
    if (file.endsWith('.js') || file.endsWith('.css')) {
      const filePath = join(distDir, file)
      const content = readFileSync(filePath)
      const hash = crypto.createHash('sha256').update(content).digest('hex')
      manifest[file] = hash
    }
  }

  return manifest
}

// Verify build integrity
const manifest = generateManifest()
console.log('Build manifest generated:', manifest)

// composables/useSecurityLogger.js
//
// Frontend telemetry only. The browser's view of the world is attacker-controlled
// (user-agent, timing, even the URL), so this is supplementary signal — the
// authoritative log lives on the server, where it can record the real IP,
// authenticated user ID from the session cookie, and request shape.
import { ref } from 'vue'

const securityEvents = ref([])

export function useSecurityLogger() {
  const logSecurityEvent = async (event) => {
    const securityEvent = {
      timestamp: new Date().toISOString(),
      type: event.type,
      severity: event.severity,
      // Don't pass userId from the client — server resolves it from the session
      details: event.details,
      url: window.location.href,
    }

    securityEvents.value.push(securityEvent)

    try {
      await fetch('/api/security/log', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify(securityEvent),
      })
    } catch (error) {
      console.error('Failed to log security event:', error)
    }
  }

  const logLoginAttempt = (success) => {
    logSecurityEvent({
      type: 'authentication',
      severity: success ? 'info' : 'warning',
      details: {
        action: 'login_attempt',
        success,
        failureReason: success ? null : 'invalid_credentials',
      },
    })
  }

  const logSuspiciousActivity = (details) => {
    logSecurityEvent({
      type: 'security_violation',
      severity: 'high',
      details: {
        ...details,
        action: 'suspicious_activity_detected',
      },
    })
  }

  return { logSecurityEvent, logLoginAttempt, logSuspiciousActivity }
}

// composables/useSafeUrlHandler.js
import { ref } from 'vue'

const allowedDomains = [
  'api.yourapp.com',
  'cdn.yourapp.com',
  'trusted-partner.com',
]

export function useSafeUrlHandler() {
  const isValidUrl = (url) => {
    try {
      const urlObj = new URL(url)

      // Only allow HTTPS for external URLs
      if (urlObj.protocol !== 'https:' && urlObj.protocol !== 'http:') {
        return false
      }

      // Check against whitelist of allowed domains
      return allowedDomains.includes(urlObj.hostname)
    } catch {
      return false
    }
  }

  const safeFetch = async (url, options = {}) => {
    if (!isValidUrl(url)) {
      throw new Error('Invalid or unauthorized URL')
    }

    // Add security headers
    const safeOptions = {
      ...options,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        ...options.headers,
      },
    }

    return fetch(url, safeOptions)
  }

  const validateImageUrl = (imageUrl) => {
    if (!isValidUrl(imageUrl)) {
      return '/images/placeholder.png' // Fallback image
    }
    return imageUrl
  }

  return { isValidUrl, safeFetch, validateImageUrl }
}

// Example: Safe image loading component
<template>
  <div>
    <img
      :src="safeImageUrl"
      :alt="imageAlt"
      @error="handleImageError"
      loading="lazy"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useSafeUrlHandler } from '@/composables/useSafeUrlHandler'

const props = defineProps(['imageUrl', 'imageAlt'])
const { validateImageUrl } = useSafeUrlHandler()

const safeImageUrl = computed(() => {
  return validateImageUrl(props.imageUrl)
})

const handleImageError = (event) => {
  // Fallback to placeholder if image fails to load
  event.target.src = '/images/placeholder.png'
}
</script>