Enable and debug cross-origin isolated

Key Takeaways

hi my name is camille and i'm a software engineer on the chrome open web platform security team and today i'm going to walk you through enabling cross-origin isolated on your website by enabling crossover chain isolated on your website you will gain access to powerful web apis like solidarity buffers on android or performance.memory you will also protect your application against cross-origin attacks so cross-origin isolated is a new security feature that provides increased isolation from other origins and that is stricter than same-side isolation or the cross-origin policy let's get started with what cross-origin isolated is and how you enable it on a website so cross-origin isolated is the result of sending two http headers on your top-level document these headers are the cross-origin operator policy co-op and cross-origin emitter policy co-app to enable cross-origin isolated you need to send a cross-region up in a policy header with a value of same origin with your top-level document you also need to send a cross-origin embedder policy header with a value of require cop with each of the frames in your page so what do those headers do co-op isolates your page from other cross-origin pages so for example any cross-origin pop-ups you open will not be able to directly interact with your document or send it messages you will see the pop-up window is closed and similarly the pop-up would see its opener as closed this protects against data leak attacks expector because the browser can put your page in a secure environment with only pages that share the same top level origin coamp ensures that every subresource you load on your page is same origin with you or it agrees to be loaded same origin subresources agree to below the same origin by either having a course header or having a corp header with value cross origin without this the server resource will be blocked so when you set co-op to same origin and go up to require corp your page becomes cross-related isolated you can query this by taking the result of cell that cross-origin isolated so starting in chrome 88 this will allow you to use shadow buffers on android as shown is in this example so this is a brief overview of what co-op web and cross-origin isolate do and if you want to know more you should follow these links on the side as you have noticed co-op and co-op impact how a web page works so if you just set the headers on the page it's likely that your page will not work as it used to to help you debug the issues coming from deploying co-op and co-app we have new devtools functionalities that are coming in chrome 88 so let's have a look at those first you may want to check the cross-origin isolated status in your offshore page in the application panel of devtools you can check the security and isolation status of your top-level frame and there you can see that the page is cross-origin isolated you can also check the co-op and co-op status of the page here both are enabled so my page is cross-originally isolated note that because i have both my co-op status is not same origin but same origin plus co-web let's look at co-op support in more details so first let me open a cross-origin pop-up i can see the pop-up i have created in devtools and if i click on it i see that it doesn't have access to its opener this is because the opener is our main page with co-op and it is cross-origin with the pop-up so due to co-op the main page and the pop-up hit up and don't have access to each other okay so let's try opening the same origin pop-up then and devtools is telling me that i still don't have access to it this is because i haven't set the co-op and co-op headers on the pop-up so let me do that right now and open a new popup with the right headers and as you can see this pop-up has access to its opener and its icon is also different from the other pop-ups who could not access the code page now let's look at support for co-app if i look at the issue tab i can see that 4 server source loads were blocked as explained in the issue tab those resources do not have a core header so they won't be loaded by a cross original web page and i can click on the specifics of resources to get more details about the network load so beyond support in devtools we have also been working at reporting apis for co-op and co-app with reporting you can get production reports on what needs to be changed to support co-op and co-op if you're familiar with csp reporting this should be fairly similar as we are using the same underlying reporting api to enable reporting just provide an endpoint in your crosstalk region opener policy and cross-originator policy reports this is where the reports will be sent not that for co-op the reporting api is still in an origin trial so you will need to either subscribe to the origin trial or enable the reporting api through chrome flags we also provide a report only mode for coop and coep so when you enable report only the browser won't enforce the policies instead it will send you reports when it detects that something would break if it had enforced the policies you specified to enable report only mode for isr co-op and cool app you need to use different headers with your documents so these are the cross origin opener policy report only header and cross-origin embedder policy report only header in those headers you will also specify the value of the policy you want reports for and an endpoint to send those reports to in report only mode you also get reporting observer notifications okay so let's have a look at the additional support and devtools for reporting mode so here i have a page with report only coop and co-app and it's the same page as the previous demo i have just changed the headers it sends so on the application tab i can see report only values for co-op and co-app and i can also see the associated reporting endpoints and as you can see we don't have anything in the issue tab since we're in report only mode this means that co-app is not enforced and we don't block the sub-resource loads okay now let me open a cross-origin pop-up it can still access the page because co-op is not enforced so overall what i have shown you is the state of support for co-op and co-op in dev tools in chrome 88. we do have more support planned to help you debug co-op and quite more efficiently and it's gonna show up in later releases okay so let's summarize what you need to do to enable crossroads and isolated on your site so with crossover original isolated you will be able to use powerful apis like share driver for an android starting in chrome 88 and your site will also be more secure against attacks like spectre that try to leak your user data to make your website cross-originally isolated you need to enable co-op and co-app to help you make the transition enable co-op enclap in report-only mode first this will give you reports from production that will help you pin down the changes you need to make before deployment pair that with local debugging using devtool application and issue panel to ensure that your webpage will support co-op and co-app in terms of actually enabling co-op and code this is all about setting the right headers first ensure your cross-origin sub-resources can load with scores or have a core cross-origin header this includes your cross-origin typeframes as well then ensure all the documents in your app set a co-app require corp header so that means top-level documents and child documents including cross-origin iframes and so finally you need a co-op same origin header on your top level documents and with this your page should be crossroaded and isolated and have access to powerful apis as well as extra isolation that protects them against cross-origin data leak attacks so thank you all for watching and see you next time