2

Currently im developing youtube like webapp using youtube data api v3 with VueJs.

I fetch the video query using video ids through $route.params.id , and my URL literally look like this, http://mywebapp/video/wRtasSllAk_aq.

So, the data of the video that own this id wRtasSllAk_aq will be shown up on the video page.

I wanted to show only videos in my channel. But then i realized that this way are not the best practices because, anyone who visit my webapp can easily replace the video ids in address bar and their video can be watch in my webapp too.

i don't want that situation happen because it can be misuse by someone who are not responsible.

If you guys have any possible solution that can help me out, please let me know because im still newbie in VueJs development.

And this project is my first try in learning it properly.

Thank you!

Zarul Izham
  • 143
  • 1
  • 1
  • 10

1 Answers1

0

From the content of your question, it sounds like you probably do not want to encrypt your route param id, but a mean to filter the video ID, so that your website requests YouTube videos only from your channel, instead of any arbitrary videos that a visitor can type in their browser address bar.

There is nothing Vue specific to achieve this goal.

If your channel videos list does not update too often, you can simply hard-code this list (the ID of your videos) in your site, and make sure the route param id is contained in that list.

You also have a YouTube Data API to fetch that list. See YouTube API to fetch all videos on a channel Note that you may put some cache in place to avoid having to request that list too often and spend your quota.

E.g. instead of hard-coding, you could store the list in a backend service / database.

Finally, you can still encrypt the route param id, so that it is a little bit more difficult for a visitor to guess the video ID format, but your decryption algorithm would be part of your client bundle code, so a motivated enough user can still access that code to determine your encryption method and encode their own video ID with the appropriate encryption. Again, there is nothing Vue specific in encrypting.

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • I see.. I think i should choose store the list in a backend service because of my channel is frequently updated. That means, i need to code the data request function by id that only exists in my database. right? – Zarul Izham Jul 10 '18 at 03:26
  • You have plenty ways of making sure your param id is contained in your db: retrieve the full list in the client, make a single id check, etc. – ghybs Jul 10 '18 at 03:48
  • Alright. Now im understood. Its hard for me to store full data in the client (in terms of storage size?). Maybe i should make a single id check and writing logic structure to let my backend fetch the data from youtube data api by id that only exists in database. is it possible? – Zarul Izham Jul 10 '18 at 03:55
  • Many things are possible. There are plenty tutorials online. If you have trouble implementing something, feel free to ask a question on SO with specific details. – ghybs Jul 10 '18 at 04:08
  • Alright thank you sir. I think for now, its clear. Solved like champ! – Zarul Izham Jul 10 '18 at 04:13