Safe and secure

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/explore/secure"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/explore/secure" /><link rel="alternate" hreflang="x-default" href="https://web.dev/explore/secure" /><link rel="alternate" hreflang="ar" href="https://web.dev/explore/secure?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/explore/secure?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/explore/secure?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/explore/secure?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/explore/secure?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/explore/secure?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/explore/secure?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/explore/secure?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/explore/secure?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/explore/secure?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/explore/secure?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/explore/secure?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/explore/secure?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/explore/secure?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/explore/secure?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/explore/secure?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/explore/secure?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/explore/secure?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/explore/secure?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/explore/secure?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/explore/secure" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/explore/secure" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/explore/secure?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/explore/secure?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/explore/secure?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/explore/secure?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/explore/secure?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/explore/secure?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/explore/secure?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/explore/secure?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/explore/secure?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/explore/secure?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/explore/secure?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/explore/secure?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/explore/secure?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/explore/secure?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/explore/secure?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/explore/secure?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/explore/secure?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/explore/secure?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/explore/secure?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/explore/secure?hl=vi" /><title>Safe and secure  |  web.dev</title> <meta property="og:title" content="Safe and secure  |  web.dev"><meta property="og:url" content="https://web.dev/explore/secure"><meta property="og:image" content="https://web.dev/static/images/social-wide.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Safe and secure" } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="web-theme" type="article" appearance layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" aria-label="Explore, selected" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab > <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" > Case studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="web.dev" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://web.dev/explore/learn-core-web-vitals" track-metadata-eventdetail="https://web.dev/explore/learn-core-web-vitals" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - core web vitals" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Core Web Vitals" track-name="core web vitals" > Core Web Vitals </a> </tab> <tab > <a href="https://web.dev/explore/metrics" track-metadata-eventdetail="https://web.dev/explore/metrics" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - metrics" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Metrics" track-name="metrics" > Metrics </a> </tab> <tab > <a href="https://web.dev/explore/fast" track-metadata-eventdetail="https://web.dev/explore/fast" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - fast load times" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Fast load times" track-name="fast load times" > Fast load times </a> </tab> <tab > <a href="https://web.dev/explore/ai" track-metadata-eventdetail="https://web.dev/explore/ai" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - ai" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" > AI </a> </tab> <tab > <a href="https://web.dev/explore/how-to-optimize-inp" track-metadata-eventdetail="https://web.dev/explore/how-to-optimize-inp" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - optimize interaction to next paint (inp)" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Optimize Interaction to Next Paint (INP)" track-name="optimize interaction to next paint (inp)" > Optimize Interaction to Next Paint (INP) </a> </tab> <tab > <a href="https://web.dev/explore/progressive-web-apps" track-metadata-eventdetail="https://web.dev/explore/progressive-web-apps" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - progressive web apps" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Progressive Web Apps" track-name="progressive web apps" > Progressive Web Apps </a> </tab> <tab > <a href="https://web.dev/accessibility" track-metadata-eventdetail="https://web.dev/accessibility" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - accessible to all" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Accessible to all" track-name="accessible to all" > Accessible to all </a> </tab> <tab > <a href="https://web.dev/explore/reliable" track-metadata-eventdetail="https://web.dev/explore/reliable" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - network reliability" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Network reliability" track-name="network reliability" > Network reliability </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/explore/secure" track-metadata-eventdetail="https://web.dev/explore/secure" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - safe and secure" track-metadata-module="primary nav" aria-label="Safe and secure, selected" data-category="Site-Wide Custom Events" data-label="Tab: Safe and secure" track-name="safe and secure" > Safe and secure </a> </tab> <tab > <a href="https://web.dev/explore/discoverable" track-metadata-eventdetail="https://web.dev/explore/discoverable" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - easily discoverable" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Easily discoverable" track-name="easily discoverable" > Easily discoverable </a> </tab> <tab > <a href="https://web.dev/explore/payments" track-metadata-eventdetail="https://web.dev/explore/payments" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - web payments" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Web Payments" track-name="web payments" > Web Payments </a> </tab> <tab > <a href="https://web.dev/explore/media" track-metadata-eventdetail="https://web.dev/explore/media" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - media" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Media" track-name="media" > Media </a> </tab> <tab > <a href="https://web.dev/explore/devices" track-metadata-eventdetail="https://web.dev/explore/devices" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - devices" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Devices" track-name="devices" > Devices </a> </tab> <tab > <a href="https://web.dev/explore/animations" track-metadata-eventdetail="https://web.dev/explore/animations" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - animations" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Animations" track-name="animations" > Animations </a> </tab> <tab > <a href="https://web.dev/explore/identity" track-metadata-eventdetail="https://web.dev/explore/identity" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - identity" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Identity" track-name="identity" > Identity </a> </tab> <tab > <a href="https://web.dev/explore/webassembly" track-metadata-eventdetail="https://web.dev/explore/webassembly" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - webassembly" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: WebAssembly" track-name="webassembly" > WebAssembly </a> </tab> <tab > <a href="https://web.dev/explore/test-automation" track-metadata-eventdetail="https://web.dev/explore/test-automation" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - test automation" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Test automation" track-name="test automation" > Test automation </a> </tab> <tab > <a href="https://web.dev/explore/react" track-metadata-eventdetail="https://web.dev/explore/react" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - react" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: React" track-name="react" > React </a> </tab> <tab > <a href="https://web.dev/explore/angular" track-metadata-eventdetail="https://web.dev/explore/angular" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - angular" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Angular" track-name="angular" > Angular </a> </tab> <tab > <a href="https://web.dev/explore/mini-apps" track-metadata-eventdetail="https://web.dev/explore/mini-apps" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - mini apps" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Mini apps" track-name="mini apps" > Mini apps </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/explore/learn-core-web-vitals" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Core Web Vitals" track-name="core web vitals" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Core Web Vitals" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Core Web Vitals </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/metrics" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Metrics" track-name="metrics" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Metrics" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Metrics </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/fast" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Fast load times" track-name="fast load times" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fast load times" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Fast load times </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/how-to-optimize-inp" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Optimize Interaction to Next Paint (INP)" track-name="optimize interaction to next paint (inp)" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Optimize Interaction to Next Paint (INP)" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Optimize Interaction to Next Paint (INP) </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/progressive-web-apps" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Progressive Web Apps" track-name="progressive web apps" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Progressive Web Apps" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Progressive Web Apps </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Accessible to all" track-name="accessible to all" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessible to all" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessible to all </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/reliable" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Network reliability" track-name="network reliability" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network reliability" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network reliability </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/secure" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Safe and secure" track-name="safe and secure" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Safe and secure" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Safe and secure </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/discoverable" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Easily discoverable" track-name="easily discoverable" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Easily discoverable" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Easily discoverable </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/payments" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Web Payments" track-name="web payments" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Payments" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Payments </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/media" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Media" track-name="media" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Media" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Media </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/devices" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Devices" track-name="devices" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Devices" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Devices </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/animations" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Animations" track-name="animations" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Animations" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Animations </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/identity" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Identity" track-name="identity" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/webassembly" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: WebAssembly" track-name="webassembly" data-category="Site-Wide Custom Events" data-label="Responsive Tab: WebAssembly" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WebAssembly </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/test-automation" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Test automation" track-name="test automation" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Test automation" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Test automation </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/react" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: React" track-name="react" data-category="Site-Wide Custom Events" data-label="Responsive Tab: React" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > React </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/angular" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Angular" track-name="angular" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Angular" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Angular </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/mini-apps" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Mini apps" track-name="mini apps" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mini apps" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mini apps </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case studies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /explore/patch.css */ [theme=web-theme] .devsite-landing-row-3-up.wd-explore-3up .devsite-landing-row-item { text-align: left; } [theme=web-theme] .wd-explore-3up .devsite-landing-row-item-list-item-description h4 { padding: 0; } .wd-explore-3up .devsite-landing-row-item-list-item-description a:hover{ text-decoration: underline; } [theme=web-theme] .devsite-landing-row-3-up .devsite-landing-row-item.wd-3col-icons-list { text-align: left; } [theme=web-theme] .wd-explore-2up .devsite-landing-row-item-list-item-description a:hover{ text-decoration: underline; } [theme=web-theme] .wd-explore-2up .devsite-landing-row-item-list-item-description h4 { padding: 0; } [theme=web-theme] .devsite-landing-row-item-buttons.left { justify-self: flex-start; } [theme=web-theme] .devsite-landing-row-3-up.devsite-landing-row-cards img { max-height: 200px; object-fit: cover; } </style> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="web.dev" > web.dev </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/explore" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Explore </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/explore/secure" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="" > Safe and secure </a> </li> </ul> </div> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-hero devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <picture> <img alt="" src="https://web.dev/static/explore/secure/cover.png" srcset="https://web.dev/static/explore/secure/cover_36.png 36w,https://web.dev/static/explore/secure/cover_48.png 48w,https://web.dev/static/explore/secure/cover_72.png 72w,https://web.dev/static/explore/secure/cover_96.png 96w,https://web.dev/static/explore/secure/cover_480.png 480w,https://web.dev/static/explore/secure/cover_720.png 720w,https://web.dev/static/explore/secure/cover_856.png 856w,https://web.dev/static/explore/secure/cover_960.png 960w,https://web.dev/static/explore/secure/cover_1440.png 1440w,https://web.dev/static/explore/secure/cover_1920.png 1920w,https://web.dev/static/explore/secure/cover_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" fetchpriority="high"> </picture> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="safe-and-secure" data-text="Safe and secure" class="hide-from-toc no-link" tabindex="0"> Safe and secure </h3> <div class="devsite-landing-row-item-description-content"> Ensure your site and your users' data is secure. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up wd-explore-3up" header-position="left" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="overview" data-text="Overview" tabindex="0"> Overview </h2> <div class="devsite-landing-row-description"> Every website is vulnerable to attack, not just those handling sensitive data. Learn the security basics to keep your sites safe. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="understand-security-basics" data-text="Understand security basics" class="hide-from-toc no-link" tabindex="0"> Understand security basics </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="security-should-not-be-so-scary" data-text="Security should not be so scary!" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/security-not-scary"> Security should not be so scary! </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="what-are-security-attacks" data-text="What are security attacks?" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/security-attacks"> What are security attacks? </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="understanding-same-site-and-same-origin" data-text="Understanding "same-site" and "same-origin"" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/same-site-same-origin"> Understanding "same-site" and "same-origin" </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="security-headers-quick-reference" data-text="Security headers quick reference" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/security-headers"> Security headers quick reference </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="secure-connections-with-https" data-text="Secure connections with HTTPS" class="hide-from-toc no-link" tabindex="0"> Secure connections with HTTPS </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="why-https-matters" data-text="Why HTTPS matters" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/why-https-matters"> Why HTTPS matters </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="enabling-https-on-your-servers" data-text="Enabling HTTPS on your servers" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/enable-https"> Enabling HTTPS on your servers </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="what-is-mixed-content" data-text="What is mixed content?" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/what-is-mixed-content"> What is mixed content? </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="fixing-mixed-content" data-text="Fixing mixed content" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/fixing-mixed-content"> Fixing mixed content </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="when-to-use-https-for-local-development" data-text="When to use HTTPS for local development" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/when-to-use-local-https"> When to use HTTPS for local development </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="how-to-use-https-for-local-development" data-text="How to use HTTPS for local development" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/how-to-use-local-https"> How to use HTTPS for local development </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="prevent-info-leaks" data-text="Prevent info leaks" class="hide-from-toc no-link" tabindex="0"> Prevent info leaks </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="browser-sandbox" data-text="Browser sandbox" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/browser-sandbox"> Browser sandbox </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="same-origin-policy" data-text="Same-origin policy" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/same-origin-policy"> Same-origin policy </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="cross-origin-resource-sharing-cors" data-text="Cross-Origin Resource Sharing (CORS)" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/cross-origin-resource-sharing"> Cross-Origin Resource Sharing (CORS) </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="making-your-website-cross-origin-isolated-using-coop-and-coep" data-text="Making your website "cross-origin isolated" using COOP and COEP" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/coop-coep"> Making your website "cross-origin isolated" using COOP and COEP </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="why-you-need-cross-origin-isolated-for-powerful-features" data-text="Why you need "cross-origin isolated" for powerful features" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/why-coop-coep"> Why you need "cross-origin isolated" for powerful features </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="protect-your-resources-from-web-attacks-with-fetch-metadata" data-text="Protect your resources from web attacks with Fetch Metadata" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/fetch-metadata"> Protect your resources from web attacks with Fetch Metadata </a> </h4> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up wd-explore-3up" header-position="left" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="protect-your-sites-web-apps-and-users" data-text="Protect your sites, web apps, and users" tabindex="0"> Protect your sites, web apps, and users </h2> <div class="devsite-landing-row-description"> Learn techniques to keep your users, your content, and your business secure. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="protect-websites-from-xss" data-text="Protect websites from XSS" class="hide-from-toc no-link" tabindex="0"> Protect websites from XSS </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="prevent-dom-based-cross-site-scripting-vulnerabilities-with-trusted-types" data-text="Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/trusted-types"> Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="mitigate-cross-site-scripting-xss-with-a-strict-content-security-policy-csp" data-text="Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/strict-csp"> Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP) </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="securely-hosting-user-data-in-modern-web-applications" data-text="Securely hosting user data in modern web applications" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/securely-hosting-user-data"> Securely hosting user data in modern web applications </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="monitor-security-violations-and-deprecations" data-text="Monitor security violations and deprecations" class="hide-from-toc no-link" tabindex="0"> Monitor security violations and deprecations </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="reporting-api-span-classmaterial-icons-aria-hiddentrue-translatenoopen_in_newspan" data-text="Reporting API " class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/capabilities/web-apis/reporting-api"> Reporting API <span class="material-icons" aria-hidden="true" translate="no">open_in_new</span> </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="migrate-to-reporting-api-v1-span-classmaterial-icons-aria-hiddentrue-translatenoopen_in_newspan" data-text="Migrate to Reporting API v1 " class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/blog/reporting-api-migration"> Migrate to Reporting API v1 <span class="material-icons" aria-hidden="true" translate="no">open_in_new</span> </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="network-error-logging-nel" data-text="Network Error Logging (NEL)" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/network-error-logging"> Network Error Logging (NEL) </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="cookies" data-text="Cookies" class="hide-from-toc no-link" tabindex="0"> Cookies </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="understanding-cookies" data-text="Understanding cookies" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/understanding-cookies"> Understanding cookies </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="prepare-for-third-party-cookie-deprecation-on-chrome-span-classmaterial-icons-aria-hiddentrue-translatenoopen_in_newspan" data-text="Prepare for third-party cookie deprecation on Chrome " class=" no-link" tabindex="0"> <a href="https://developers.google.com/privacy-sandbox/3pcd"> Prepare for third-party cookie deprecation on Chrome <span class="material-icons" aria-hidden="true" translate="no">open_in_new</span> </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="samesite-cookies-explained" data-text="SameSite cookies explained" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/samesite-cookies-explained"> SameSite cookies explained </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="samesite-cookie-recipes" data-text="SameSite cookie recipes" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/samesite-cookie-recipes"> SameSite cookie recipes </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="first-party-cookie-recipes" data-text="First-party cookie recipes" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/first-party-cookie-recipes"> First-party cookie recipes </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="referer-and-referrer-policy-best-practices" data-text="Referer and Referrer-Policy best practices" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/referrer-best-practices"> Referer and Referrer-Policy best practices </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="schemeful-same-site" data-text="Schemeful Same-Site" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/schemeful-samesite"> Schemeful Same-Site </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="the-privacy-sandbox" data-text="The Privacy Sandbox" class="hide-from-toc no-link" tabindex="0"> The Privacy Sandbox </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="discover-privacy-sandbox-span-classmaterial-icons-aria-hiddentrue-translatenoopen_in_newspan" data-text="Discover Privacy Sandbox " class=" no-link" tabindex="0"> <a href="https://developers.google.com/privacy-sandbox/overview"> Discover Privacy Sandbox <span class="material-icons" aria-hidden="true" translate="no">open_in_new</span> </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="private-state-tokens-span-classmaterial-icons-aria-hiddentrue-translatenoopen_in_newspan" data-text="Private State Tokens " class=" no-link" tabindex="0"> <a href="https://developers.google.com/privacy-sandbox/protections/private-state-tokens"> Private State Tokens <span class="material-icons" aria-hidden="true" translate="no">open_in_new</span> </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="user-agent-reduction-span-classmaterial-icons-aria-hiddentrue-translatenoopen_in_newspan" data-text="User-Agent reduction " class=" no-link" tabindex="0"> <a href="https://developers.google.com/privacy-sandbox/protections/user-agent"> User-Agent reduction <span class="material-icons" aria-hidden="true" translate="no">open_in_new</span> </a> </h4> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up wd-explore-3up" background="grey" header-position="left" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="help-ive-been-hacked" data-text="Help, I've been hacked!" tabindex="0"> Help, I've been hacked! </h2> <div class="devsite-landing-row-description"> Understand how and why sites are hacked, then learn how to fix it. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="get-started" data-text="Get started" class="hide-from-toc no-link" tabindex="0"> Get started </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="help-i-think-ive-been-hacked" data-text="Help, I think I've been hacked" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/hacked"> Help, I think I've been hacked </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="how-do-i-know-if-my-site-was-hacked" data-text="How do I know if my site was hacked?" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/how-do-i-know-if-my-site-was-hacked"> How do I know if my site was hacked? </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="build-a-support-team" data-text="Build a support team" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/build-a-support-team"> Build a support team </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="quarantine-your-site" data-text="Quarantine your site" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/quarantine-your-site"> Quarantine your site </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="use-search-console" data-text="Use Search Console" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/use-search-console"> Use Search Console </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="assess-spam-damage" data-text="Assess spam damage" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/assess-spam-damage"> Assess spam damage </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="common-hacks" data-text="Common hacks" class="hide-from-toc no-link" tabindex="0"> Common hacks </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="top-ways-sites-get-hacked-by-spammers" data-text="Top ways sites get hacked by spammers" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/top-ways-sites-get-hacked-by-spammers"> Top ways sites get hacked by spammers </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="fixing-the-japanese-keyword-hack" data-text="Fixing the Japanese Keyword hack" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/fixing-the-japanese-keyword-hack"> Fixing the Japanese Keyword hack </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="fixing-the-gibberish-hack" data-text="Fixing the gibberish hack" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/fixing-the-gibberish-hack"> Fixing the gibberish hack </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="fixing-the-cloaked-keywords-and-links-hack" data-text="Fixing the cloaked keywords and links hack" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/fixing-the-cloaked-keywords-hack"> Fixing the cloaked keywords and links hack </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="hacked-with-malware" data-text="Hacked with malware" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/hacked-with-malware"> Hacked with malware </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="fix-the-problem" data-text="Fix the problem" class="hide-from-toc no-link" tabindex="0"> Fix the problem </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="identify-the-vulnerability" data-text="Identify the vulnerability" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/identify-the-vulnerability"> Identify the vulnerability </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="clean-and-maintain-your-site" data-text="Clean and maintain your site" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/clean-and-maintain-your-site"> Clean and maintain your site </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="request-a-review" data-text="Request a review" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/request-a-review"> Request a review </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="glossary-for-hacked-sites" data-text="Glossary for hacked sites" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/glossary-for-hacked-sites"> Glossary for hacked sites </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="faq-for-hacked-sites" data-text="FAQ for hacked sites" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/faq-for-hacked-sites"> FAQ for hacked sites </a> </h4> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "web.dev", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="Gd1hPv0eeopnFNe+UCFztGla40OnYL"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Analytics__enable_clearcut_logging","Profiles__enable_release_notes_notifications","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__enable_variable_operator","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_cloud_facet_chat","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_public_developer_profiles","MiscFeatureFlags__developers_footer_image","Profiles__enable_recognition_badges","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloud_dlp_service","TpcFeatures__enable_required_headers","Profiles__enable_profile_collections","Profiles__enable_page_saving","MiscFeatureFlags__enable_project_variables","Profiles__enable_awarding_url","Search__enable_suggestions_from_borg","Concierge__enable_pushui","Experiments__reqs_query_experiments","Cloud__enable_legacy_calculator_redirect","BookNav__enable_tenant_cache_key","OnSwitch__enable","EngEduTelemetry__enable_engedu_telemetry","Search__enable_dynamic_content_confidential_banner","DevPro__enable_developer_subscriptions","Search__enable_page_map","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_completecodelab_endpoint","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_free_trial_server_call","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloud_shell","Cloud__enable_cloudx_experiment_ids","Search__enable_ai_eligibility_checks","MiscFeatureFlags__enable_view_transitions","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__emergency_css","Cloud__enable_cloudx_ping","DevPro__enable_cloud_innovators_plus","CloudShell__cloud_shell_button","Profiles__enable_developer_profiles_callout"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Safe and secure | web.dev