DejaVue

Security is a topic that is often overlooked in the frontend world. But at least for you all - no longer! To make sure we cover Security for Vue and Nuxt applications as broad as possible, Michael and Alex are joined by Jakub Andrzejewski, who is not only a Senior Frontend Developer but also author of the Nuxt Security Module. We cover not only the module but also how to avoid common security mistakes as a Vue developer and how to protect your applications from vulnerabilities, and which are the most common ones.

Of course, we can't miss out on the State of Vue.js Survey, which is currently running and was co-created by Jakub as well!

Besides talking about the Security and the State of Vue.js, we also discuss how Jakub got into Vue.js at first and how he perceived the transition to Vue 3 and the Composition API.

Enjoy the episode!

Our Guest

Jakub Andrzejewski

Chapters

  • (00:00) - Welcome to the DejaVue Podcast
  • (00:12) - Introducing our Guest
  • (02:07) - The Nuxt Ecosystem Team
  • (07:47) - How did you get into Vue.js
  • (13:09) - Transition to Vue 3 and Composition API
  • (17:00) - React Livecoding as a Vue Dev
  • (18:10) - vue-vine for multiple components
  • (20:34) - State of Vue
  • (30:30) - The Nuxt Security Module
  • (37:36) - Will the module project you from everything?
  • (41:59) - The ShipFast incident
  • (45:05) - Ethical Hacking and NPM Security Vulnerabilities
  • (49:24) - Privilege Escalation at Shopify
  • (51:45) - Nuxt Security without a Server
  • (54:28) - More Logic in the Frontend
  • (55:38) - Nothing to Hide?
  • (57:28) - Security Mistakes to Avoid as a Vue Developer
  • (01:02:13) - Wrapping up

Links and Resources




Your Hosts

Alexander Lichter


Michael Thiessen


---

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Creators & Guests

Host
Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker
Host
Michael Thiessen
Full-time Vue educator
Guest
Jakub Andrzejewski
Senior Developer at Monterail & Nuxt.js Ecosystem Team
Editor
Niki Brandner
Sound Engineer

What is DejaVue?

Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.

Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.

Michael Thiessen:

Welcome to DejaVue.

Alexander Lichter:

It's your favorite Vue podcast. You just don't know it yet. And as usual, the microphone's here. I'm with Michael Thiessen. Michael, how are you doing?

Michael Thiessen:

I'm doing pretty good. How about yourself?

Alexander Lichter:

Yeah. Also fine. Also fine. And of course, today, we're not alone here. You know, we have some really interesting topics to cover with our special guest, Jakub.

Alexander Lichter:

Jakub Andrzejewski. How are you doing, Jakub?

Jakub Andrzejewski:

Yeah. I'm quite good. And I'm quite amazed that you pronounced my last name correctly, which is is not an easy task. So I'm pretty, pretty fine. Yeah, I was looking forward to join this podcast and speak with you guys.

Jakub Andrzejewski:

I met you like a few times already on the conferences, so it is great to meet once again, but this time, virtually and with our guests for the podcast.

Alexander Lichter:

Yeah. Sounds great. So maybe why don't you introduce yourself, Lobo? Tell us what you're doing as day job and, a few affiliations. I mean, most of the listeners that are also into Nuxt might notice you're part of Nuxt ecosystem team, but there's probably more to discover here.

Jakub Andrzejewski:

Sure. So my name is Jakub, as you already introduced me, and I work at Monterail. I joined, last, I think, 2 or 3 weeks ago. So it's quite fresh. And I joined as a senior front end developer.

Jakub Andrzejewski:

But I'm not only working as a developer in web development, but I also joined to help the company come back to the role of being very, very popular in Vue community. So it's both like development and marketing. So there is a lot of interesting initiatives for Vue and Nuxt we have in the pipeline, so expect to see them. And about one of them, I will be talking about today as well, which I'm pretty, pretty happy about. So apart from that, I'm also a Google developer expert in web performance.

Jakub Andrzejewski:

This is one of the topics that I really focus on while developing applications. And as you mentioned, Alex, I'm also part of Nuxt's ecosystem team where I help Nuxt grow in terms of maintaining the certain modules. You might know me from, like, security modules or integration modules such as Cloudinary or Algolia.

Michael Thiessen:

So the the ecosystem team, that's something I'm not super familiar with. So there's the core team. So Alex is on the core team working on the the framework. Does that mean, like, the ecosystem team is working with modules and, like, different, yeah, maybe maybe you could explain it better than than I can.

Jakub Andrzejewski:

Sure. Yeah. So so the thing is that the name for this ecosystem team was evolving throughout the years. It was first maintainers, then insiders, then right now it is an ecosystem team. So it was kind of difficult to name this kind of role purely because it is a mix of everything.

Jakub Andrzejewski:

Because if you are part of the ecosystem team, you can be maintaining modules like open source modules for Nuxt that help the overall community of Nuxt have much more functionality than what just the the core framework delivers like for example the integrations or things like i18n, maybe integrations with other third party services like for example Prismic the module that Lucie is maintaining. So this I would say is like the main job of a person who is part of ecosystem team but also if you're part of ecosystem team you can for example be at the conferences speaking at like Vue JS Amsterdam, Vue JSDE and so on and so on speaking about Nuxt so you somehow act like an ambassador for Nuxt. You can also be responsible for helping community in the discussions like solving issues, answering questions. So I would say that the difference between the core team and the ecosystem team is that the core team is evolving the the main framework and working with it while the ecosystem tries to help the core team as well, but maintaining the everything that it's like around the framework where you cannot basically do everything. That's why Daniel, who is maintaining like all the idea for like open source part of next, he created this core team of the people who are closest to him.

Jakub Andrzejewski:

And then he also created this another circle of people who are helping both him and other core team members to grow Nuxt, but not framework specifically, but more the ecosystem of of plugins, modules, and the overall, like, vision and awareness of Nuxt as a framework. I really like answer.

Michael Thiessen:

Yeah. No. It's it's it's good. I'm glad that you talked about it. So we can, like, bring more awareness to the fact that there are all these other roles in open source beyond just contributing code to or even just you know, or even docs, which is more commonly like, people are are aware of that.

Michael Thiessen:

And, so last week, Alex and I were at VueConf Toronto, and we we did a panel, which you may or may not be seeing or have seen, depending on when things get published. And in that, I think it was Evan who brought up this idea that there's a lot of people contributing to open source, and they're not contributing pull requests, and they're not fixing issues. One example that he had was someone who just, like, takes an issue and does a really big deep dive and comes back with, like, this report on, you know, the things that they tried. They looked at the code and did all these things. They didn't contribute code, but they did contribute a whole lot of value there, or people who go through and, like, triage issues and organize things and, you know, people who are in the Discord, like you mentioned, like, solving things or, like, people at conferences, people there's, like, this whole ecosystem.

Michael Thiessen:

Right? I think that's a really good word for it. There that are like, there's all these other people contributing to the project and making the project good and better and, like, helping other people actually use the thing beyond just writing code.

Alexander Lichter:

100%. I also want to add there that, like, being part of the team is also interesting because it was closed, like, not to say non public for a while. And now for, like, I think a couple of weeks ago, it eventually opened up. So, like, okay, look, in the end, it's more of a, let's say, part of a recognition. So, like, okay, you contribute to the ecosystem, so we want to invite you over so you can you can share stuff.

Alexander Lichter:

But, of course, people can also proactively say, hey, I have I'm building a module. I'll do cool things. Or, Jakuub, as you all said before, okay. Speak a conference, but I'm very passionate about the project, and I have more time. What can I spend it on?

Alexander Lichter:

How can I help? And then in the end, yeah, be part of the ecosystem team. And there are so many ways to contribute. I'm really happy to to also see that people are, let's say, rewarded in a way even though it's, let's say, only with with, like, okay. Hey.

Alexander Lichter:

You're part of the team. It's not, like, monetary value on that. But just saying, okay. Look. These are contributions, and and in the end, they they are valuable.

Alexander Lichter:

We all know that. But here is at least here, you can you can see that that's the case. So, yeah, really nice, that this is this is public, that there's a really nice name for that. As you know, as it was also mentioned, yeah, the finding names is hard. We all know that.

Alexander Lichter:

I think ecosystem team fits fits pretty well.

Alexander Lichter:

And maybe coming from the Nuxt ecosystem, if this let's go a few steps backwards. I mean, you didn't start programming. It's like, hey. Let's let's do a bit of Nuxt.js So maybe briefly, how was your summary from your the summary of your story from from getting started with programming, going into Vue. Js, and eventually landing where you are right now?

Jakub Andrzejewski:

Sure. So it was an interesting journey for sure because I haven't started with Vue. I started with React actually, because at my university, we didn't have that complex or advanced lessons in programming. We had like some basic PHP and HTML CSS. So there was no something let's say modern for modern web development so we had this kind of like student association where I joined and we were using react there and we are both learning and teaching at the same time because there are people who are less experienced so we try to help them as well so my actual start was with react not with vue But since I started, it with React, I felt that something is not, not right there, that there are some things that just don't fit my style, let's say, of building web applications.

Jakub Andrzejewski:

And then suddenly I was looking through some I don't know whether it was like LinkedIn or Twitter, probably LinkedIn. And I noticed that there is a website called Vue Mastery, which was actually my introduction to the Vue concept and I remember out like with all the details when I was building this very simple website with socks like Vue master with socks which was like a first introduction to to Vue And I instantly liked it. I like the syntax, I like the reactivity, I like the name, the colors, like everything fit perfectly so I thought that this is my place to join. But the thing is that you don't always start already to contribute. You start using it, you use it in a project, 1 or 2 or 3, and then you realize that there is something, but it's actually an open source, which is a bunch of big, bunch of, of packages and tools you can use for a project.

Jakub Andrzejewski:

And if you start your journey with development and specifically with Nuxt, you will just probably think that the guys who are building this kind of modules or plugins, they have to be some kind of like rock stars or magicians to build that. And you have to be in some way like unique, special, and then great. But the thing is that everyone can build their own software and make it open source and make it public. So at a certain point, I thought to myself, maybe I will try as well, but let's just try it. It doesn't have to be great.

Jakub Andrzejewski:

It doesn't have to be next, like, Vue.js framework. Let's try to build something simple.

Alexander Lichter:

I think that's definitely a key that you mentioned here. Like, okay, just get started, like, get your hands dirty. It's so good for learning and like eventually grow by putting yourself out there. Right? Like, being also able like, open for feedback.

Alexander Lichter:

I have a similar story in the end where open source was basically my coding mentor. People reviewing PRs, people going through things, like, hey. Okay. We can improve this and that or just reading. Where you learn so much.

Alexander Lichter:

So really, really nice to see also going, the same way, so to say.

Jakub Andrzejewski:

Yeah. Yeah. So apart from that, I went to 2 companies where I stayed for a year. Each I stayed for a year.

Jakub Andrzejewski:

In the first one, it was actually a very interesting story.

Jakub Andrzejewski:

I talked to Evan about it, I think, last year at the Vue.js Live. We were basically building a software for television set top boxes, which are those devices that are used to run like your TV and shows and stuff. So we were building software for this set top box device. So we were using Vue.js to build all those channels, streaming, picture and picture, stuff like that.

Jakub Andrzejewski:

So it was really interesting challenge to use web framework for that. And we were using Cordova under the hood to transform it into a Android application because this device was actually running a certain version of Android. So it was really interesting challenge. And I believe that when Evan was introducing Vue, he never thought that someone would use it for that. But, hey, we did it.

Alexander Lichter:

And it was successful, right? So

Jakub Andrzejewski:

Yeah. Yeah. It was working. It wasn't the most performant because if you compare it to, for example, native solutions like embedded, it never can be the same. But still, it has a it had a really nice UI.

Jakub Andrzejewski:

That's what we did. It was great. Then I joined a company where I was working in developing an e commerce shop. And then after another year, I joined Vue storefront, which is right now named or called Alokai, where I stayed for about 4 almost 4 years. And right now, I joined Monterail to do something with you as well.

Alexander Lichter:

Here we are. So when when you said you started and came over from React to Vue, that was Vue 2, right, like, back in the time. How was the transition for you from, like, Vue 2 to Vue 3 in terms of, the classic, like, composition API versus options API? Though, you can also still just say, like, okay, just bump the major versions fine. But how did you feel that whole period of the ecosystem?

Jakub Andrzejewski:

So first of all, I really like that the migration was done slowly. Like, it wasn't that Evan just announced today that everything is going to be broken and we transitioned to a new version. At first, I wasn't really into view free and the composition API. I was a huge fan of options API and I really like this interface And I felt that the composition API reminds me too much of React. But honestly, when I started developing with it, I felt instant boost in productivity in terms of the things that I can do that basically work, and I have to do less work to make it work.

Jakub Andrzejewski:

In general, the new approach seems to be something that makes me more productive, especially if you join it or merge it with some great tools by Anthony Fu, such as the auto imports, for example. This is one of my favorite things in web development is when you have the same result, but you have to write less amount of lines of code.

Alexander Lichter:

And it's still readable, right?

Jakub Andrzejewski:

It's perfect. It's still readable. It still works. It still handles some conflicts, so it doesn't mean that it will break. It handles conflicts smoothly.

Jakub Andrzejewski:

So kudos to Anthony for that and many other projects he built.

Alexander Lichter:

And would you say that now when, I mean, you also have, like, for example, at your previous company also right now, like, new people getting onboarded, they learn Vue. Do you feel they have a, like, they have a hard time with the composition API, or do they even only learn the composition API at both APIs? Do you have any insights on that?

Jakub Andrzejewski:

So I would say that if you're joining a Vue project that is already using composition API, I believe the syntaxes can be cleaner and easier for the newcomers to learn it. However, if you as I as myself, for example, if you get used to the the options API and you liked it, the transition might not be so smooth because there were things that were done very clearly the options API. But still, as I said, I think that for the people who are joining the new project, which is built with Vue 3, it's, for example, much easier for them to transition from React, I believe, with Vue 3 than, for example, with Vue 2 or Vue 3 with options API.

Michael Thiessen:

I think there's some level of, like, not being familiar with the new thing that you have to get over. So I had had a similar experience with options to composition API. And also, I also started out with React and went over to Vue because I I switched jobs. And at first using Vue, I didn't like it, but it was only because, like, I knew how to do the thing in React, and I would be like, well, I know exactly what to do in order to make this happen. But with Vue, I've gotta, like, read through the docs and try something that didn't work and then, like, Google some more things and then eventually figure out how it works.

Michael Thiessen:

And so it was more painful and and harder to do. But once I learned Vue, I liked it a lot better. And same thing with the conversation API. Once I learned it, I liked it a lot better. It's really hard to know, like, okay, do I not like this new thing, or is it just harder?

Jakub Andrzejewski:

I'll tell you one more interesting fact. When I was switching jobs and I was looking for a new one, in one of the companies I needed to do a task which involved me or I need basically needed to develop something in React, which I'm not proficient with, and it was a live coding session, and I wasn't prepared for it. So that was a really, really interesting challenge just to try making it work on stagblitz or on a code pen just from guessing based on my experience from 6 years ago when I first tried it. It was really, really interesting challenge, honestly, just to figure out in your head how it could work in React Yeah. While you have everything in Vue, like things, for example, the the templates, like, looping over arrays in Vue in the template.

Jakub Andrzejewski:

This is done differently in React

Alexander Lichter:

Going through the JSX.

Jakub Andrzejewski:

Yeah. Yeah. So so it was an interesting challenge, honestly. And it reminded me a lot of React, and it also reminded me why I am not a fan of this approach.

Alexander Lichter:

That's fair. It's very interesting though that, like, JSX is obviously not that, popular, especially in the Vue community, though you can use it with Vue, and some libraries like Vuetify, for example, are are doing that under the hood. And there is a new tool that I like, not that new, but, tried out once again recently. It was called Vue vine, where you can, basically write multiple components in a single file, and then you have still the Vue templates. So it's not JSX, and you write, like, a little tag template function in front.

Alexander Lichter:

So you write, like, a Vine and then the backticks, and in there, your template. And that's all in a function that is for some of your components. So I found it very interesting. Made a video about it. A lot of people were like, oh, yeah.

Alexander Lichter:

That looks so much like React. It's horrible. On the other hand, I I hear so many people like, oh, why can't I add this tiny component in the same file because I don't need it anywhere else? And yeah. Well, I guess there there are a lot of different and, interesting opinions there.

Michael Thiessen:

That's the one feature that I miss from React is being able to create these, like, small one off components that you can keep just like in the same file. You don't export them. You don't use them anywhere else, but you can have, like, these little reusable bits. And there's not, like, a great way to do that in Vue. But maybe maybe in future versions, there will be something.

Michael Thiessen:

Who knows?

Alexander Lichter:

Well, at least with Vue vine, it works well. Plus you get all the compiler benefits, so worth trying out. But I guess if someone says, like, yeah, that should go into the core, then we have a big, revolt in front. People have the the pitch the the forks and the the torches.

Jakub Andrzejewski:

And the torches. Yeah.

Alexander Lichter:

Yeah. So so let's see. But, yeah, I also think I I love single file components. Like, I I really enjoy using them. But, exactly, this is the one downside where it's also like, hey, if we have, I don't know, 90% of single file components also all cool.

Alexander Lichter:

And then we have that one different format if you need it differently. Though then, of course, people started saying, hey. We already have 10 different ways of writing a Vue component. Do we need another one? And, yeah, it's it's of course, it's very tricky.

Alexander Lichter:

But on the other hand, luckily, with the Vue compiler at hand and everything, people can build these solutions for themselves. So it's it's all possible, which is once again so fascinating that you can see, okay, even if you use a different way of, like, besides render function, besides JSX, but still using the Vue templates syntax, and then compile it yourself with a plugin is, yeah, it's pretty amazing work that has hasn't happened there.

Michael Thiessen:

So we all have these different opinions on Vue. And if we wanna share our opinions, there's a great place that we can can go to do that. Am I right?

Jakub Andrzejewski:

Yeah. So there is a very good place, as Michael just suggested, where you can share what you like and how you use Vue and Nuxt. Because as I said, I joined Monterail. And right now at Monterail, we are doing another edition of, state of Vue.js report that will be live next beginning of next year, 2025. And right now, what is currently live is the survey that you can participate in and share your experience with Vue and Nuxt.

Jakub Andrzejewski:

And it's extremely important not for not only for like Monterail company, but for every Vue developer because it gives everyone information about how Vue is used, what are the tools, popular tools in Vue, what are the popular styling frameworks that are used with Vue and so on and so on. So with state of Vue, report next year, what you will learn is basically everything that is currently going on with Vue, with some statistics apart from just the survey, we will have case studies, migration from Vue 2 to Vue 3 and from Nuxt 2 to Nuxt 3, which are really interesting case studies. We also have a section about Nuxt, specifically. So there is a lot of interesting details that will be there that I cannot share yet. Like, I cannot share everything yet, but I promise you it will be it will be worth it to wait.

Alexander Lichter:

Sweet. So everybody who is, ready right now or after listening or after, I don't know, driving your car right now. So don't please don't just, like, put out your laptop now if you're driving. Right? Do it afterwards.

Alexander Lichter:

Fill out the yeah. Fill the survey out in the in the show notes or in the description, there's a link. But what I'm really curious about I mean, I filled the survey already. I wonder why another survey? So we have, like, State of JS, which we mentioned in previous episodes and also to everyone. That's also in the show notes. Again, if you haven't done that, fill it out and represent your favorite framework and podcast and content creators. So so why why is state of Vue?

Jakub Andrzejewski:

Specifically, just to know what things are currently going on in the Vue world.

Jakub Andrzejewski:

Because what you said is true that you can also feel the state of frontend or state of JS. But the thing is that state of JS is very broad topic. Right? You have multiple frameworks, multiple tools. And with the state of Vue, what we want to achieve, with the committee is to just get information about Vue, about Nuxt specifically, maybe some, as I mentioned, the case studies of of interesting companies that are using using Vue in in production.

Jakub Andrzejewski:

And for what for actual what case studies or or use cases they are using Vue because I'm certain that they are using it for much different projects, like each company is using it for something different. So it's also great to know how people are using Vue and what issues they have. Because apart from just mentioning describing what case studies they are, we also mentioned what problems companies have, are facing right now and how they solve it with Vue or how they solve it in Vue because they might encounter it in in while using it in the Vue applications. But in general, it's a really, really good resource of knowledge about the current state of Vue and Nuxt. So it's a must have to read beginning of next year.

Michael Thiessen:

Yeah. I'm really looking forward to this also for myself as as someone who does education to sort of see if there are ways that I can change where I'm where I'm going, if there are areas that people are struggling with that I can, you know, help out with. So I think, yeah, that'll be really interesting to see. There's, like, different questions here.

Michael Thiessen:

I've been going through it a little bit on, like, how are you writing components? And so that, like, I think it's it's just interesting to see what other people are doing because you only have the the context of what your company is doing. Maybe you've got some friends who are also writing Vue, but, like, if you're just writing composition API, you don't know if there are other people writing options API, or are there people writing components with the class based syntax, or has everyone just, like, moved on from that? You know? And so it's really interesting to see all these different things and to to get a better understanding of what the whole ecosystem is like and what people are actually using Vue with and how.

Michael Thiessen:

Yeah.

Alexander Lichter:

And I I guess it also as you said, like, it it helps a bit to get the bigger picture even though, like, for example, in my case, I see a lot of projects, but still these are a tiny subset. Right? So you still, I don't know, maybe 1, not even 1 percent of, like, the the bigger projects. Also, these usually have some, let's say, problems, issues, whatsoever, which is why I'm there to help her out. So that's a good point.

Alexander Lichter:

And also getting the bigger picture of, like, yeah, which libraries, tools, and so on are used and how happy are people with you, I guess. So when it comes to the survey, Jakub, do you have any insights on how the the questions were chosen of, like, basically how the whole survey was created from the base on?

Jakub Andrzejewski:

Sure. So I, joined, let's say, just in the moment of the server being created. So I also contributed in creating those questions. So how we did it is we tried to get the most, interesting questions and maybe not the questions, but the topics that are currently, like, let's say hot. Right?

Jakub Andrzejewski:

So the frameworks and the, the plug ins, the tools, how we use Vue, how long we use Vue in our projects. So I joined the company right in time for that, and I will be contributing a lot to just the state of Vue report next year. But apart from me, there are also a few people from the company who are contributing to the creation of both the survey and state of view. For example, it's Szymon Licau, who is the engineering manager at Monterail. He's also contributing a lot to both state of Vue and the and the survey.

Jakub Andrzejewski:

And we also have, other developers from the company that they haven't met yet because this is my 3rd week where I'm still onboarding, so I haven't met them yet, but I know that they they were contributing, and they will contribute as well in the future for for the, state of view report. So it wasn't created by one person. It was also joint work with the marketing team who are doing the initial research of the audience, of the questions we should create, and what topics we should cover, and how we can we can actually put these results of the survey into the overall state of view report. Because as I mentioned, state of Vue report will have the data from the survey, but it's only one chapter. And we plan 8 or 9 chapters, I think.

Jakub Andrzejewski:

So each chapter is something different and the survey is only one of them.

Alexander Lichter:

Great. So that means we get a lot of data, a lot of probably also opinions from experts, around the world, from industry leaders, from companies. So having a broad picture on the Vue ecosystem.

Jakub Andrzejewski:

Hopefully, yeah.

Alexander Lichter:

That's the plan. Then it will be available online. What's, what's the plan for distribution?

Jakub Andrzejewski:

So, in terms of the report, I think I would have to check, but I think that the plan is to make it, live online, but also to announce it as well during one popular view conference that you might know, and you will be probably speaking there. So I see. That's the plan.

Alexander Lichter:

Nice. Yeah. I I remember that that happened in the previous year year years, 2 years ago, something like that, as well. And that was, was very exciting.

Jakub Andrzejewski:

Yeah. So that's the plan. We will see how it goes.

Alexander Lichter:

Well, then once again, folks, fill it out. It's also like it's not that it's not that long. I remember I was done in 5 minutes or something, not even that.

Jakub Andrzejewski:

Yeah. We value the time of the developers. When we know that we don't like very long forms. So that's why we decided to select only this amount of questions so that you will spend probably between 5 to 10 minutes for for a service so that it doesn't take too much of your time.

Michael Thiessen:

Yeah. So once again, if you haven't filled it out yet, go fill it out. Help us out. Help everyone out. Help yourself out.

Michael Thiessen:

And, yeah, we'll get some more data.

Alexander Lichter:

Exactly. And while you're on it, of course, state of JS, straight do it afterwards as well. All it's all very helpful because in a way, it's like, oh, you have all these surveys like Stack Overflow and the JetBrains survey and the state of JS and the state of HTML and CSS and the state of Vue and the state of front end. And, yeah, I I also understand it's like, okay, it's it's that time of the year again. We have to fill out our journey service. On the other hand, of course, it's it's really important for also for community, especially something focused like, the the state of view to just figure out where a big part of the community stands on and, giving also other people reassurance, hey.

Alexander Lichter:

We're doing the right way. Maybe hearing something also about the future of Vue. Js, how people in the community see that. So yeah. I I think that's, that that's a good point here to, make it happen.

Alexander Lichter:

And from making something happen, there are certain things that we shouldn't, like, make happen, which is, for example, issues with security. So coming coming from a very bad transition over Jakub, you you've maintaining the the Nuxt security module for a while. So I was mainly wondering, could you tell us a little bit about how that came up and why are you that interested and also experienced in terms of security?

Jakub Andrzejewski:

Sure. So the interesting part about it is that I remember the exact day when I created this module because it was on the way by train to Vue.js DE conference 2 years, 3 years ago in Berlin, where I first met Alex. So, I was getting bit bored while I was in the train. I already finished my talk, so I had some time and actually surprisingly good Internet connection, which isn't, often in trains. So I thought to myself maybe let's try to build something that I haven't been done before because this was what I was also struggling with trying to build something unique And I wanted to build it with my first and most, liked framework, Nuxt.

Jakub Andrzejewski:

So I was looking for ways how we can, both me and other users who will be using the this module, how they can get a benefit in terms of software quality, where they wouldn't need to do a lot of things. Because I honestly really enjoy working with software, with plugins or modules that just work. And this is a reference to this Skyrim presentation. It just works. But in general, it just works.

Jakub Andrzejewski:

So you find the module. You see that it provides the functionality that you would require in a project. And it comes with a set of defaults that will work for majority of projects. So you don't need to configure anything. It just works with, as I mentioned, the good defaults.

Jakub Andrzejewski:

But if you want to customize it, maybe your projects has some more advanced needs, you still can do it. You can customize each part of it in a way that it doesn't require you to learn a new programming language. But it's configurable through properties like Boolean properties or our string properties or basically anything that you are familiar with while working with JavaScript or TypeScript projects. So then I thought to myself, maybe let's try to do something that my father is doing as his job because he's like the security manager at his work. And I thought to myself, maybe let's try to build something that can be related to what my father is doing because he was also push always pushing me to go for IT.

Jakub Andrzejewski:

But he wasn't he was sure that I won't be following exactly his steps because he is like a born engineer while I am developer. These are different terms, let's say, purely because he can do stuff with computers like open them up, fix everything inside, and close them up.

Alexander Lichter:

The hardware parts, so to say?

Jakub Andrzejewski:

Yes. Yeah. Well, I work with the software more more or less. So I thought to myself, maybe let's try to merge my web development knowledge with his knowledge in terms of security and securing web applications and try to merge it into something usable for the Nuxt, and Vue developers so that they can get something for free without any configuration needed. But if they want to configure it in any way, they can do it without troubles.

Jakub Andrzejewski:

So that was actually the born of the Nuxt security module, which aims to help and make your app more secure by default. So with the default setup, what you get is you basically configure the module configures your application to follow OWASP and OWASP top 10 recommendations. So in general, what OWASP is, is an organization that focuses a lot on improving security of applications, software applications, it doesn't necessarily mean that they focus only on web applications. They focus on applications in general, but they also have a big section about web applications.

Jakub Andrzejewski:

And for example, OWASP top 10 is a document that is updated every 2 or 3 years, I think, where they list top 10 web accessibility risks, the most popular security attacks that you can get for your web application.

Jakub Andrzejewski:

So there are things like broken access control, rate limiting. Rate limiting is a way of protecting against, but in general, denial of service. I will be probably talking about it a bit more in a few minutes. But in general, these two things like OWASP and OWASP Top 10 aims to help developers build more secure code, more secure applications. So what Nuxt Security does is that based on these recommendations, it configures your Nuxt app for you so that your Nuxt application is following those security recommendations.

Jakub Andrzejewski:

And basically, as I mentioned, without anything from your side, it makes your app more secure. So we get things like configured response headers, such as content security policy, for example. We get things like rate limiters or cross site scripting protection, things like that. That all come by default when you install the module. And then you can configure everything, every part of it.

Jakub Andrzejewski:

Like if you have a rate limiter, it has some defaults, as I mentioned. But if you like it to work a bit differently, so maybe, for example, you want to, for certain endpoint or for certain subpage, like, for example, slash login, we want to make the amount of requests to be lower than the default that is set by Nuxt Security, after which the user will be blocked from accessing the website. This is something like banning the the IP address that, for example, is that the attacker uses to break our application.

Alexander Lichter:

I see. But so so let's let's go in there because I think maybe some people listening might not be aware of, like, what a current security policy is and so on and so on. But before we get into these terms, if you install the Nuxt security module, you said, like, cross site scripting, that's probably what a lot of people have heard about before protection. It's not like you're magically protected against everything. Right?

Alexander Lichter:

So it will it will make it better, but the user itself still has to do a few things not in terms of configuration, but, well, not, not messing it up, so to say, I guess.

Jakub Andrzejewski:

The general idea is that the user doesn't have to do anything purely because, as I mentioned, it follows those good practices. But as in every software development project, they are different cases, different business needs. So that is why user can customize everything, like, the value of certain response header, the whether certain, for example, middleware should run-in general. Like, if you don't like the rate limiter that comes with next security, you can also disable it completely so that you can get everything else but apart from this particular middleware. So the idea was to deliver something that will help majority.

Jakub Andrzejewski:

And for the minority that cannot benefit from the default preset, give them an opportunity to configure it in a way that it will eventually help them by customizing it, enabling, disabling.

Alexander Lichter:

Yeah. Yeah. That that makes that makes a lot of sense given that, like, Nuxt also follows the philosophy in, I would say, view as well of, like, sensible defaults and make it work for the 80% cases and, like, it'd be configurable otherwise. But circling back to the cross site scripting, let's say you use the good old v vhtml directive and you allow some user input, or, like, maybe even, I don't know, take the query string, from the URL. Is this also something that Nuxt Security would protect against and say, okay.

Alexander Lichter:

Even if you as a developer make that mistake, it will somehow intercept that and make sure it won't be able to, exploit the vulnerability?

Jakub Andrzejewski:

Sure. It will work for the second case you mentioned. It won't protect, the cases like v-html. But, what, for example, this cross site scripting protection does, it it scans it is a middleware that scans what goes to your server, like underlining Nuxt server in GET and POST requests as either the, the body or the parameters. And if there is a code that is then considered as a malicious code by the package we are using on the line to analyze the strings, then we are basically from this middleware, we are returning, the appropriate response code that will give you, as the user, also information that something is not something is not right.

Jakub Andrzejewski:

So if you are, for example, in development as a developer, you are, passing some very long string to the form, and you just want to see what will happen. And this string contains some malicious code like scripts or injections. What will happen is that this middleware will block this. It will intercept this request, and it will block it from from working, actually. So it won't let this code come, for example, to your database or to other users that can have this code injected into the applications.

Jakub Andrzejewski:

So I always say that these solutions, they won't work in every possible case, but for sure they will work for certain cases, which is better than nothing. Right? Because the alternative

Alexander Lichter:

Absolutely. Yeah.

Jakub Andrzejewski:

Is that you can don't install this module and try to basically implement those things by yourself, like trying to configure proper headers or trying to write some, for example, this middleware for lately meeting. You can do it your yourself, but you can also use module such as Slack Security and just configure it instead of trying to build this logic by yourself.

Michael Thiessen:

Yeah. I don't know if you you saw recently there was some, Internet drama about this one, indie hacker, this, like, popular indie hacker who created a boilerplate for building SaaS applications really fast. And the whole point of it was to ship fast.

Alexander Lichter:

That's what's the name was. ShipFast

Michael Thiessen:

Well, yeah. So, yeah. And basically the, the, the, the story to sum it up is he shipped a little too fast, and there were a whole bunch of security vulnerabilities in it, and someone was, like, hacking into it. And then, I think someone created some websites that would just, like, give random people access to this SaaS boilerplate without having to pay for it and, like, this whole thing. And, like, it's resolved nicely, this person.

Michael Thiessen:

Like, they they hired someone to help them fix a bunch of these issues. And so, yeah, I I think it turned out well, but just sort of like a cautionary tale of security is important and especially if you're building something that other people are then going to to use. But, yeah, like, it's a whole separate topic. Like, I I don't know anything about security and, like, you know, what response headers and things to do. And and even if I do read up on it or get chatty p t to tell me about rate limiting and whatever, like, implementing all of that is a whole tedious chore that I, you know, I frankly don't really wanna spend time doing.

Alexander Lichter:

That's fair.

Michael Thiessen:

And so just install the module.

Jakub Andrzejewski:

And from that point, I think it will be very good to also thank the amazing contributors that also contribute to the module because it doesn't mean that I do everything by myself. I get a lot of help from the community members, and, I can name one person specifically, Sebastian Reffrey, who is doing a lot of amazing work for for the module, helping me in almost every pull request that is being created, every issue. So but apart from from Sebastian only, we get also different people contributing to the module. For example, there was, Julian, who was also here in deja vu a few episodes back. And there was also Jonas.

Jakub Andrzejewski:

I'm not sure if Jonas was here in the deja vu. Maybe another episode. We will see.

Alexander Lichter:

Not yet.

Jakub Andrzejewski:

But in general, yeah, I got a lot of help there, so it's not just my success. I'm really happy to to share it and and give credit also to people who who did a lot. But Michael said

Alexander Lichter:

Very very important. Sorry. Very very important. It's nice that you give credits there to record this due. So, I wish more people would do that, especially also in in other communities, not to drop any names, but it's really nice to see that, that's how open source works.

Alexander Lichter:

Like, hey, we all work together and we all get credit for that is, is brought here. So, yeah, thank you for that.

Jakub Andrzejewski:

Yeah. So coming back, Michael, to what you said about this security security risks, there is a really interesting, security attack that was happening a few years ago, and it was actually discovered by bug bounty. For those of you who don't know, bug bounties like the competition for, let's call them ethical hackers. So the people who try to break existing applications, but they don't do it to make harm. But companies, big companies, they create those kind of competitions to allow people to try to break the applications and get money if they found something and they fix something.

Jakub Andrzejewski:

So it's almost like getting open source developers and telling them, hey, come to our project and break it, and we will pay you for it. So there is a lot of movement there, and the attack was really interesting, and I believe this is something that we should we we all developers Vue, React, every developer should be aware of because it's actually related to NPM, which is a package manner that we all use. So the attack was based on the fact that what attacker was doing is that he was creating the packages in public NPM registry with the names, exactly the same names as the packages that were available but only from private registries. So let's imagine companies such as PayPal, Facebook, or Meta, Tesla, Netflix that have packages, let's say @netflix/auth right? That are only available if you log today NPM, private NPM registry.

Jakub Andrzejewski:

So what this attacker is doing is that he is creating exactly the same names but under the public repository. So you as a user, you just type NPM install @Netflix/auth. And instead of getting this Netflix auth that should be installed from the private registry, from public registry instead. And what this code was doing is it was doing the so called reverse shell, which meant that if you had this package installed, someone could fire commands remotely on your device. So very interesting issue that can happen to any of us.

Jakub Andrzejewski:

So review your packages and make sure that they do what they're supposed to do. And just one final note regarding the bug bounty because, as I said, those ethical hackers that are getting paid for that, the guy was paid around $150,000 for this discovering this issue and delivering a a fix for that.

Alexander Lichter:

Which is one of the end, though. Like, I mean, a lot of a lot of companies so I think more companies should have bug bounties. Absolutely. And should proper properly pay, especially for, like, these high critical, like, security vulnerabilities. And then all the big ones, like, as you named before, like, okay, Microsoft who's has GitHub, they have NPM right now.

Alexander Lichter:

Right? Or, like, Google and and Meta and Netflix. They they all have these things, but also, like, some, let's say, medium to large enterprises should definitely do that. Just like, okay. Hey.

Alexander Lichter:

Look. Here's here's our guidelines. Here's here are, like, bug bounties that we definitely accept. Here are things like, I don't know if I can count up the user ID. Is this is this a security vulnerability?

Alexander Lichter:

For some companies, it might be. And for some, it's like, no. It's fine. They're all publicly available. So I I definitely I think bug bounties are really good things.

Alexander Lichter:

I think ethical hacking is is the way to go, so you don't have to I don't know. You should still hire penetration testers, but there might be people like, hey. I'm an independent security researcher. I found a bug that's reported. I actually that's a good reminder.

Alexander Lichter:

I should file a bug bounty, my myself because I think I found, not a tiny thing, nothing too big. I might share. There's an update on that. And do a fully responsible disclosure. So, like, tell the company, not publicly post, hey, there's a bug.

Alexander Lichter:

That's also another thing. But, yes, it's it's a really good thing. More people should do that.

Jakub Andrzejewski:

Yeah. And I have one more interesting story here as well because the issue I mentioned was primarily related to NPM. But recently, I think it was 2 years ago, there was also an issue with Shopify, popular e commerce platform. And the issue was that you were able to modify another person shop without being an owner of it. Because certain parts of the ecommerce platform of Shopify where you usually check for access control, right, if a person can submit or do certain operation.

Jakub Andrzejewski:

In one particular place in the settings where I think it was related to email notifications, you are able to change it to someone else's shop without being an owner of it. So what was happening is that when you were changing this email address, you are actually also becoming an owner of the second shop. So this kind of issues are extremely dangerous, honestly, if you can easily become an owner of someone else's shop.

Alexander Lichter:

Especially for stuff like Shopify, where you have, like, I don't know, gazillion of shops out there, and it's and it's in every version. And, like, okay, a privilege escalation is, of course, no fun. This is, like, huge. Plus the big issue, and now I think we circle slightly back to the to the boilerplate part is Shopify can roll out a fix. And for all, like, hosted instances, it will be deployed ideally directly if you have, like, automatic updates on and so on.

Alexander Lichter:

With boilerplates, it's a bit trickier. Like, if you if you do mistakes, like, oh, I didn't protect my API endpoints with a secret that you read in. And if you know the name of it, then they can just call them and, like, send a post request, and I'm fine. Yeah. How many people build applications with a boilerplate?

Alexander Lichter:

And there is no, like, module, like, nuxt security module that you just, like, bump because it's a problem in the actual logic of the application of the boilerplate. People just use it or copy paste it. What then? That's that's a really tricky situation to handle. While with Shopify, it's it's a huge people affecting it, but especially when nicely disclosed, it can be fixed.

Alexander Lichter:

If it's not sold as a 0 day exploit in some darker forum, that's great. So thanks to everybody disclosing these things. So, so yeah, that's, that's definitely a different, let's say, level of, of issue.

Jakub Andrzejewski:

Yeah. So I would also like to talk a bit more about the, the security in general, because, as you, Alex mentioned, and Michael as well, the Nuxt security works well. But in general, if we think about how by default this module works, it is about full stack applications, right? Because in order to be able to, for example, intercept certain requests that are coming to your Nuxt server, such as the rate limiting or cross site scripting, you have to have a server, like actual server. So what if we don't have an actual server?

Jakub Andrzejewski:

Our application is a static site, like statically generated or our application is SPA. So how should we handle security there? Right? So the issue is that if we don't actually have an access to a server, our possibilities are quite limited, because majority of things require, for example, this middleware to work. But what we still can use, and this is also what Nuxt Security is doing as well, So this means that if your app is a single page application in Nuxt or SSG, you still can use Nuxt Security.

Jakub Andrzejewski:

Honestly, and unfortunately, you don't want to get every feature of it, as I mentioned, because for some, you have to have the middleware. But what you get is you get a content security policy for something that it's called, it's a meta tag with the attribute called HTTP equiv, which is like HTTP equivalent. And how it works is that you can get the content security policy that is usually a response header that is coming from your server to the to the browser, the client. So you can get exactly the same functionality as this response header, but in your single page or SSG application via the meta tag. This is not like groundbreaking and it won't protect you from everything.

Jakub Andrzejewski:

But hey, it's something, right? It's something that comes out of the box that can help you help your application be more be more secure. So in terms of securing like SP applications and SSGs, it doesn't only end on just like adding this meta tag because I believe that right now a lot of functionality is being transferred from back end to the front end.

Jakub Andrzejewski:

So we have full stack applications like Nuxt or frameworks like Nuxt, where we can basically, by using modules or integration such as Supabase, such as recent, we can basically use our front end framework to build full stack applications without actually having any kind of back end knowledge. Right?

Jakub Andrzejewski:

Because this is also the aim of tools such as Supabase and and and recent to allow front end developers do what usually is done on the back end. So with this approach where we are moving more and more functionality from the back end to the front end, I believe that as front end developers, we have to focus on the security aspects as well. But what I mean by that is that we should focus on being aware of security risks. If we are aware that there are situations where, for example, someone can get access to certain website while he shouldn't be able to get this access. If we have this awareness, we know that we should protect our application against it.

Jakub Andrzejewski:

So we might think, oh, but my application is not it doesn't have any confidential data, right? But there are cases, for example, when in your application you have a page that is only available for admins. Right? And maybe inside this page, there will be something that is confidential. And you just thought, but, you know, someone no one will look at it, right?

Jakub Andrzejewski:

No one will say my website slash admin, right? No one will do that. But the reality is that they will do that. So what I'm trying to say here is that we should all have this kind of mindset that we should be aware of issues like security issues. We don't have to always develop solutions that protect against everything because it's quite difficult, especially that nowadays with the speed of the development, we have to focus on so many aspects.

Jakub Andrzejewski:

Like security is 1, software quality. We have performance, accessibility, SEO, maintainability, scalability, and probably 10 more to handle.

Alexander Lichter:

Shipping the actual feature as well.

Jakub Andrzejewski:

Exactly. Doing something that works. So there is a lot of things to take care of. So my honest recommendation would be to review OWASP website once in a while just to see what issues are there. And just when you are developing something, just think whether your solution is protected against them.

Jakub Andrzejewski:

Maybe there is something you can do to make it more secure. Maybe there is something you can talk to your teammates, backend developers, full stack developers. Maybe there is something that you can help them with by sharing this this security knowledge.

Alexander Lichter:

Maybe in that case before we we slowly have to wrap up, like, are there a few things just top of your head there, like, hey, as Vue. Js developers, what are the things that is, like, clear size of, okay, we have to improve things here. What are, like, common things that's the that, like, happen the wrong way for front end developers that they should improve? Like, oh, yeah. These are a few things you definitely should check now after after listening to a podcast.

Jakub Andrzejewski:

So I would say check out Nuxt Security documentation because, what we, me and other contributors, tried to do is not only to to put into this documentation only the information how to use the module, but also to make it a source of knowledge of how you can make your Vue application more secure. So apart from just how you can use the module, you also get the topics on guides about making your content security policy more secure, like more strict, for example, to basically be more secure. I lost the word. So for sure, check out that because there we apart from these guides, we also have a FAQ where we also try to solve certain few problems there. We also have a good practices guide, which includes different, tools that you can implement in your project.

Jakub Andrzejewski:

For example, a plug in for, that scans your yarn lock, for example, to see if you have some packages that have some security issues. So there's actually a lot of things that the contributors added to to the module so that you can use to make your Vue app more secure. So that will be the first one. The second one, as I mentioned, OWASP and OWASP Top 10, it's a really, really good source of knowledge in terms of making your app more secure. And the third thing, I'm not sure if I have

Alexander Lichter:

If you have 2, that's also fine. It's just like I don't know. If you said, like, I have a Vue application, an Arc application, and, like, I don't know. A thing that I come across is in many applications, they use VHtml to make sure, hey. Whatever you use with the VHtml directive, it's sanitized.

Alexander Lichter:

There's no user input. Like like, these kind of nuggets where people are like, oh, yeah. I just have to, I don't know, command shift f in my code or control f if you're on Windows, and then look for it and be like, okay. At least there, I have no issues in terms of cross site scripting. So so if you have, like, some, let's say, straightaway, actionable things of, like, okay.

Alexander Lichter:

Check these things in your code that you've seen before that might that might have some issues if if you have something like that. Okay. Okay. Good. That's a good chance.

Jakub Andrzejewski:

I'm not sure if I have that specific things, like what what we also have in Nuxt security documentation and the good practices guide is for example with sanitization as you mentioned or basically just storing the actual information you need in your application. So for example, if you're fetching a user profile, you don't need to fetch his password. Like that's not a good recommendation and store it in interactive Vue property, right? That it can be accessible from anywhere inside your app. So for sure that just review what information you're getting and how you're storing it.

Jakub Andrzejewski:

Maybe also to look at how you're handling your cookies because this is something also what what comes to my mind in terms of of how it could be done in a bad way that you are storing the cookies. And then, for example, you're getting those cookies and you are, for example, sending them somewhere to a third party service, let's say. So these are the things that you should check, but also they will be in Avast top 10. I'm I'm pretty certain, because apart from just the list of issues, Office also has a checklist for node, for GraphQL, for SQL and stuff where you can go through this checklist. And apart from just mentioning how you can solve certain risk or certain issue, they also give you, like, real examples of, for example, packages that solve certain issues.

Jakub Andrzejewski:

So I think that's that's the best recommendation I I can leave to the to the audience is just use of us. It's a great source of knowledge. It's almost like web.dev, right, for for example, for performance, for SEO and stuff. Of us is that source of knowledge for for security.

Michael Thiessen:

Yeah. Well, thank you so much for sharing all these tips and your insights on security. I know that I need to go install this module on my projects right away and make sure that everything's secure. And, Yeah. You've given me lots of things to think about.

Michael Thiessen:

I'm gonna have to check out this OWASP and, see what see what that's about. Do you have any other last things you'd like to share? Where can people find you online? Do you have any anything you wanna to plug or or have people check out?

Jakub Andrzejewski:

So if you want to to find me, I'm on x and bluesky,@jacobandrowski. I'm also on LinkedIn and on GitHub. The the differences in GitHub, I'm at baroshem. It's a bit different name. But if you type my first and last name, if you can manage to to pronounce it correctly, you will find me as well.

Jakub Andrzejewski:

But my final note would be what I always try to to motivate people to do is to contribute to open source. As I mentioned, the next next security wouldn't be there without the community contribution. I know that it's not perfect, and there are still a lot of things that can be done better. And it's the same for everything we do, right? For Vue, for Nax, there are still things that can be done better in a different way.

Jakub Andrzejewski:

So my final, let's say, note would be that if you are considering to contribute, stop considering and just do it. You will enjoy it for sure.

Alexander Lichter:

Yep. That's that's lovely, like, ending to the episode, I would say. So, Jakob, thank you so much for coming on, telling us a little bit of the state of Vue, security, how you got into Vue and Nuxt in open source, and, we'll hope to have you back on later on because there's so many more things to cover with regards to security. We could go on for a couple more hours, I think. But, yeah.

Alexander Lichter:

Yeah. Time time is running. Time is flying. So for everyone, listening, of course, check out all the older episodes. Some are linked in the show notes together with all the links to the surveys.

Alexander Lichter:

And if that's not the most recent episode, then there is straight one after that. So, yeah. Thank you, everybody for listening and hope to see you next episode.

Alexander Lichter:

And thank you, Jakob, for being around.