Google Chrome 71正式リリース！詐欺広告の排除や脆弱性が修正

おはようございます！社員Aです👩

今回は、12月4日に正式公開された「Google Chrome 71」について書いていきたいと思います。

このバージョンには、多くの新機能が搭載されています。そのほとんどは、悪質な広告、不正な請求ページ、不要な自動再生オーディオからユーザーを保護することに重点を置いています。

詐欺広告の排除

Chrome 71は、不正なまたは誤解を招く広告を表示するサイトのすべての広告をブロックするようになりました。

不正な広告には、マルウェアの宣伝、隠れたクリック領域、偽のマウスポインタ、非対話型のリダイレクト、フィッシング、偽のメッセージや警告、誤解を招くような行為などがあります。

Googleが不正な広告行動を行っていることを検出すると、 Google検索コンソールの不正行為レポートにその旨が警告され ます。このレポートには、サイトの広告の定期的な評価が含まれ、何かが検出された場合はサイト所有者に警告します。

不正な請求ページの警告

Chromeは不正な請求を行うウェブページの警告を表示するようになりました。

不正な課金サイトとは、ゲームなどのコンテンツにアクセスするためにモバイル情報を入力するようにユーザーに指示するサイトですが、ユーザーには知らないうちにモバイルのサブスクリプションに料金を請求します。

Chromeの自動再生ポリシーを使用

以前のバージョンでは、Googleでは自動再生音声がChromeで動作しないようにしました。

これにより、ゲーム、プレゼンテーション、その他のアプリが正常に動作しなくなるなど、多くの正当なアプリケーションが発生しました。このため、Googleはこの機能のリリースを遅らせることで、開発者が自分のアプリを修正する時間を与えるようにしました。

サイトで音声がブロックされている場合、Web Audio APIを使用するアプリケーションでもブロックされます。

Speech Sythensis APIのブロック

Speech Synthesis APIを使用すると、テキストを合成音声音声に変換できます。これはアクセシビリティのためには最適ですが、技術サポート詐欺などのサイトでも悪用されています。

これはサイトがユーザーの介入なしに音声を自動再生する最後の方法の1つでもあるため、GoogleはAPIを通じて音声を自動的に再生する機能を無効にしています。

開発者がAPIを使用するには、ユーザーとのやりとりによってのみAPIを起動する必要があります。そうしないと、APIがブロックされ、Chromeデベロッパーツールのコンソールに警告が表示されます。

AndroidとiOS用のChrome新機能

1. 画像を長押ししてクリップボードに保存し、他のアプリに貼り付けることができるようになりました。
2. 期限切れのCookieを使用することによって発生する認証の問題を修正。
3. iframe（埋め込みページ）のあるサイトでオートフィル機能が向上するようになりました。

デベロッパーツールの新機能

今回のアップデートは、デベロッパーツールも進化しています。

相対時間を表示する Intl.RelativeTimeFormat()

Twitterを始め、多くのWebアプリケーションでは、「昨日」、「2日後」、「1時間前」などのフレーズを使用して、日付と時間を表示するのではなく、何か起きたかどうかを示します。

相対時間を表示することは非常に一般的になってきており、ほとんどの一般的な日付/時刻ライブラリは、これを処理するローカライズされた関数を提供しています。

Chrome 71ではIntl.RelativeTimeFormat()、作業をJavaScriptエンジンに移行し、相対時間のローカライズされた書式設定を可能にしています。これにより、パフォーマンスが少し向上しました。

つまり、ブラウザが新しいAPIをまだサポートしていない場合、それらのライブラリをポリフィルとして必要とするだけです。

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

縦書きテキストの下線位置の指定

中国語または日本語のテキストが垂直フローで表示されている場合、ブラウザは下線が置かれている場所と矛盾し、左または右に表示されます。

Chrome71では、text-underline-positionプロパティが適用されます。

CSS3のテキストの装飾では、追加ライン、使用するスタイル、色、および 位置などを指定できます。

音声合成にはユーザーのアクティベーションが必要

自動再生ポリシーでは、サイトで自動的に音声再生や音声付きのビデオファイルの再生ができなくなります。一部のサイトでは、 代わりに音声合成APIを使用してこの問題を回避しようとしています 。

Chrome 71以降、スピーチ合成APIは、動作する前にページ上で何らかのユーザーアクティベーションを行う必要があります。これは、他の自動再生ポリシーに沿ったものになり ます。ユーザーがページとやりとりする前にそれを使用しようとすると、エラーが発生します。

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Android上でElement.requestFullscreen（）メソッドをカスタマイズできるように

Android上でElement.requestFullscreen（）メソッドをカスタマイズできるようになりました。

ナビゲーションバーを表示するか、ユーザージェスチャが実行されるまでユーザーエージェントコントロールが表示されない完全に没入型モードにするかを選択できます。

omitからsame-originに

モジュールスクリプト要求のデフォルトの資格モードは、omitからsame-originに変更されました。

▼前回のアップデートはこちら

ゆにメモ

Google Chrome 70正式リリース！WEB制作者が知りたい新機能まとめ

https://blog.universe-web.jp/1802

こんにちは！最近、スクラブにハマっていて、気づいたら空けていないスクラブが6個もあった社員Aです👩日によって使い分けて消化していく予定です（笑）さて、今回は10月16日にリリースされた「Google Chrome 70」のWEB制作者が知りたい新機能を書いていきたいと思います。▼こちらもおすすめ Chrome 70の改善点・新機能まとめ前回の「Chrome69」では、賛否両論ありましたが、UIも含めて一新されたことが話題になりました。▼前回の記事この69で導入されたGoogleのサービスへのログインを、Chromeに反映する仕組みがプライバ...