 Hi, everyone. I'm Eiji, and today I'm going to talk about KOOP and QAP. KOOP and QAP are names of HTTP headers that let your web page opt into a special state called cross-origin isolated, and gain access to powerful features such as shared array buffers across platforms, performance.measure memory, JS self-profiling API. If you're interested in using a powerful feature from this growing list, you will need to opt into KOOP and QAP. Also, if you own a CDN or provide ads, fonts, images, or other resources that gets loaded in different origins across the web, you should also watch this video. I will discuss one HTTP header you can add to ensure all your customers can properly load your resources. With that in mind, let's get started. Composability is a superpower of the web. You can enhance your website's capabilities by simply adding resources from different sources. Commonly used services include ads, web fonts, images, videos, maps, identity federation, payment solutions, and so on. These services are quite handy and powerful, but their cross-origin nature contributes to increased risk of information leakage. malicious parties could take advantage of the situation and exfiltrate information about your users. But browsers do a good job at preventing such scenarios. They keep cross-origin resources separated within a browsing context group when the web page allows that. Browsing context group is a group of tabs, windows, and iframes that share the same context. The same origin policy is a security feature that restricts how documents and scripts can interact with resources from another origin so that users' information won't accidentally leak. The same origin policy has been doing a good job keeping the web a safe place. Anti-spectre was discovered. Spectre is a vulnerability found in CPUs that enables malicious websites to read memory and the contents across the origin boundaries. This vulnerability can be exploited via features that can act as high-precision timers. This leaves cross-origin resources that are shared in a single browsing context group at risk. Even if they are protected by the same origin policy, Spectre attacks can bypass that border. As a quick response, browser vendors decided to turn off features that could be used to construct high-precision timers. For example, shared array buffer. To mitigate the risk of Spectre and make powerful features available on the web page, its origin needs to be isolated from others. By isolating origins into separate browsing context groups, Spectre and other exploits that grant permissions to read arbitrary memory in the same process are no longer able to read cross-origin contents. This, in turn, allows browsers to bring back the powerful features on pages that are properly isolated. Chrome on desktop enabled site isolation. This allowed us to turn shared array buffer back on on desktops. To achieve more robust isolation, the browser needs an explicit signal from the website that they want to be isolated from cross-origin resources. That is what Coup and Quep are about. To enable cross-origin isolation, you need to do three things. First, set cross-origin opener policy, same origin for the main document. Second, make sure cross-origin resources use cross-origin resource policy, cross-origin, or cross-origin resource sharing. Third, set cross-origin emitter policy, require corp for the main document. Let's walk through each step to see how they work. When cross-origin opener policy, same origin is set. Any cross-origin window opened from the document will have no access to the opener's DOM, so window.opener will return null. This is how the document achieves isolation from the cross-origin window. To create a cross-origin isolated page, you need to make sure all cross-origin resources embedded in the document explicitly allow it to be loaded. There are two ways to achieve this, by setting cross-origin resource policy, cross-origin, or applying cross-origin resource sharing. If you serve resources from a different subdomain that you have control of, you can simply apply the cross-origin resource policy header. But what about resources you don't have control of? If the resource already supports cross-origin resource sharing, you don't need to do much. Just append the cross-origin attribute where it's needed. For resources that don't support it, you should ask the resource provider to enable the cross-origin resource policy header. So here's the action item for owners of CDNs or providers of S, fonts, images, or other resources embedded across the web. Please be prepared to serve your contents with cross-origin resource policy cross-origin. Without supporting it, your resources will be blocked in the browser and harm your customer's experience at some point. With cross-origin embedded policy require cork, you can let the web page only load resources that are explicitly marked as shareable unless they are served from the same origin. For example, an image served from cross-origin without a cross-origin resource policy header will be blocked like this. By setting cross-origin resource policy cross-origin, this image can be displayed. Note that if you use report-only mode of cross-origin embedded policy, you can send reports to a specified URL without actually blocking those resources. I recommend deploying cross-origin embedded policy starting with the report-only mode. That way you can confirm that cross-origin isolation is in fact, without affecting the end users. Once your page is loaded with coupe and quack, it should be in a cross-origin isolated state. You can verify cross-origin isolated is in effect by checking self.cross-origin isolated boolean flag in JavaScript. This flag is not available in Chrome yet, but it's coming soon. Let's recap. Start testing with coupe and quack and opt into cross-origin isolation today. You can learn how that works and why they are needed in more details at web.devcoupequack and web.devycoupequack. If you're an owner of a CDN or provider of ads, fonts, images, or other resources, please start adopting cross-origin resource policy. You can learn more at resourcepolicy.fyi. Additionally, Sam is covering this topic by showing you how DevTools can help you with a variety of issues, which includes new functionality for coupe and quack. Thank you for watching.