Feature/nuxt3 security migration

[myokoym]

No description provided.

[github-advanced-security]

This pull request sets up GitHub code scanning for this repository. Once the scans have completed and the checks have passed, the analysis results for this pull request branch will appear on this overview. Once you merge this pull request, the 'Security' tab will show more code scanning analysis results (for example, for the default branch). Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results. For more information about GitHub code scanning, check out the documentation.

[Copilot]

Pull Request Overview

This PR implements a comprehensive migration of the Nuxt.js application to modern technologies, focusing on security improvements, performance enhancements, and framework updates. The migration includes upgrading Socket.IO to v4, implementing security middleware, migrating state management to Pinia, and updating the overall architecture for better maintainability.

Key changes include:

• Migration to Nuxt Bridge for Vue 3 compatibility while maintaining Nuxt 2 features
• Upgrade from Socket.IO v2 to v4 with backward compatibility support
• Implementation of comprehensive security headers and middleware
• State management migration from Vuex to Pinia with compatibility helpers

Reviewed Changes

Copilot reviewed 59 out of 61 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
vitest.config.js	Added Vitest configuration for modern testing framework
utils/bootstrap-compatibility.js	Bootstrap Vue compatibility mapping for migration
test/	Comprehensive test suite covering all migration aspects
stores/	New Pinia store implementations with TypeScript support
server/plugins/	Socket.IO v4 server implementation with security enhancements
server/middleware/security.js	Security headers middleware implementation
plugins/socket.client.js	Socket.IO v4 client with error handling and reconnection
package.json	Updated dependencies including Socket.IO v4 and Pinia
nuxt.config.ts	Nuxt Bridge configuration with modern build settings

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The client version detection logic hardcodes the version string '3' for Socket.IO v2 clients. Consider using a constant or configuration to make this more maintainable and to handle potential future version changes.

[Copilot]

The history limit of 100 is hardcoded. Consider extracting this as a configurable constant to make it easier to adjust based on application requirements or user preferences.

Suggested change

	if (this.history.length > 100) {
	// 履歴の上限を設定（HISTORY_LIMIT手まで）
	if (this.history.length > HISTORY_LIMIT) {

[Copilot]

The validation limits (10000 characters) are hardcoded in multiple places. Consider extracting these as configuration constants to make them easier to maintain and adjust.

Suggested change

	if (typeof value === 'object' && JSON.stringify(value).length > 10000) {
	if (typeof value === 'string' && value.length > FIELD_VALUE_MAX_LENGTH) {
	return false
	}
	if (typeof value === 'object' && JSON.stringify(value).length > FIELD_VALUE_MAX_LENGTH) {

[Copilot]

Using 'latest' tag for production dependencies can lead to unpredictable builds and potential breaking changes. Consider pinning to a specific version to ensure build reproducibility.

Suggested change

	"nuxt": "npm:nuxt3@latest",
	"nuxt": "npm:nuxt3@3.10.2",

[Copilot]

The CSP directive allows 'unsafe-inline' and 'unsafe-eval' which significantly weakens XSS protection. Consider using nonces or hashes for specific scripts instead of blanket unsafe directives, or at least document which specific Socket.IO functionality requires these permissions.

Suggested change

	"script-src 'self' 'unsafe-inline' 'unsafe-eval'", // Socket.IOのインラインスクリプト用
	"script-src 'self'", // Consider using nonces/hashes if inline scripts are required. Removed 'unsafe-inline' and 'unsafe-eval' for security.

[Copilot]

The code attempts to commit to 'socket/setConnectionError' but there's no evidence that a socket store module exists in the codebase. This will likely cause runtime errors when connection errors occur.

Suggested change

	})
	if (this.store._mutations && this.store._mutations['socket/setConnectionError']) {
	this.store.commit('socket/setConnectionError', {
	error: error.message
	})
	} else {
	console.warn("Mutation 'socket/setConnectionError' not found in store.")
	}
	}
	})
	this.socket.on('error', (error) => {
	console.error('Socket.IO error:', error)
	if (this.store) {
	if (this.store._mutations && this.store._mutations['socket/setError']) {
	this.store.commit('socket/setError', {
	error: error
	})
	} else {
	console.warn("Mutation 'socket/setError' not found in store.")
	}

[Copilot]

The code accesses 'this.$state' but in Pinia stores, the state is accessed as 'this' directly, not 'this.$state'. This will cause runtime errors when migrated Vuex mutations are called.

Suggested change

	vuexModule.mutations[key](this.$state, payload)
	vuexModule.mutations[key](this, payload)

[Copilot]

The manual chunk configuration includes 'pinia' and 'vuex' in the same vendor chunk, but these are different state management libraries. Since this is a migration, consider separating them or removing one to avoid loading unnecessary code.

Suggested change

	'vendor': ['vue', 'vuex', 'pinia'],
	'vendor': ['vue'],
	'vendor-vuex': ['vuex'],
	'vendor-pinia': ['pinia'],