Enable and debug cross-origin isolatedYouTube↗  IA↗(long shot)
Science & Technology  4.8K views 99 likes 9 dislikes   15 Dec 2020
Chrome for Developers 814K subscribers N/A YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
(upbeat music)
（軽快な音楽）
- Hi, my name is Camille,
こんにちは　カミーユです
and I'm a Software Engineer
私はソフトウェアエンジニア
on the Chrome Open Web Platform Security team.
所属はChromeオープンウェブ プラットフォームセキュリティのチームです
And today, I'm going to walk you
これから説明するのは ウェブサイトで——
through enabling crossOriginIsolated on your website.
crossOriginIsolatedを 有効化するコードの書き方です
By enabling crossOriginIsolated on your website,
ウェブサイトでcrossOrigin Isolatedを有効化すると——
you will get access to powerful web APIs
強力なWeb APIに アクセスできるようになります
like SharedArrayBuffers on Android,
たとえばAndroidの SharedArrayBufferや——
or performance.memory.
performance.memoryなどです
You will also protect your application
また アプリケーションに対する——
against cross-origin attacks.
クロスオリジン攻撃を防げます
So crossOriginIsolated is a new security feature
crossOriginIsolatedは 新しいセキュリティ機能で——
that provides increased isolation from other origins
他のオリジンとの 厳格な分離を実現します
and that is stricter than same-site isolation
クロスオリジンポリシーに基づく 同一サイト内の——
on the cross-origin policy.
分離よりも厳格です
Let's get started with what crossOriginIsolated is
まずは crossOrigin Isolatedについて説明しましょう
and how you enable it on a website.
その後 これをウェブサイトで 有効化する方法も示します
So crossOriginIsolated is a result of sending
crossOriginIsolatedは 最上位ドキュメントで——
two HTTP headers on your top-level document.
２つのHTTPヘッダーを送信して 有効化します
These headers are the Cross-Origin-Opener-Policy, COOP,
そのヘッダーは Cross-Origin- Opener-Policy（COOP）と——
and Cross-Origin-Embedder-Policy, COEP.
Cross-Origin-Embedder- Policy（COEP）です
To enable CrossOriginIsolated,
crossOriginIsolatedを 有効にするには——
you need to send a Cross-Origin-Opener-Policy header,
まずCross-Origin-Opener- Policyヘッダーを送信します
with the value of same-origin,
値はsame-origin （同一オリジン）を指定します
with your top level document.
これを 最上位ドキュメントで行います
You also need to send a Cross-Origin-Embedder-Policy header,
Cross-Origin-Embedder- Policyヘッダーも送信します
with the value of require-corp,
値はrequire-corp （CORP要求）を指定します
with each of the frames in your page.
これは ページ内の各フレームで行います
So what do those headers do?
この２つのヘッダーの役目は何でしょうか？
COOP, isolates your page from other cross-origin pages.
COOPは 他のクロスオリジンページから ページを分離します
So for example, any cross-origin pop up 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, will see it's open or closed.
ポップアップ側も ウィンドウが 開いているか 閉じているかを認識します
This protects against data leak attacks like Spectre
この仕組みによってSpectreなどの データ漏洩攻撃から保護します
because the browser can put your page
ブラウザは ページを安全な環境に配置します
in a secure environment with only pages
そこでは 最上位で同一オリジンを——
that share the same top-level origin.
共有するページのみが表示されます
COEP ensures that every service
COEPは次のことを保証します
which you load on your page is same origin with you,
現在のページに読み込まれている すべてのサービスが同一オリジンであること
or it agrees to be loaded same origin.
または 同一オリジンのページに 読み込むことが許可されていることです
Some resources agree to be loaded same origin
一部のリソースは ある条件を満たすとき 同一オリジンに読み込むことが許可されます
by either having a CORS header,
その条件とは CORSヘッダーを含むこと
or having a CORP header with value cross-origin.
または値がcross-originである CORPヘッダーを含むことです
Without this, the service source will be blocked.
そうでない場合は サービスソースがブロックされます
So when you set COOP to same origin,
COOPをsame-originに設定し——
and COEP to require CORP,
COEPでCORPを要求する 設定にしたとします
your page becomes CrossOriginIsolated.
その場合 そのページは crossOriginIsolatedです
You can correct this
これを修正する場合は——
by checking the result of self.CrossOriginIsolated.
self.CrossOrigin Isolatedの結果を確認してください
So starting in Chrome 88,
これで Chrome 88以降では——
this will allow you to use SharedArrayBuffers on Android
AndroidでSharedArray Bufferが使えるようになります
as shown in this example.
この例のとおりです
So this is a brief overview of what COOP, COEP
ここまでで COOPとCOEP——
and CrossOriginIsolated do,
そしてcrossOriginIsolated について簡単に紹介しました
and if you want to know more,
これらの詳細は——
you should follow these links on the slide.
スライドに示したリンクから 参照してください
As you have noticed, COOP and COEP
お気づきのとおり COOPとCOEPは——
impact how a web page works.
ウェブページの動作に影響します
So, if you've 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
そこで登場するのが COOPとCOEPのデプロイによって——
from deploying COOP and COEP,
発生する問題のデバッグを 支援する仕組みです
we have new DevTools functionalities
そのために使えるDevToolsの 新機能があります
that are coming in Chrome 88.
これは Chrome 88に 追加される予定です
So let's have a look at those.
では 詳しく見ていきましょう
First, you may want to check
最初に確認したいのは ページの——
the CrossOriginIsolated stages off your page.
crossOriginIsolated ステージでしょう
In the application panel of DevTools,
DevToolsの[Application] パネルでは——
you can check the security and isolation status
セキュリティと分離の状態を確認できます
of your top-level frame.
最上位フレームの状態です
And there, you can see that the page is CrossOriginIsolated.
このとおり ページは crossOriginIsolatedです
You can also check the COOP and COEP stages of the page.
ページのCOOPステージとCOEPステージを それぞれ確認することもできます
Here, both are enabled, so my page is CrossOriginIsolated.
この例では両方が有効なので このページは crossOriginIsolatedです
Note that because I have both,
両方のヘッダーを設定したので——
my COOP status is not same origin,
COOPの状態は 同一オリジンではありません
but same origin plus COEP.
同一オリジンプラスCOEPであることに 注意してください
Let's look at COEP support in more details.
では COEPのサポートについて さらに詳しく見ていきましょう
So first let me open the cross-origin pop up.
まず クロスオリジン ポップアップを開きます
I can see the pop up I have created in DevTools.
DevToolsで作成したポップアップが 表示されます
And if I click on it,
そこで これをクリックします
I see it doesn't have access to its opener.
ところが オープナーにアクセスできません
This is because the opener is our main page with COOP
こうなるのは オープナーが COOPのメインページであり——
and it is cross origin with the pop up.
ポップアップは クロスオリジンだからです
So due to COOP, the main page and the pop up
COOPを指定しているため メインページと そのページから開いたポップアップは——
it open 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
するとDevToolsで メッセージが表示されます
I still don't have access to it.
まだ アクセス権限がありません
This is because I haven't set the COOP
こうなるのは ポップアップ側でCOOPヘッダーと——
and COEP headers on the pop up.
COEPヘッダーを設定していないからです
So, let me do that right now,
ここでその設定をしてみましょう
and up in the new pop-up was 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 COEP page.
COEPページにアクセスできない ポップアップとは違いますね
Now, let's look at support for COEP.
ではCOEPをサポートする コードの書き方に移りましょう
If I look at the Issue tab,
[Issue]タブを見ると 分かりますが——
I can see that four service resource loads were blocked.
サービスリソースのロードが ４回ブロックされています
As explained in the Issue tab,
[Issue]タブの説明のとおり——
those resources to not have a CORP header,
これらのリソースには CORPヘッダーがありません
so they won't be loaded by a cross-origin COEP page.
したがって クロスオリジンの COEPページはそれを読み込みません
And I can click on the specific resources
特定のリソースをクリックすると——
to get more details about the network load.
ネットワーク負荷の詳細を 把握することができます
So beyond support in DevTools,
DevToolsの他にも サポートされる機能があります
we have also been working at reporting API
COOPやCOEPに関して——
for COOP and COEP.
レポートを行うAPIです
With reporting, you can get production reports
レポートを作成すると 実行結果のレポートを取得できます
on what needs to be changed to support COOP and COEP.
COOPとCOEPをサポートするには どこを変更するべきかを示すレポートです
If you're familiar with CSP reporting,
このレポートは CSPレポートと——
this should be fairly similar
よく似たものになります
as we are using the same underlying reporting API.
基礎となるレポート作成APIは 共通のものを使っているからです
To enable reporting, just provide an endpoint
レポート作成を有効にするには 単純にエンドポイントを指定します
in your Cross-Origin-Opener-Policy
Cross-Origin-Opener- Policy（COOP）と
and Cross-Origin-Embedder-Policy reports.
Cross-Origin-Embedder- Policy（COEP）を指定します
This is where the reports will be sent.
これは レポートが送信される 場所になります
Note that for COOP, the reporting API
注意してほしいのですが COOPのレポート作成APIは——
is still in an origin trial
まだオリジントライアル中です
so you really need to either subscribed to the origin trial
ですからオリジントライアルに 申し込むか——
or enable the reporting API through Chrome plugs.
Chromeフラグ経由でレポート作成APIを 有効化する必要があります
We also provide a report on the mode for COOP and COEP.
また COOPとCOEPのモードに関する レポートも提供しています
So when you enable reports 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 either COOP or COEP,
COOPまたはCOEPで レポートのみのモードを有効にするには——
you need to use different headers with your documents.
ドキュメントで異なるヘッダーを 使用する必要があります
So these are the Cross-Origin-Opener-Policy
使用するヘッダーは Cross- Origin-Opener-Policy-
report-only header,
Report-Only
and Cross-Origin-Embedder-Policy report-only header.
Cross-Origin-Embedder- Policy-Report-Onlyです
In those headers, you will also specify
これらのヘッダーでは 次の2つを指定します
the value of the policy you want reports for
レポートの対象となるポリシーの値と——
and an endpoint to send those reports to.
レポートを送信するエンドポイントです
In reports only mode,
“レポートのみ”のモードを 指定すると——
you also get reporting-observing notifications.
レポート監視の通知も受け取ります
Okay, so let's have a look at the additional support
では 追加されているもう１つの サポートについて見ていきましょう
in DevTools for reporting mode.
DevToolsが レポートモードをサポートします
So here, I have a page with report-only COOP and COEP,
ここに示したのは レポートのみの COOPとCOEPのページです
and it's the same page as the previous demo.
これは 先ほどのデモと同じページです
I have just changed the headers it sends.
送信するヘッダーだけを変更してあります
So, on the Application tab,
[Application]タブでは——
I can see report-only values for COOP and COEP
COOPとCOEPの値がreport- onlyであることを確認できます
and I can also see the associated reporting endpoints.
関連するレポートの エンドポイントも確認できます
And as you can see, we don't have anything in the Issue tabs
ご覧のとおり [Issue]タブには 何も表示されていません
since we're in report-only mode.
レポートのみのモードだからです
This means that COEP is not enforced
つまり今はCOEPが 適用されていないので——
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 COOP is not enforced.
COOPが適用されていないので 引き続きページにアクセスできます
So overall, what I have shown you
説明した内容をまとめます
is the seat of support for COOP and COEP
COOPとCOEPのサポートが——
in DevTools in Chrome 88.
Chrome 88のDevToolsに 追加されます
We do have more support plan to help you debug COOP
サポートの計画は他にもあり COOPとCOEPのデバッグを——
and COEP more efficiently,
さらに効率化する予定です
and it's gonna show up in later releases.
それはもっと後のリリースで 披露することになるでしょう
Okay, so let's summarize what you need to do
サイトでcrossOrigin lsolatedを有効にするために——
to enable crossOriginlsolated on your site.
行う必要があることをまとめます
So, with crossOriginlsolated,
crossOriginIsolatedを ウェブサイトで有効化すると——
you will be able to use powerful APIs
強力なAPIを使用できるようになります
like SharedArrayBuffers on Android siting in Chrome 88,
Chrome 88が実装するAndroidの SharedArrayBufferなどです
and your site will also be more secure
これによりサイトの安全性が高まります
against attacks like Spectre
データを漏洩させようとする——
that tries to leak your user data.
Spectreなどの攻撃から守られます
To make your website crossOriginlsolated,
crossOriginlsolatedを ウェブサイトで有効にするには——
you need to enable COOP and COEP.
COOPとCOEPを 有効にする必要があります
To help you make the transition, enable COOP and COEP
その移行を設定する際に有益なのは まずCOOPとCOEPを——
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.
変更を特定するのに役立ちます
Product with local debugging using DevTool
プロダクトのデバッグを行う際は DevToolの——
application and issue panel
[Application]タブや [Issue]タブを使ってください
to ensure that your webpage most support COOP and COEP.
そのウェブページで確実に COOPとCOEPを最大限にサポートできます
In terms of actually enabling COOP and COEP,
実際にCOOPとCOEPを 有効にする際には——
this is all about setting the right headers.
適切なヘッダーを設定することが重要です
First, ensuring cross-origin subresources
まず クロスオリジンのサブリソースについて CORSでロードできること——
can load with CORS or have a COEP cross-origin header.
またはCOEPのクロスオリジンヘッダーを 保持していることを確認します
This includes your cross-origin iframes as well.
これには クロスオリジンiframeも 含まれます
Then ensure all the documents in your app
続いて アプリ内の すべてのドキュメントで——
set to COEP require-corp header.
COEPでrequire-corpヘッダーを 設定していることを確認します
So that means top-level documents and child documents,
これには 最上位のドキュメントも 子ドキュメントも——
including cross-origin iframes.
クロスオリジンiframeも 含まれます
And so, finally, you need a COOP same-origin header
最後になりますが 最上位のドキュメントには——
on your top-level documents.
COOPの同一オリジンの ヘッダーが必要です
And, with this, your page should be crossOriginIsolated
これで ページがcrossOrigin Isolatedになり——
and have access to powerful APIs
強力なAPIにアクセスできます
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.
最後までご覧くださって ありがとうございました　さようなら
(upbeat music)
（軽快な音楽）
Similar videos:

Introducing the Privacy Budget
Chrome for Developers
4.7K views 138 likes 7 dislikes 15 Dec 202063% match

Updating the way we work
Chrome for Developers
16.5K views 200 likes 24 dislikes 16 Dec 202061% match

Chrome Dev Summit Adventure: How we built it
Chrome for Developers
4.4K views 131 likes 6 dislikes 14 Dec 202059% match

The best of Chrome games | Chrome Developer Summit 2020
Chrome for Developers
11K views 417 likes 18 dislikes 24 Dec 202058% match

The web ahead
Chrome for Developers
5.3K views 105 likes 3 dislikes 21 Dec 202057% match

Connecting hardware devices to the web
Chrome for Developers
11.5K views 445 likes 12 dislikes 21 Dec 202057% match

Canvas2D is getting an update
Chrome for Developers
13.9K views 783 likes 35 dislikes 22 Dec 202056% match

Patterns for privacy
Chrome for Developers
4.6K views 105 likes 10 dislikes 23 Dec 202056% match

Debugging WebAssembly with modern tools
Chrome for Developers
14.3K views 244 likes 25 dislikes 17 Dec 202056% match

Keynote, Performance & Privacy highlights (CDS 2020)
Chrome for Developers
8.6K views 205 likes 3 dislikes 09 Dec 202055% match

Design, UX & Advanced PWAs highlights (CDS 2020)
Chrome for Developers
63.7K views 944 likes 76 dislikes 10 Dec 202055% match

Web development on Chrome OS (Chrome Dev Summit 2019)
Chrome for Developers
17.3K views 455 likes 25 dislikes 25 Nov 201948% match

Chrome and the web in 2020
Chrome for Developers
54K views 552 likes 56 dislikes 09 Dec 202046% match

Predictive prefetching for the Web (Chrome Dev Summit 2019)
Chrome for Developers
6.2K views 215 likes 2 dislikes 25 Nov 201945% match

Day 1: Chrome Dev Summit 2020
Chrome for Developers
15.9K views 628 likes 8 dislikes 09 Dec 202045% match

Web bingo at Chrome Dev Summit '19
Chrome for Developers
3.5K views 133 likes 9 dislikes 22 Nov 201945% match

Chrome Dev Summit 2019 - Day 2 Livestream
Chrome for Developers
12.3K views 195 likes 7 dislikes 12 Nov 201944% match

Chrome Dev Summit 2019 - Day 1 Livestream
Chrome for Developers
21.8K views 461 likes 5 dislikes 11 Nov 201944% match

What’s new in Material Design for the web (Chrome Dev Summit 2019)
Chrome for Developers
38.1K views 915 likes 22 dislikes 22 Nov 201944% match

Speed highlights (Chrome Dev Summit 2019)
Chrome for Developers
6.7K views 188 likes 5 dislikes 14 Nov 201943% match

The gift of giving up (Chrome Dev Summit 2019)
Chrome for Developers
4.6K views 167 likes 4 dislikes 16 Nov 201943% match

Faster apps with JSON.parse (Chrome Dev Summit 2019)
Chrome for Developers
300.2K views 12.8K likes 0 dislikes 22 Nov 201942% match

PWAs and capability highlights (Chrome Dev Summit 2019)
Chrome for Developers
8.1K views 200 likes 5 dislikes 16 Nov 201942% match

Tools for fast Angular applications (Chrome Dev Summit 2019)
Chrome for Developers
8.8K views 328 likes 6 dislikes 22 Nov 201942% match

5 tips to make your PWA stand out (Chrome Dev Summit 2019)
Chrome for Developers
6.4K views 233 likes 5 dislikes 25 Nov 201942% match

You should focus — supporting different devices on the web (Chrome Dev Summit 2019)
Chrome for Developers
4K views 206 likes 6 dislikes 19 Nov 201942% match

Blending PWA into native environments (Chrome Dev Summit 2019)
Chrome for Developers
5.3K views 147 likes 8 dislikes 25 Nov 201942% match

WebP in its 10th year (Chrome Dev Summit 2019)
Chrome for Developers
5K views 187 likes 3 dislikes 19 Nov 201942% match

Hello dark mode, my old friend (Chrome Dev Summit 2019)
Chrome for Developers
24.5K views 824 likes 25 dislikes 22 Nov 201941% match

Protecting users on a thriving web (Chrome Dev Summit 2019)
Chrome for Developers
4.4K views 75 likes 4 dislikes 11 Nov 201941% match


Settings Privacy About Contact Donate