YouTube Video 4dtRTkaoLgE  ## Metadata - Author: [[YouTube]] - Full Title: YouTube Video 4dtRTkaoLgE - Category: #articles - Document Tags: [[drupal]] [[security]] [[tools]] - Summary: YouTube Video 4dtRTkaoLgE - URL: https://www.youtube.com/watch?v=4dtRTkaoLgE Cool. So, it seems they're going to record that. So, I need to be careful what I say right now. So, um in the age of AI, we're going to talk about 1996 technology now. Okay. Um we're going to talk about uh how to embed content and I think this is in a topic important topic um because um we're talking about all user experience how to improve the experience on editing Drupal creating content Drupal canvas etc etc. So we're going to say what options we have on on iframes and embedding advanced content and external content on your on your websites. Um, my name is Pedro Camra. I work at a company called Camrio and um I've been doing Drupal since 2007 I think. Um, and I you can find me as pra in all social networks including drupal.org which is my favorite social network. So we're going to talk about iframes. It's um technology that exists since 1996 uh in Netscape Navigator and um sorry about the some of the slides are cut off. I'm not sure why. Um anyways, who has using who is in this room has used Nestcape Navigator? Awesome. Awesome. Yeah, we missed that. Um so uh the common uses are like embedding videos and and including any external content on your site, right? Um how they work um they embed when you add an iframe and the parent of the parent of your document is the so the document is the parent of the of the content that you're embedding, right? And so it's the context is independent and isolated. um that gives you a lot of like flexibility to emit anything but also comes with a price right um um iframes cannot inherit CSS cleanly um modern development frameworks are like very limited design tokens etc you can't use that on an iframe um it increases the surface attack so you have an external site that external site that you embedded in 2015 on your website it's now a different kind kind of site and now you're embedding something that you didn't want to embed, right? Um, Google is changing constantly for Chrome on Chromium uh the policies on how iframes are embedded and how the allow allow policies are are working and so you have a lot of a lot of issues like the bugging is is complicated and and generally it's not a great user experience right um embed um is the um an open format. I wouldn't call it a standard. If you go to ombbed.com, uh you will see the extent of the format which is one page. Um it can be JSON, XML. Um and the great thing is the user is not um is not going to need to go to a widget, copy an iframe, paste it on your site. With ORMed, you just paste a link. uh it goes to a JSON endpoint, it grabs the right output for it and it embeds it on your site. Um you can pass parameters um you can I don't know you can um decide somehow how the content is rendered. Um but from provider to provider uh you're going to get a different result like um we're going to see a little bit. Um there's um different types of finding on the on the spec. Um I think is photo um video link and reach which is a very interesting name. Um, and then it returns a few a few uh responses. You can get a 401, you can you obviously will get a 200. It's okay, but you can get a 401 or you can even like um 501, which is great. We're going to discuss about that because it means like it's either does the thing have Oh, great. Oh, wait. JSON and XML. So, you can just implement a JSON and then XML leave it as a 501. And that's that's great. We're going to see that in a bit. Um so this will be like the user experience. The user enters like the URL for example this case for flicker. It goes to uh to the O embed endpoint. It returns a JSON hopefully and that JSON has HTML and that HTML is then rendered. Um this has good things and bad things and ings. Um so we're going to see how how a few of these um um providers implement to see a a range of examples. Um I think the name of the name in in in English is the good, the bad, and the ugly. This movie I think in Japanese it says something completely different. In Spanish is also the the good, the ugly and the bad. The good one, the good one is flicker. We can just go ahead and returns you an image tag. That is fantastic. That's what we want. The bad um we have Twitter X which returns something which probably going to be a blog post and a lot of social media does that and then it will inject you an external JavaScript. That is going to is getting a little interesting. Then the ugly we got an E for I frame and then we got an I iframe and then we have a few of already things things that are already decided for us and whatever we're going to see a lot of this and then we have the ugly error which is Microsoft doesn't like Obed why I do not know but you cannot embed a LinkedIn post with which is sad. We are sad about that. Um and then it is very very ugly that and this is one of the reasons why um we should consider our embed more seriously for embedding content is like you can't go to many sites now and grab an embed code. You can't do that like Instagram meta meta policies are more and more restrictive and Twitter is going to be probably following up. So you need to actually authenticate to get an embed resource and that is a error. So why we should do um we should consider iframes um it gives you a little bit more I would consider embed over iframe um just pasting the frame code it will um for example for Drupal if you think in the architecture of embedding an iframe uh it requires you a ci editor or any editor it requires you to give the user a lot of kind of allow once in the tags that they can add because you don't know right um if YouTube for example decides that the video is now a different tag um you need to go there and the to the field and say now it's frames images links and whatever dragons that other providers so you don't really want that so um the embed code go directly into into a what you see is what you get widget. Uh they can v by p platform and if you have a a one body field for your content well that structural content that said that he liked a lot for like the true model in the in the keynote that goes to the through the right. Um so o embed is a stable URL. It's always going to be um and the content is going to be embedded consistently. Um you can put uh o embed wherever a media field goes because there widgets for that. uh gives you a lot of predict predictability and if you still want it in a wy week cuz you know let's let's be clear like you will do that um you can have it as a as a reference field entity browser or widget in the like a small but with widget we you can still do that with with some modules and we'll see that what do you gain in privacy not much because if YouTube goes ahead and invests I iframe um well an iframe will be executed inside of the of the iframe context and you wouldn't have a lot of control over that. Um but you can still send something called that is a DN DT flag with OMED which is a do not track and I know that um Twitter well ex uh YouTube vo support this tracks. to this this tag. So you you send that and they're supposed they supposedly not allowed to track you which they probably conveniently ignore but you try and then things like swapping URLs like there's a YouTube no cookie uh domain for your for your embeds for YouTube you can automatically use that as well. And then great things uh if you get creative like if we saw the how Twitter embeds a JavaScript um code for your for your embeds. Imagine that you have a feed of those embeds. You have that JavaScript um 15 20 times. You can still use Drupal a bit smartly. You can send uh um you can send um a flag to the OM embed URL saying do not include the JavaScript. I will do that and include it once in the site. You can still do that and some providers still like your site frame and that is great. and performance. You can intentionally omit JavaScript um which is what we just discussed and you can avoid duplicate loads. And then there's also the lexi load module which you have to do a lot of work for but it's probably worth it. Um I'm going to share this these um slides. You'll you'll see the the um the links there. um security and this is actually a real sign from B from Bors in Okino um you have CSP control security protocol which is so important if you're embedding site you're embedding coding on your cycles embed if you're embedding third party codes on your site you need CSP it's going to be painful but you need that uh you have iframes you can't control really what the user enters But if you have a control protocol on what can be embedded with or embed, you have this more and more control and you can actually use CSP and sec kit. Uh sec kit gives you the X frame option headers and then CSP you can do like the allow uh um allow C reference. So you can um have an allow list of what can be embedded in an iframe, what can be embedded in a source, what can be embedded as an image, etc. etc. from third parties and that's kind of giving you uh a lot of control. Um and then you can serve there's an tutorial here on how you can serve third party resources from the same domain not external domain. So you have kind of a proxy you implement a proxy and then you embed from the proxy and that's a really good security good practice. Well, what if there's no embed support or embed support like uh linking which is interestingly the winning social network in 20125 which could that predicted that um you have external services like no embed um and then you have sites like embeddedly and I framely and the interesting thing from I framely is that they have a self-hosted thing. So if you are if you are very big on embeds and you really want to give the user experience something like that you can still provide your own service. Then there's something very interesting there's this open graph which is which is um not new either uh but you can use open graph to grab like a image and a teaser of your content and embed it like that. And there's a model there's a Drupal module for that. Um some criticism from embed. This is taken from indie web. Um there's an extra endpoint which is true. There's an extra endpoint you need to do to two requests one for the JSON one for the actual from the actual content. Uh and that is centralized. We don't like centralized. Um the we saw the JSON before and that's an HTML. Um so the embedded site still controls the display. Um and then we have sim similar privacy concerns right because iframes um have their own context and control but we're using Drupal. So there's a embed providers module that fixes this. There is no more a central list of endpoints. You can create your own endpoint and you can put whatever URL for that. You can have different uh embed uh services have different URLs and then we can use the same domain strategy that I mentioned before for the sim for the iframe uh uh information list risks. So let's talk about how we have media which is one of the best things that happen in Drupal 8. Um and it supports by by default supports all uh the O embed protocol like the photo the link the video and the rich one and out of the box gives you like Vimeo and YouTube embedding like you will see as soon as soon as you install the media module in Drupal uh you can have a remote video media type and that has YouTube and Vimeo by default and then anywhere that media is supported you can you can embed uh you can do or embed uh uh fields and that includes uh CK editor and whatnot. And then we have FT browser support which is great for if you're doing like custom widgets and widgets and media libraries and things like that. We have the OMED providers module that gives you like a way to not have a centralized OMED resource. And if you have um providers that are not on the list on the allowed list on the embed um um centralized JSON endpoint, you can add your custom ones here. You can also open an issue to the GitHub repository on o embed and say hey allow me to embed this but um that is going to be more that's going to take you more time so you can do that by the uh in the meantime and it the integration in bed providers is amazing because gives you something called provider buckets which gives you another layer of abstraction on the on the embed uh on the embed integration. So you can have provider buckets and create a different collection of all embed allowances and configuration for different media files and media fields. And that's that's kind of great. Uh it looks like this. So you create the bucket name and you say how many of these providers you want and then you're going to be a you're going to see a list like 90% of those you're not going to even know what they are. And um but then we find one that is Flickr. We know this one. And then you can embed this for different fields and different configuration which is kind of great and then you can do you can add your own one like if you have a URL and then you can provide if you do like a same domain you can also do that uh or if there's a provider that is not in the list. So how did you customization like there's hooks for customize that are kind of limited but they're kind of all right. um gives you like a ways to customize the URL to send like the do not track option or to say like a different different option like the size of the iframe. It is dep depends a lot. There's there's um embed um there is some um specification on the embed uh specs page but it's not very complete. Every provider provides their own like different flags that you can send. Some send do not track, some send uh a different option once with hyphen and others with underscore. So every everyone is uh every every product is a different thing. And then you have the resource fer. I know this is building uh talk but this kind of the way you would do it in code. you can uh decorate the resource fetcher and change things like URLs, thumbnails, size and things that are more stubborn. So with the hooks you can change the URL with the source fetcher you can actually change what is inside of the embed once your fetch did like here you can send a do not track here you can say hey the frame is returning a different thumbnail that I wanted I want a different one um and then there's another to add a new hook to modify the metadata which would probably remove the need for source fetcher decoration. But this is this is the idea and it's still very well underway. So when I was doing this talk, I thought, well, I'm doing this all the time in my projects. I'm going to grab everything that I have and I'm going to cook a module for specifically for this talk that I end up using in my project. And that's called embed configuration. And that gives you a little bit of a knuckle solution that does this all this for you. And it has um a few providers in there. If you're uh interested in seeing a no code configuration or or do you want to uh see code examples on how to customize your embeds, um this is a good one. Um, it has, um, X, um, YouTube, Vimeo, I think a couple more. If you want to add your own one there, you're welcome to have a an issue for it. Uh, it looks like this. So, for Vimeo, it exposes the API for the for the uh, URL changing and you can change like to not track, if you want a loop, if you want it responsive. I don't know why would you why in the world you will untick this but you can untick it if you want. Um and then in the background option which is kind of a shortcut for like this is a background video which Vimeo gives you the option uh kind of automatically. these kind of things more tools and we're going to list a a number of tools here like if you want to debug your own vets um you have a link viewer here I frame has a tool that you send the you send the URL and gives you back what you get in uh for ov and open graph and whatnot it's a bit trickery because it goes through their API and it gives you more than you what you would get normally but it gives you they give you a good good idea and then there's the these three PHP libraries uh that allow you to uh uh call uh OMED APIs directly if you want to want to do that this is for this code base ones this last three I'm not sure why essence I don't know what the essence name came about really and then really really use module useful modules you have an iframe Recizer module in Drupal.org. You have a provider markup which is very very related with the privacy and what you get. Uh check it out because you probably think you don't need it but you probably do. Um pier tool which is um an example on how to implement your own um oed provider. um thumbnail chooser which is for YouTube I think um and gives you a way to to choose because they normally the providers are going to be more and more greedy and they are more and more greedy um all the time. Uh so they're going to send you the worst thumbnail that they can and you want the best thumbnail that you can. So you need to negotiate a little bit that this is a good module. You can still do it with a with code, but this is a good one. YouTube direct duration. This is a good one to see how to add a new field. If you want to map a field, um this is a good example. And then Euro embed or entity embed. These two allow you to um there are two different options to give you like the button to embed in a wiz, which is also useful. Okay, I'm almost there. Above and beyond. Um, you can use Drupal as a nomin provider. Um, so you can use Drupal as because it's just an endpoint with a JSON and um resource. So if you think about it, it's kind of it's kind of a straightforward. So you have a few examples on how to do that. And this is like a a guide. This is the open bed providers endpoint project which isn't doesn't have a release and that's a bit that's a bit of a drag but I hope it gets one soon. The open Europa project for the European Commission has a no embed module and then if you are still in Drupal 7 is Landor is like a project for for um document library documents and they have a Drupal 7 solution for that and you can also go super modern and do open web components with the D O which basically gives you exactly the same but you're using web components. Maybe it makes sense for you. And this has like still zero configuration and uh it's framework agnostic. Um you have the link there and I'm done. Thank you. I'm not sure you have any questions or if we have time for any questions, but we don't have time. >> Sorry. >> You just um >> but everyone can catch you. >> You can catch me every time. >> Yes. Perfect. Thank you. for all your questions about 2008 technology., YouTube Video 4dtRTkaoLgE, YouTube, 01kabyfgdv7ssnrrks83gw5v31.