Cross-Origin Resource Sharing (CORS) | Articles

<!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/articles/cross-origin-resource-sharing"><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/articles/cross-origin-resource-sharing" /><link rel="alternate" hreflang="x-default" href="https://web.dev/articles/cross-origin-resource-sharing" /><link rel="alternate" hreflang="ar" href="https://web.dev/articles/cross-origin-resource-sharing?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/articles/cross-origin-resource-sharing?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/articles/cross-origin-resource-sharing?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/articles/cross-origin-resource-sharing?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/articles/cross-origin-resource-sharing?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/articles/cross-origin-resource-sharing?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/articles/cross-origin-resource-sharing?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/articles/cross-origin-resource-sharing?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/articles/cross-origin-resource-sharing?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/articles/cross-origin-resource-sharing?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/articles/cross-origin-resource-sharing?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/articles/cross-origin-resource-sharing?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/articles/cross-origin-resource-sharing?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/articles/cross-origin-resource-sharing?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/articles/cross-origin-resource-sharing?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/articles/cross-origin-resource-sharing?hl=ru" /><link rel="alternate" hreflang="es" href="https://web.dev/articles/cross-origin-resource-sharing?hl=es" /><link rel="alternate" hreflang="es-419" href="https://web.dev/articles/cross-origin-resource-sharing?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/articles/cross-origin-resource-sharing?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/articles/cross-origin-resource-sharing?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/articles/cross-origin-resource-sharing?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=ru" /><link rel="alternate" hreflang="es-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=es" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/articles/cross-origin-resource-sharing?hl=vi" /><title>Cross-Origin Resource Sharing (CORS)  |  Articles  |  web.dev</title> <meta property="og:title" content="Cross-Origin Resource Sharing (CORS)  |  Articles  |  web.dev"><meta name="description" content="The browser&#39;s same-origin policy blocks reading a resource from a different origin for security purposes. Enabling CORS lets the server tell the browser it can use an additional origin."> <meta property="og:description" content="The browser&#39;s same-origin policy blocks reading a resource from a different origin for security purposes. Enabling CORS lets the server tell the browser it can use an additional origin."><meta property="og:url" content="https://web.dev/articles/cross-origin-resource-sharing"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2018-11-05", "headline": "Cross-Origin Resource Sharing (CORS)" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Articles", "item": "https://web.dev/articles" },{ "@type": "ListItem", "position": 2, "name": "Cross-Origin Resource Sharing (CORS)", "item": "https://web.dev/articles/cross-origin-resource-sharing" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="article" appearance layout="docs" display-toc 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="Articles" 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" >Español</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-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://web.dev/explore" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Collections </a> </li> </ul> </div> </div> <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 > <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 class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Understand security basics</span> </div></li> <li class="devsite-nav-item"><a href="/articles/security-not-scary" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/security-not-scary" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/security-not-scary" ><span class="devsite-nav-text" tooltip>Security should not be so scary!</span></a></li> <li class="devsite-nav-item"><a href="/articles/security-attacks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/security-attacks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/security-attacks" ><span class="devsite-nav-text" tooltip>What are security attacks?</span></a></li> <li class="devsite-nav-item"><a href="/articles/same-site-same-origin" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/same-site-same-origin" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/same-site-same-origin" ><span class="devsite-nav-text" tooltip>Understanding "same-site" and "same-origin"</span></a></li> <li class="devsite-nav-item"><a href="/articles/security-headers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/security-headers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/security-headers" ><span class="devsite-nav-text" tooltip>Security headers quick reference</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Secure connections with HTTPS</span> </div></li> <li class="devsite-nav-item"><a href="/articles/why-https-matters" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/why-https-matters" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/why-https-matters" ><span class="devsite-nav-text" tooltip>Why HTTPS matters</span></a></li> <li class="devsite-nav-item"><a href="/articles/enable-https" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/enable-https" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/enable-https" ><span class="devsite-nav-text" tooltip>Enabling HTTPS on your servers</span></a></li> <li class="devsite-nav-item"><a href="/articles/what-is-mixed-content" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/what-is-mixed-content" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/what-is-mixed-content" ><span class="devsite-nav-text" tooltip>What is mixed content?</span></a></li> <li class="devsite-nav-item"><a href="/articles/fixing-mixed-content" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/fixing-mixed-content" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/fixing-mixed-content" ><span class="devsite-nav-text" tooltip>Fixing mixed content</span></a></li> <li class="devsite-nav-item"><a href="/articles/when-to-use-local-https" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/when-to-use-local-https" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/when-to-use-local-https" ><span class="devsite-nav-text" tooltip>When to use HTTPS for local development</span></a></li> <li class="devsite-nav-item"><a href="/articles/how-to-use-local-https" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/how-to-use-local-https" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/how-to-use-local-https" ><span class="devsite-nav-text" tooltip>How to use HTTPS for local development</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Prevent info leaks</span> </div></li> <li class="devsite-nav-item"><a href="/articles/browser-sandbox" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/browser-sandbox" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/browser-sandbox" ><span class="devsite-nav-text" tooltip>Browser sandbox</span></a></li> <li class="devsite-nav-item"><a href="/articles/same-origin-policy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/same-origin-policy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/same-origin-policy" ><span class="devsite-nav-text" tooltip>Same-origin policy</span></a></li> <li class="devsite-nav-item"><a href="/articles/cross-origin-resource-sharing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/cross-origin-resource-sharing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/cross-origin-resource-sharing" ><span class="devsite-nav-text" tooltip>Cross-Origin Resource Sharing (CORS)</span></a></li> <li class="devsite-nav-item"><a href="/articles/coop-coep" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/coop-coep" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/coop-coep" ><span class="devsite-nav-text" tooltip>Making your website "cross-origin isolated" using COOP and COEP</span></a></li> <li class="devsite-nav-item"><a href="/articles/why-coop-coep" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/why-coop-coep" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/why-coop-coep" ><span class="devsite-nav-text" tooltip>Why you need "cross-origin isolated" for powerful features</span></a></li> <li class="devsite-nav-item"><a href="/articles/fetch-metadata" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/fetch-metadata" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/fetch-metadata" ><span class="devsite-nav-text" tooltip>Protect your resources from web attacks with Fetch Metadata</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Protect websites from XSS</span> </div></li> <li class="devsite-nav-item"><a href="/articles/trusted-types" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/trusted-types" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/trusted-types" ><span class="devsite-nav-text" tooltip>Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types</span></a></li> <li class="devsite-nav-item"><a href="/articles/strict-csp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/strict-csp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/strict-csp" ><span class="devsite-nav-text" tooltip>Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)</span></a></li> <li class="devsite-nav-item"><a href="/articles/securely-hosting-user-data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/securely-hosting-user-data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/securely-hosting-user-data" ><span class="devsite-nav-text" tooltip>Securely hosting user data in modern web applications</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Protect users from tracking</span> </div></li> <li class="devsite-nav-item"><a href="/articles/digging-into-the-privacy-sandbox" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/digging-into-the-privacy-sandbox" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/digging-into-the-privacy-sandbox" ><span class="devsite-nav-text" tooltip>Digging into the Privacy Sandbox</span></a></li> <li class="devsite-nav-item"><a href="/articles/understanding-cookies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/understanding-cookies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/understanding-cookies" ><span class="devsite-nav-text" tooltip>Understanding cookies</span></a></li> <li class="devsite-nav-item"><a href="/articles/samesite-cookies-explained" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/samesite-cookies-explained" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/samesite-cookies-explained" ><span class="devsite-nav-text" tooltip>SameSite cookies explained</span></a></li> <li class="devsite-nav-item"><a href="/articles/samesite-cookie-recipes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/samesite-cookie-recipes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/samesite-cookie-recipes" ><span class="devsite-nav-text" tooltip>SameSite cookie recipes</span></a></li> <li class="devsite-nav-item"><a href="/articles/first-party-cookie-recipes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/first-party-cookie-recipes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/first-party-cookie-recipes" ><span class="devsite-nav-text" tooltip>First-party cookie recipes</span></a></li> <li class="devsite-nav-item"><a href="/articles/referrer-best-practices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/referrer-best-practices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/referrer-best-practices" ><span class="devsite-nav-text" tooltip>Referer and Referrer-Policy best practices</span></a></li> <li class="devsite-nav-item"><a href="/articles/trust-tokens" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/trust-tokens" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/trust-tokens" ><span class="devsite-nav-text" tooltip>Getting started with Trust Tokens</span></a></li> <li class="devsite-nav-item"><a href="https://developer.chrome.com/docs/privacy-security/user-agent-client-hints" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://developer.chrome.com/docs/privacy-security/user-agent-client-hints" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security/user-agent-client-hints" ><span class="devsite-nav-text" tooltip>User-agent client hints</span></a></li> <li class="devsite-nav-item"><a href="/articles/schemeful-samesite" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/schemeful-samesite" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/schemeful-samesite" ><span class="devsite-nav-text" tooltip>Schemeful Same-Site</span></a></li> <li class="devsite-nav-item"><a href="/articles/floc" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/floc" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/floc" ><span class="devsite-nav-text" tooltip>What is FLoC?</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Monitor security violations and deprecations</span> </div></li> <li class="devsite-nav-item"><a href="https://developer.chrome.com/docs/capabilities/web-apis/reporting-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://developer.chrome.com/docs/capabilities/web-apis/reporting-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities/web-apis/reporting-api" ><span class="devsite-nav-text" tooltip>Reporting API</span></a></li> <li class="devsite-nav-item"><a href="https://developer.chrome.com/blog/reporting-api-migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://developer.chrome.com/blog/reporting-api-migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://developer.chrome.com/blog/reporting-api-migration" ><span class="devsite-nav-text" tooltip>Migrate to Reporting API v1</span></a></li> <li class="devsite-nav-item"><a href="/articles/network-error-logging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/network-error-logging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/network-error-logging" ><span class="devsite-nav-text" tooltip>Network Error Logging (NEL)</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Help! I've been hacked</span> </div></li> <li class="devsite-nav-item"><a href="/articles/hacked" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/hacked" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/hacked" ><span class="devsite-nav-text" tooltip>Help, I think I've been hacked</span></a></li> <li class="devsite-nav-item"><a href="/articles/how-do-i-know-if-my-site-was-hacked" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/how-do-i-know-if-my-site-was-hacked" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/how-do-i-know-if-my-site-was-hacked" ><span class="devsite-nav-text" tooltip>How do I know if my site was hacked?</span></a></li> <li class="devsite-nav-item"><a href="/articles/top-ways-sites-get-hacked-by-spammers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/top-ways-sites-get-hacked-by-spammers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/top-ways-sites-get-hacked-by-spammers" ><span class="devsite-nav-text" tooltip>Top ways sites get hacked by spammers</span></a></li> <li class="devsite-nav-item"><a href="/articles/build-a-support-team" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/build-a-support-team" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/build-a-support-team" ><span class="devsite-nav-text" tooltip>Build a support team</span></a></li> <li class="devsite-nav-item"><a href="/articles/quarantine-your-site" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/quarantine-your-site" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/quarantine-your-site" ><span class="devsite-nav-text" tooltip>Quarantine your site</span></a></li> <li class="devsite-nav-item"><a href="/articles/use-search-console" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/use-search-console" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/use-search-console" ><span class="devsite-nav-text" tooltip>Use Search Console</span></a></li> <li class="devsite-nav-item"><a href="/articles/assess-spam-damage" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/assess-spam-damage" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/assess-spam-damage" ><span class="devsite-nav-text" tooltip>Assess spam damage</span></a></li> <li class="devsite-nav-item"><a href="/articles/fix-the-japanese-keyword-hack" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/fix-the-japanese-keyword-hack" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/fix-the-japanese-keyword-hack" ><span class="devsite-nav-text" tooltip>Fix the Japanese Keyword hack</span></a></li> <li class="devsite-nav-item"><a href="/articles/fix-the-gibberish-hack" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/fix-the-gibberish-hack" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/fix-the-gibberish-hack" ><span class="devsite-nav-text" tooltip>Fix the gibberish hack</span></a></li> <li class="devsite-nav-item"><a href="/articles/fix-the-cloaked-keywords-hack" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/fix-the-cloaked-keywords-hack" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/fix-the-cloaked-keywords-hack" ><span class="devsite-nav-text" tooltip>Fix the cloaked keywords and links hack</span></a></li> <li class="devsite-nav-item"><a href="/articles/hacked-with-malware" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/hacked-with-malware" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/hacked-with-malware" ><span class="devsite-nav-text" tooltip>Hacked with malware</span></a></li> <li class="devsite-nav-item"><a href="/articles/identify-the-vulnerability" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/identify-the-vulnerability" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/identify-the-vulnerability" ><span class="devsite-nav-text" tooltip>Identify the vulnerability</span></a></li> <li class="devsite-nav-item"><a href="/articles/clean-and-maintain-your-site" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/clean-and-maintain-your-site" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/clean-and-maintain-your-site" ><span class="devsite-nav-text" tooltip>Clean and maintain your site</span></a></li> <li class="devsite-nav-item"><a href="/articles/request-a-review" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/request-a-review" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/request-a-review" ><span class="devsite-nav-text" tooltip>Request a review</span></a></li> <li class="devsite-nav-item"><a href="/articles/glossary-for-hacked-sites" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/glossary-for-hacked-sites" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/glossary-for-hacked-sites" ><span class="devsite-nav-text" tooltip>Glossary for hacked sites</span></a></li> <li class="devsite-nav-item"><a href="/articles/faq-for-hacked-sites" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/faq-for-hacked-sites" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/faq-for-hacked-sites" ><span class="devsite-nav-text" tooltip>FAQ for hacked sites</span></a></li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <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="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/articles" 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="Articles" > Articles </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="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" 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="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > Safe and secure </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Cross-Origin Resource Sharing (CORS) </h1> <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> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>Share cross-origin resources safely</p> <p> <div class="wd-authors" translate="no"> <div class="wd-author"> <div> <span> Mariko Kosaka </span> <div class="wd-author__links"> <a href="https://twitter.com/kosamari" aria-label="Mariko Kosaka on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> </div> </div> </div> </div></p> <p>The browser's same-origin policy blocks reading a resource from a different origin. This mechanism stops malicious sites from reading other sites' data, but it also prevents legitimate uses.</p> <p>Modern web apps often want to get resources from a different origin, for example, retrieving JSON data from a different domain or load images from another site into a <code translate="no" dir="ltr"><canvas></code> element. These can be public resources that should be available for anyone to read, but the same-origin policy blocks their use. Developers have historically used workarounds such as <a href="https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about">JSONP</a>.</p> <p><em>Cross-Origin Resource Sharing (CORS)</em> fixes this issue in a standardized way. Enabling CORS lets the server tell the browser it can use an additional origin.</p> <h2 id="resource-request-basics" data-text="How does a resource request work on the web?" tabindex="-1">How does a resource request work on the web?</h2> <figure> <img src="/static/articles/cross-origin-resource-sharing/image/request-response.png" alt="request and response" width="668" height="327" srcset="https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_36.png 36w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_48.png 48w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_72.png 72w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_96.png 96w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_480.png 480w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_720.png 720w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_856.png 856w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_960.png 960w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_1440.png 1440w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_1920.png 1920w,https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> Illustrated client request and server response. </figcaption> </figure> <p>A browser and a server can exchange data over the network using the <em>Hypertext Transfer Protocol</em> (HTTP). HTTP defines the communication rules between the requester and the responder, including what information is needed to get a resource.</p> <p>The HTTP header negotiates the message exchange between the client and the server, and is used to determine access. Both the browser's request and the server's response message are divided into a <em>header</em> and a <em>body</em>.</p> <h3 id="header" data-text="Header" tabindex="-1">Header</h3> <p>Information about the message such as the type of message or the encoding of the message. A header can include a <a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">variety of information</a> expressed as key-value pairs. The request header and response header contain different information.</p> <h4 id="sample_request_header" data-text="Sample request header" tabindex="-1">Sample request header</h4> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">Accept: text/html Cookie: Version=1 </code></pre></devsite-code> <p>This header is equivalent to saying "I want to receive HTML in response. Here is a cookie I have."</p> <h4 id="sample_response_header" data-text="Sample response header" tabindex="-1">Sample response header</h4> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">Content-Encoding: gzip Cache-Control: no-store </code></pre></devsite-code> <p>This header is equivalent to saying "The data in this response is encoded with gzip. Don't cache this."</p> <aside class="note"><strong>Note:</strong><span> Headers can't contain comments.</span></aside> <h3 id="body" data-text="Body" tabindex="-1">Body</h3> <p>The message itself. This can be plain text, an image binary, JSON, HTML, or many other formats.</p> <h2 id="how-does-cors-work" data-text="How does CORS work?" tabindex="-1">How does CORS work?</h2> <p>The same-origin policy tells the browser to block cross-origin requests. When you need a public resource from a different origin, the resource-providing server tells the browser that the origin sending the request can access its resource. The browser remembers that and allows cross-origin resource sharing for that resource.</p> <h3 id="client-request" data-text="Step 1: client (browser) request" tabindex="-1">Step 1: client (browser) request</h3> <p>When the browser makes a cross-origin request, the browser adds an <code translate="no" dir="ltr">Origin</code> header with the current origin (scheme, host, and port).</p> <h3 id="server-response" data-text="Step 2: server response" tabindex="-1">Step 2: server response</h3> <p>When a server sees this header, and wants to allow access, it adds an <code translate="no" dir="ltr">Access-Control-Allow-Origin</code> header to the response specifying the requesting origin (or <code translate="no" dir="ltr">*</code> to allow any origin.)</p> <h3 id="response-received" data-text="Step 3: browser receives response" tabindex="-1">Step 3: browser receives response</h3> <p>When the browser sees this response with an appropriate <code translate="no" dir="ltr">Access-Control-Allow-Origin</code> header, it shares the response data with the client site.</p> <p></p> <h2 id="share-credentials" data-text="Share credentials with CORS" tabindex="-1">Share credentials with CORS</h2> <p>For privacy reasons, CORS is normally used for anonymous requests, in which the requester isn't identified. If you want to send cookies when using CORS, which can identify the sender, you need to add additional headers to the request and response.</p> <h3 id="request-credentials" data-text="Request" tabindex="-1">Request</h3> <p>Add <code translate="no" dir="ltr">credentials: 'include'</code> to the fetch options as in the following example. This includes the cookie with the request as follows:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">fetch</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'https://example.com'</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">mode</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'cors'</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">credentials</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'include'</span> <span class="devsite-syntax-p">})</span> </code></pre></devsite-code> <h3 id="response-credentials" data-text="Response" tabindex="-1">Response</h3> <p><code translate="no" dir="ltr">Access-Control-Allow-Origin</code> must be set to a specific origin (no wildcard using <code translate="no" dir="ltr">*</code>) and <code translate="no" dir="ltr">Access-Control-Allow-Credentials</code> must be set to <code translate="no" dir="ltr">true</code>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">HTTP/1.1 200 OK Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Credentials: true </code></pre></devsite-code> <h2 id="preflight-requests" data-text="Preflight requests for complex HTTP calls" tabindex="-1">Preflight requests for complex HTTP calls</h2> <p>When a web app makes a complex HTTP request, the browser adds a <em><a href="https://developer.mozilla.org/docs/Web/HTTP/CORS#preflighted_requests">preflight request</a></em> to the beginning of the request chain.</p> <p>The CORS specification defines a <em>complex request</em> as follows:</p> <ul> <li>A request that uses methods other than GET, POST, or HEAD.</li> <li>A request that includes headers other than <code translate="no" dir="ltr">Accept</code>, <code translate="no" dir="ltr">Accept-Language</code> or <code translate="no" dir="ltr">Content-Language</code>.</li> <li>A request that has a <code translate="no" dir="ltr">Content-Type</code> header other than <code translate="no" dir="ltr">application/x-www-form-urlencoded</code>, <code translate="no" dir="ltr">multipart/form-data</code>, or <code translate="no" dir="ltr">text/plain</code>.</li> </ul> <p>Browsers automatically create any necessary preflight requests and send them before the actual request message. The preflight request is an <code translate="no" dir="ltr">OPTIONS</code> request like the following example:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">OPTIONS /data HTTP/1.1 Origin: https://example.com Access-Control-Request-Method: DELETE </code></pre></devsite-code> <p>On the server side, the app receiving the request responds to the preflight request with information about the methods the application accepts from this origin:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">HTTP/1.1 200 OK Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS </code></pre></devsite-code> <p>The server response can also include an <code translate="no" dir="ltr">Access-Control-Max-Age</code> header to specify the duration in seconds to cache preflight results. This allows the client to send multiple complex requests without needing to repeat the preflight request.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2018-11-05 UTC.</p> </devsite-content-footer> <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"]],["Last updated 2018-11-05 UTC."],[],[]] </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" >Español</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": "Articles", "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="Ge2zvC8KF7ayx8+gKcV5cZMPvt1sC7"> (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,116,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,["TpcFeatures__enable_required_headers","Profiles__enable_awarding_url","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_view_transitions","Profiles__require_profile_eligibility_for_signin","DevPro__enable_developer_subscriptions","OnSwitch__enable","BookNav__enable_tenant_cache_key","MiscFeatureFlags__developers_footer_image","Search__enable_dynamic_content_confidential_banner","Search__enable_page_map","Profiles__enable_release_notes_notifications","Cloud__enable_cloudx_ping","Cloud__enable_cloudx_experiment_ids","Search__enable_suggestions_from_borg","Cloud__enable_llm_concierge_chat","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_shell","Analytics__enable_clearcut_logging","CloudShell__cloud_shell_button","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__enable_variable_operator","Cloud__enable_free_trial_server_call","MiscFeatureFlags__emergency_css","Experiments__reqs_query_experiments","Profiles__enable_profile_collections","Search__enable_ai_eligibility_checks","Profiles__enable_page_saving","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_recognition_badges","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_completecodelab_endpoint","Cloud__enable_cloud_dlp_service","Cloud__enable_legacy_calculator_redirect","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_cloud_facet_chat","Cloud__enable_cloud_shell_fte_user_flow","Concierge__enable_pushui","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_project_variables","CloudShell__cloud_code_overflow_menu"],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

Cross-Origin Resource Sharing (CORS) | Articles | web.dev