DEV Community: Tofiq Hamzaie

How Avoiding Next.js Turned Into a 9.8 CVE-Level Security Nightmare

Tofiq Hamzaie — Fri, 05 Dec 2025 20:54:37 +0000

I'm Scared

Do you know what’s scarier than an RSC vulnerability with a CVE score of 10?
Trying to roll your own SSR system for a React app… using a Node.js server stitched together with hope, vibes, and absolutely no security hardening.

Yeah. That kind of nightmare.

Background Story

I met a friend today and casually brought up the recent React Server Components security issue. I told him it was serious issue, the kind of issue that gets security researchers out of bed in the morning. I suggested he update the relevant RSC libraries in his app, the one where he implemented SSR manually.

He waved it off instantly.

“That’s a Next.js problem. My app isn’t built on Next.js.”

I explained that the vulnerability was in RSC itself, not in Next.js, which only inherited it. But again, he insisted:

“I’m not even using RSC.”

At that point, curiosity took over. If he wasn’t using RSC, then what exactly was powering his SSR?

He opened the project. And when I saw the server code, a cold breeze passed through me. My only reaction was:

“Bro… did you vibe-code your entire SSR engine?”

I'm Shocked (And So Was He)

Let me paint a picture of what I found — without exposing a single line of his code. Note all of this is on one file.

The entire domain logic and routing layer manipulated the Host header directly

The server trusted whatever “Host” value the client sent. It rewrote URLs, enforced redirects, and rebuilt full HTTPS URLs using unchecked input from the request.
This alone opens the door to open redirects, phishing vectors, and host header attacks.

The server accepted arbitrarily large request bodies

No size limits, No rate limits, No timeout controls, Nothing.

A single malicious request could exhaust memory or spawn infinite processes.
That’s how you get Denial of Service via unbounded request bodies.

The biggest bomb: Node.js was literally executing PHP scripts directly based on incoming requests

Not only that, it forwarded user input straight into a PHP process.
The server opened a child process for each request, piped the client’s body into it, and returned whatever the PHP script printed.

No sanitization, No validation, No constraints, No concurrency limits, No sandboxing.

This is the kind of setup that can:

Expose environment variables
Leak internal state
Exhaust server resources
Execute unintended code paths
Trigger chain-vulnerabilities between Node and PHP

A perfect breeding ground for DoS, environment leaks, XSS, and arbitrary remote actions.

The server trusted proxies blindly

It enabled “trust proxy” without configuring safe IP ranges.
That means a random attacker could spoof certain headers and influence behavior intended only for internal load balancers.

SSR rendering inserted unescaped data back into the HTML

State hydration values were directly injected into the HTML template without HTML escaping.
If any user-controlled content made it into the SSR context, that instantly becomes full-blown XSS, capable of stealing sessions or performing privileged actions.

My friend looked at me, then at the vulnerability list generated by the AI, I watched the exact moment he realized this could have gone catastrophically wrong.

He genuinely didn’t know these were real, severe security issues.
He thought he was simply “rendering PHP from Node” because it worked.

Sometimes the most dangerous bugs are the ones that feel harmless.

CVE Rating: 9.8?!

For fun, I asked Gemini what CVE score it would assign if this code were a real-world vulnerability.

It answered: 9.8

To be fair, I asked Gemini to review the code in the most pessimistic, worst-case-scenario way possible. Some findings might not apply exactly as listed.

But security is one domain where pessimism is actually a job requirement.
Especially when you're writing a custom SSR system from scratch.

Summary

Frameworks have vulnerabilities sure. But they also come with teams of engineers and a community patching, testing, and auditing the security model you're standing on.

When you vibe-code your own SSR engine, You become the security team.

And unless you're prepared to test every header, every body size limit, every escape mechanism, every child process, every redirect rule…

You’re one mistake away from writing your own CVE.

Laravel scaffold command

Tofiq Hamzaie — Sat, 02 Oct 2021 20:30:38 +0000

Hi artisans, i created a package called Laravel scaffold command, adds an artisan command that you can generate necessary files for crud applications, either you use laravel as fullstack or a rest-api this can help you.

installation

composer require tefoh/laravel-scaffold-command
// then
php artisan vendor:publish --tag=scaffold-stubs

Thats it and just enter the model or entity you want crud operation with the fields needed. The fields is two parts, first is field name and second is field type this two separated with a colon. The field type must be from laravel migrations available column types, heres the link https://laravel.com/docs/8.x/migrations#available-column-types. For example to create a crud operation for Category enter this:

php artisan scaffold Category --fields=name:string,slug:string,parent_id:foreignId

And for rest-api just add api parameter to create necessary resources instead of views. And controller will be a bit different:

php artisan scaffold Tag --api --fields=name:string,slug:string,parent_id:foreignId

The original idea comes from ruby on rails, they have a similar command. The beauty of this package is you can use laravel stubs and fully customize how controllers and views created when you enter this command. I hope this will be helpful for you :)

HOC in vue 3 (higher order components)

Tofiq Hamzaie — Wed, 26 May 2021 11:56:31 +0000

lets talk about an advanced technique for reusing components, its a function will takes a component and give back new component. the idea comes from react community, here's the link . this idea maybe not so useful for every project but for third party libraries its great pattern.

init project

ok we will create project with vite because its fast. more details about vite. use this commands to create project

npm init @vitejs/app myapp
cd myapp
npm install
npm run dev

// or yarn 
yarn create @vitejs/app myapp
cd myapp
yarn
yarn dev

we will create two components for counter CounterPlusOne.vue and CounterPlusFive.vue as the names will tell first component plus by one the counter, the second component plus counter by five. the components will be simple and look like this:

<!-- CounterPlusOne.vue -->
<template>
  <p>counter {{ counter }}</p>
  <button @click="increment">add</button>
</template>

<script>
export default {
  data: () => ({
    counter: 0,
  }),

  methods: {
    increment() {
      this.counter += 1;
    },
  },
};
</script>

<!-- CounterPlusFive.vue -->
<template>
  <p>counter {{ counter }}</p>
  <button @click="increment">add</button>
</template>

<script>
export default {
  data: () => ({
    counter: 0,
  }),

  methods: {
    increment() {
      this.counter += 5;
    },
  },
};
</script>

as you can see things are similar in script part. the state, and maybe increment part if we could pass a prop to it. so we will extract this functionality to a function but gives us back the component we want.

HOC (higher order components)

the existing part is this function, but you have to know about render function and how it works in vue 3, the doc link . the summary of render function, its a vue function that create elements. and vue use it behind the scenes. but we dont have to know about it because we can use template in vue components. lets create a javascript file WithCounter.js and for now we just want to pass the component and give it back to us, simple and ez :)

import { h } from "@vue/runtime-core"

function WithCounter(WrappedComponent) {
  // we will return new component that render's WrappedComponent
  return {
    created() {
      console.log('HOC component created')
    },

    render() {
      return h(WrappedComponent)
    }
  }
}

export default WithCounter

this is our first higher order component, maybe lots of things is new but i will explain. so first we have a function that accepts a component to render, remember the HOC component dont care about component it will render, it just make it resuable. our function will returns an object, this object is a new component, the components in vue is just objects in vue components you will export default an object in script part. render remains it will create a vNode with h function we imported at top. if we want to create a custom component with render function thats how we do it. to use this higher order component:

import CounterPlusOne from "./components/CounterPlusOne.vue";
import CounterPlusFive from "./components/CounterPlusFive.vue";
import WithCounter from "./components/WithCounter.js";

export default {
  components: {
    CounterPlusOne: WithCounter(CounterPlusOne),
    CounterPlusFive: WithCounter(CounterPlusFive),
  },
};

for now it doesn't do much just renders the components and log HOC component created twice.

reusable HOCs

now we move counter functionality to our HOC. first start simple we just send a argument to with counter, means:

// App.vue
export default {
  components: {
    CounterPlusOne: WithCounter(CounterPlusOne, 1),
    CounterPlusFive: WithCounter(CounterPlusFive, 5),
  },
};

// WithCounter.js
function WithCounter(WrappedComponent, number)

because its function we can pass as many arguments we want. lets move all duplicated code in this two components to WithCounter:


function WithCounter(WrappedComponent, number = 1) {
  return {
    data: () => ({
      counter: 0,
    }),

    methods: {
      increment() {
        this.counter += number;
      },
    },

    render() {
      return h(WrappedComponent, {
        counter: this.counter,
        increment: this.increment
      })
    }
  }
}

as i said increment method can be refactored with given parameter. we only do pass counter and increment as props to components. so our component will be like this.

<!-- CounterPlusOne.vue -->
<template>
  <p>counter {{ counter }}</p>
  <button @click="increment">add</button>
</template>

<script>
export default {
  props: {
    counter: Number,
    increment: Function,
  },
};
</script>

<!-- CounterPlusFive.vue -->
<template>
  <p>counter {{ counter }}</p>
  <button @click="increment">add</button>
</template>

<script>
export default {
  props: {
    counter: Number,
    increment: Function,
  },
};
</script>

summary

for now they totally same but its just an example, i use this pattern in my tdata package, that just sends form and get data from an api. i dont use this pattern a lot but i see its very useful for packages or third party libraries.

vuejs plugin for fetch data and submit form

Tofiq Hamzaie — Mon, 03 May 2021 12:47:51 +0000

i just published my first vue (npm) package :). called tdata, and it just simply fetch data and send forms, and will give you json, response, loading and error if you had any. if you wanna check it out here's github repo.

usage

ok first step is install and register components.

npm i tdata

or if you are using yarn

yarn add tdata

then you have to register components. and i provider two options for you. globally and locally. for global registration:

// main.js
import TData from "tdata";

const app = createApp(App);

app.use(TData, options);

app.mount("#app");

this will register all components automatically. options is optional and i explain a bit later.

and to register components locally. go any components you want like App.vue:

<script>
import { TFetch, TForm } from "tdata";

export default {
  components: {
    TFetch: TFetch(options),
    TForm: TForm(options),
  },
  // for sending form
  data: () => ({
    form: {
      title: "",
      body: "",
    },
  }),
};
</script>

now components are registered successfully. and you can use this to fetch data or submit forms in templates.

<template>
  <TForm
    url="https://jsonplaceholder.typicode.com/posts"
    :form="form"
    v-slot="{ loading }"
  >
    <input type="text" v-model="form.body" />
    <input type="text" v-model="form.title" />
    <button type="submit" :disabled="loading">submit</button>
  </TForm>

  <TFetch
    url="https://jsonplaceholder.typicode.com/posts"
    v-slot="{ json: posts, loading }"
    :options="{ params: { _limit: 5 } }"
  >
    <template v-if="loading"> loading... </template>
    <template v-else>
      <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
      </ul>
    </template>
  </TFetch>
</template>

its that easy and you access things like json response, actual response, is request still loading and error if you had any. its handy but if you cant customize it, it will not be that useful for a project so just provide options and make your development easier.

options

first option you can set is baseURL, with this you dont have to provide full url every time. you can set baseURL like this:

<script>
import { TFetch } from "tdata";
export default {
  components: {
    TFetch: TFetch({ baseURL: "https://jsonplaceholder.typicode.com" }),
  },
};
</script>

now with every use of this component, base url will set automatically. but what if you have a axios instance and you set headers, baseURL and ... . good news is you can use that too. here how:

import TData from "tdata";
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  headers: {
    Authorization: "Bearer token:)",
  },
});

const app = createApp(App);

app.use(TData, { axios: axiosInstance });

app.mount("#app");

now in template you can use it like this:

<TForm url="/posts" :form="form" v-slot="{ loading }">
  <input type="text" v-model="form.body" />
  <input type="text" v-model="form.title" />
  <button type="submit" :disabled="loading">submit</button>
</TForm>
<TFetch
  url="/posts"
  v-slot="{ json: posts, loading }"
  :options="{ params: { _limit: 5 } }"
>
  <template v-if="loading"> loading... </template>
  <template v-else>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </template>
</TFetch>

ok thats not too hard. as i said its simple package and maybe i extend it more it future. if you like this pls share it :))

vue 3 ecommerce

Tofiq Hamzaie — Sat, 24 Apr 2021 19:14:14 +0000

i create a repo, a simple ecommerce template with cart and use a lot of things that a vue developer needs for basic app. ui maybe not perfect but these what i used in this project:

a good folder structure(sort by feature)
build a cart with vuex
use plugins
create components for vanilla js libraries
countdown timer
dropdown
sliders
gallery
rating

source code: https://github.com/Tefoh/vue-ecommerce-template .
demo: https://vue-ecommerce-template.netlify.app/

i hope this will be useful for you :))

eloquent relationships in 8 pics

Tofiq Hamzaie — Sat, 13 Mar 2021 12:23:34 +0000

here's the laravel eloquent relationships in simple example(from docs).

1- one-to-one

2- one-to-many

3- many-to-many

4- has-one-through

5- has-many-through

6- one-to-one-polymorphic

7- one-to-many-polymorphic

8- Many-to-many-polymorphic

edit

9- has-one-of-many

use bootstrap 5 in react

Tofiq Hamzaie — Thu, 25 Feb 2021 22:34:42 +0000

In following use bootstrap 5 in vue correctly post here we will see how use bootstrap in react application. because bootstrap 5 drop support jQuery we can easily use it without an ui framework like React Bootstrap. first we load bootstrap styles and then we use bootstrap modal to see how bootstrap javascript actually works.

install react with CRA

first we install react application with create react app. to install react app run this command:

npx create-react-app react-bootstrap

then go project directory, install dependencies and run the CRA server.

install bootstrap 5

now the react app installed we should install bootstrap and node-sass for compile scss files. run this commands:

yarn add bootstrap@next node-sass

now we can load bootstrap styles. in index.js file we can easily load bootstrap.scss like this:

import 'bootstrap/scss/bootstrap.scss'

if we use bootstrap classes for e.x. btn classes like <button className="btn btn-primary">test</button> we will see styles applied.

use bootstrap modal

bootstrap besides the styles give us some javascript that make our life easier and modal is one simple example. for this we will use bootstrap docs modal example. you can use this in any component template.

{/* show btn Modal */}
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

{/* Modal */}
<div className="modal fade" id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div className="modal-body">
        ...
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" className="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

there is two parts here one is the button show the modal and second part is the modal. so if we use this nothing works, why? because we just load styles not bootstrap javacript. so we load it too. with import { Modal } from 'bootstrap' we can load only the bootstrap modal javascript part, awesome. but we will get an error that says @popperjs/core package not installed. lets install it with this simple command:

yarn add @popperjs/core

bootstrap need this package for javascript part. now modal should works. nice :) but we havent use react vDOM too make this modal work lets do it with vDOM.

use virtual dom

react and vue use virual dom and because of that we use mostly with state in this frameworks but when we need to use dom elements not state like when want to focus input we should use refs. there is two ways to use bootstrap javascript one using data-bs, two use javascript. with second way we can use refs to make modal works. bootstrap docs says we can use it like this:

var myModal = new Modal(document.getElementById('exampleModal'), options)

Modal is the one we imported earlier. we can replace document.getElementById('exampleModal') with our ref and we will name our ref exampleModal. we will need a state for modal to show and hide the modal. and for that we will use react hooks:

const [modal, setModal] = useState(null)
const exampleModal = useRef()

useEffect(() => {
  setModal(
    new Modal(exampleModal.current)
  )
}, [])

with modal.show() we can show modal and for hide just use hide method and the button for show modal will be like this:

<button type="button" onClick={() => modal.show()} className="btn btn-primary">
  Launch demo modal
</button>

and now we use vDOM to use bootstrap modal. good job :)) the hole simple component will be like this:

import { Modal } from 'bootstrap'
import { useState, useEffect, useRef } from 'react'

function App() {
  const [modal, setModal] = useState(null)
  const exampleModal = useRef()

  useEffect(() => {
    setModal(
      new Modal(exampleModal.current)
    )
  }, [])

  return (
    <>
      {/* show btn Modal */}
      <button type="button" onClick={() => modal.show()} className="btn btn-primary">
        Launch demo modal
      </button>

      {/* Modal */}
      <div className="modal fade" ref={exampleModal} tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" className="btn-close" onClick={() => modal.hide()} aria-label="Close"></button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" onClick={() => modal.hide()}>Close</button>
              <button type="button" className="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

Summary

we created a react application and installed bootstrap. then we used bootstrap modal with data-bs and easy way but after that used react vDOM and correct way. i hope this short post helped, i covered this topics in my course and shared my little Knowledge about this topic.

use bootstrap 5 in vue correctly

Tofiq Hamzaie — Wed, 24 Feb 2021 15:15:20 +0000

In this post we will see how use bootstrap in vue application. because bootstrap 5 drop support jQuery we can easily use it without an ui framework like bootstrap-vue. first we load bootstrap styles and then we use bootstrap modal to see how bootstrap javascript actually works.

install vue with vitejs

first we install vue application with vitejs. you can use vue-cli if you want but here it doesnt matter. for install vitejs app run this command:

npm init @vitejs/app

meanwhile this will ask you project name and application template. for template select vue. then go project directory, install dependencies and run the vitejs server.

install bootstrap 5

now the vue app installed we should install bootstrap and sass for compile scss files. run this commands:

npm install bootstrap@next
npm install -D sass

now we can load bootstrap styles. in main.js file we can easily load bootstrap.scss like this:

import 'bootstrap/scss/bootstrap.scss'

if we use bootstrap classes for e.x. btn classes like <button class="btn btn-primary">test</button> we will see styles applied.

use bootstrap modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

there is two parts here one is the button show the modal and second part is the modal. so if we use this nothing works, why? because we just load styles not bootstrap javacript. so we load it too. with import { Modal } from 'bootstrap' we can load only the bootstrap modal javascript part awesome. but we will get an error that says @popperjs/core package not installed. lets install it with this simple command:

npm i @popperjs/core

bootstrap need this package for javascript part. now modal should works. nice :) but we havent use vue vDOM too make this modal work lets do it with vDOM.

use virtual dom

vue and react use virual dom and because of that we use mostly with state in this frameworks but when we need to use dom elements not state like when want to focus input we should use refs. there is two ways to use bootstrap javascript one using data-bs, two use javascript. with second way we can use refs to make modal works. bootstrap docs says we can use it like this:

var myModal = new Modal(document.getElementById('exampleModal'), options)

Modal is the one we imported earlier. we can replace document.getElementById('exampleModal') with our ref and we will name our ref exampleModal. we will need a state for modal to show and hide the modal.

  data: () => ({
    modal: null
  }),

  mounted() {
    this.modal = new Modal(this.$refs.exampleModal)
  }

with modal.show() we can show modal and for hide just use hide method and the button for show modal will be like this:

<button type="button" class="btn btn-primary" @click="modal.show()">
  Launch demo modal
</button>

and now we use vDOM to use bootstrap modal. good job :)) the hole simple component will be like this:

<template>
  <button type="button" class="btn btn-primary" @click="modal.show()">
    Launch demo modal
  </button>
  <div class="modal fade" ref="exampleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" @click="modal.hide()" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="modal.hide()">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Modal } from 'bootstrap'
export default {
  name: "App",
  data: () => ({
    modal: null
  }),
  mounted() {
    this.modal = new Modal(this.$refs.exampleModal)
  }
};
</script>

Summary

we created a vitejs vue application and installed bootstrap. then we used bootstrap modal with data-bs and easy way but after that used vue.js vDOM and correct way. i hope this short post helped i covered this topics in my course and shared my little Knowledge about this topic.