Twitch is now unbanned from Telescope! Now go watch some streams!
Tags: opensource
Published: 2022-03-08 17:08:17

Haven't posted in awhile. Might do this weekly with the more amounts of time I've been seeing lately.

So I've managed to secure a co-op and have been working with an IT branch of Federal Government of Canada. I can't comment too much on that since, you know, security reasons... but it's been great. With this in mind, most of the work is not web related which is what I did a lot of more of in school so now to get my fix of that, what better way than to work with Telescope.

So I'm picking up issues as I go, trying not to take too much since I got other responsibilities and y'know, there's students doing the course that should be doing the bulk of the work. As an alumni, it means I got knowledge of areas that others might not know which means reviewing more. That's what I've been doing, but with a side of coding here and there.

That brings us to html-sanitizer. I worked on this last year when I did the course regarding spotify iframe tags, and now it's the same thing, but with Twitch iframe tags. I made a quick PR and merged it cleanly, until...
![No God Please No](https://media4.giphy.com/media/vyTnNTrs3wqQ0UIvwE/200.webp?cid=ecf05e47vrzls3n050m6i8hex51wdnf0aflj7c2qhi8y6dpm&rid=200.webp&ct=g)


![Didn't work sadly :(](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m8hxo7enrpj94znuqjp.png)


Turns out, it wasn't as simple as I thought. Aside from the wrong url being used, it turns out that there's some extra required properties that were needed; Chief among them the `parent` property.

The parent property is the domain that's hosting the embedded content. In users' blog posts, it would be their blog post site. In Telescope, it would be what our `WEB_URL` refers to:

- localhost in `DEV`
- dev.telescope.cdot.systems in `STAGING`
- telescope.cdot.systems in `PRODUCTION`

So I have to extract the iframe, modify the parent property and return that if it's a twitch iframe. I was beginning to think that wasn't possible until

![Just do it](https://c.tenor.com/_l6JIUoVnZAAAAAd/there-is-no-
try-do-or-do-not.gif)
 
The answer was in an optional parameter you can pass into sanitize=html's constructor that takes the form of a transform function that will transform a given tag into another tag. In our case, we just want to change an iframe to an iframe with the properties we want 

![Iframe Transformation!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4t3datz5csaj1jxrx6z.png)

We simply create a new url with the given iframe, set it's parent attribute to be the web url depending on what environment we're in, then do some string manipulation to transform the escaped characters back into what they should be. We only do this for twitch iframes though, any other iframe would pass normally. This is something future students can look to modify if ever a need to update this function to change iframes from other sites that have other properties needed.

It took some time, and I was also really confused at numerous times looking at this. Today, my PR was finally merged in. It ended up being one of my most looked at PRs on the project. The parser service also uses this file too, so I modified that part too. Now twitch is no longer banned from our sanitizer and telescope users can now view embedded twitch clips and videos!

As it turns out, whether you're a student or not, there's always something to learn. Now get out there and work, for there's no success without failure. You don't try; you either do the work, or not.