{"id":7724,"date":"2019-06-15T10:30:22","date_gmt":"2019-06-15T14:30:22","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=7724"},"modified":"2021-12-08T11:01:13","modified_gmt":"2021-12-08T16:01:13","slug":"integrity-crossorigin-script","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/","title":{"rendered":"What do Integrity and Crossorigin in HTML Script Tags Mean?"},"content":{"rendered":"\n<p>So what are all those Integrity and Crossorigin attributes you commonly find with script link tags? Well, these are used as an added layer of security over how to load scripts that can be controlled explicitly by the <a href=\"http:\/\/local.brightwhiz\/tag\/web-development\/\">web developer<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.3.1\/js\/bootstrap.min.js&quot; integrity=&quot;sha256-CjSoeELFOcH0\/uxWu6mC\/Vlrc1AARqbm\/jiiImDGV3s=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Here is the breakdown of what these attributes do.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Subresource Integrity (SRI)<\/h2>\n\n\n\n<p>SRI is a new W3C specification that allows web developers to ensure that resources hosted on third-party servers have not been tampered with. It is highly recommended that one uses SRI as a best practice, whenever <a href=\"http:\/\/local.brightwhiz\/tag\/libraries\/\">libraries<\/a> are loaded from third-party sources.<\/p>\n\n\n\n<p>The Integrity attribute defines the hash value of a resource loaded from a third-party source that has to match in order for the browser to execute it.<\/p>\n\n\n\n<p>This is an important attribute because there is always the risk of attackers modifying resources on the server which can get loaded and executed on the end -users&#8217; browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cross-Origin Resource Sharing (CORS)<\/h2>\n\n\n\n<p>This is a feature that uses additional HTTP headers to tell a <a href=\"http:\/\/local.brightwhiz\/tag\/browsers\/\">web browser<\/a> to let a web application running at one origin (usually a domain) have permission to access selected resources from a server at a different origin (domain).<\/p>\n\n\n\n<p>The possible values are <code>use-credentials<\/code> and <code>anonymous<\/code>.<\/p>\n\n\n\n<p>You can find out more about Subresource Integrity from <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Subresource_Integrity\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"broken_link\">here<\/a> and details about Cross-Origin Resource Sharing can be found <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/CORS_settings_attributes\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So what are all those Integrity and Crossorigin attributes you commonly find with script link tags? Well, these are used as an added layer of security over how to load&#8230;<\/p>\n","protected":false},"author":1,"featured_media":7725,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,27,16,17],"tags":[106,313,328,424,433,523,526,543,544,635,636,638],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What does Integrity and Crossorigin in HTML Script Tags Mean?<\/title>\n<meta name=\"description\" content=\"What integrity and crossorigin means when used as attributes in HTML5 script tags to make your website users more secure via CORS and SRI\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What does Integrity and Crossorigin in HTML Script Tags Mean?\" \/>\n<meta property=\"og:description\" content=\"What integrity and crossorigin means when used as attributes in HTML5 script tags to make your website users more secure via CORS and SRI\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-15T14:30:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T16:01:13+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"What do Integrity and Crossorigin in HTML Script Tags Mean?\",\"datePublished\":\"2019-06-15T14:30:22+00:00\",\"dateModified\":\"2021-12-08T16:01:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/\"},\"wordCount\":230,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg\",\"keywords\":[\"Browsers\",\"InfoSec\",\"JavaScript\",\"Open Source\",\"Optimization\",\"Scripting\",\"Security\",\"Software Design\",\"Software development\",\"Web\",\"Web Applications\",\"Web Development\"],\"articleSection\":[\"Guides\",\"Programming\",\"Technology\",\"Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/\",\"url\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/\",\"name\":\"What does Integrity and Crossorigin in HTML Script Tags Mean?\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg\",\"datePublished\":\"2019-06-15T14:30:22+00:00\",\"dateModified\":\"2021-12-08T16:01:13+00:00\",\"description\":\"What integrity and crossorigin means when used as attributes in HTML5 script tags to make your website users more secure via CORS and SRI\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Integrity and Crossorigin in HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What do Integrity and Crossorigin in HTML Script Tags Mean?\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What does Integrity and Crossorigin in HTML Script Tags Mean?","description":"What integrity and crossorigin means when used as attributes in HTML5 script tags to make your website users more secure via CORS and SRI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/","og_locale":"en_US","og_type":"article","og_title":"What does Integrity and Crossorigin in HTML Script Tags Mean?","og_description":"What integrity and crossorigin means when used as attributes in HTML5 script tags to make your website users more secure via CORS and SRI","og_url":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2019-06-15T14:30:22+00:00","article_modified_time":"2021-12-08T16:01:13+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"What do Integrity and Crossorigin in HTML Script Tags Mean?","datePublished":"2019-06-15T14:30:22+00:00","dateModified":"2021-12-08T16:01:13+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/"},"wordCount":230,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg","keywords":["Browsers","InfoSec","JavaScript","Open Source","Optimization","Scripting","Security","Software Design","Software development","Web","Web Applications","Web Development"],"articleSection":["Guides","Programming","Technology","Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/","url":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/","name":"What does Integrity and Crossorigin in HTML Script Tags Mean?","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg","datePublished":"2019-06-15T14:30:22+00:00","dateModified":"2021-12-08T16:01:13+00:00","description":"What integrity and crossorigin means when used as attributes in HTML5 script tags to make your website users more secure via CORS and SRI","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/integrity-crossorigin-script\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/work-integrity.jpg","width":1200,"height":630,"caption":"Integrity and Crossorigin in HTML"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"What do Integrity and Crossorigin in HTML Script Tags Mean?"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/twitter.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/7724"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=7724"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/7724\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/7725"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=7724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=7724"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=7724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}