{"id":7718,"date":"2019-06-15T11:46:31","date_gmt":"2019-06-15T15:46:31","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=7718"},"modified":"2021-12-08T11:00:05","modified_gmt":"2021-12-08T16:00:05","slug":"wordpress-script-integrity-crossorigin","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/","title":{"rendered":"How to use Integrity and Crossorigin in a WordPress Theme"},"content":{"rendered":"\n<p>In our previous <a href=\"http:\/\/local.brightwhiz\/integrity-crossorigin-script\/\">article<\/a>, we talked about how and why you should use Integrity and Crossorigin in your script link tag attributes.<\/p>\n\n\n\n<p>For those who are somewhat familiar with web development, you will know that more often or not websites are built using Frameworks or CMS tools, therefore, you may not interact directly with the raw <a href=\"http:\/\/local.brightwhiz\/tag\/html\/\">HTML<\/a> code in order to use the attributes as proposed in our other above-mentioned article.<\/p>\n\n\n\n<p>Because of that, in this guide, we will show you how to to use Integrity and Crossorigin in your <a href=\"http:\/\/local.brightwhiz\/tag\/wordpress\/\">WordPress<\/a> themes.<\/p>\n\n\n\n<p>To get started you will need to add the script in your theme&#8217;s functions <a href=\"http:\/\/local.brightwhiz\/tag\/php\/\">PHP<\/a> script under the section where you have enqueued scripts and <a href=\"http:\/\/local.brightwhiz\/tag\/css\/\">CSS<\/a> files. You will first need to register the said script, enqueue the script then add the data. We have a simple example as a guide that will add Bootstrap to your theme.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-php\">wp_register_script(&#039;Bootstrap4&#039;, &#039;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.3.1\/js\/bootstrap.min.js&#039;, array(), &#039;3.3.1&#039;, true);\nwp_enqueue_script(&#039;Bootstrap4&#039;);\nwp_script_add_data( &#039;Bootstrap4&#039;, array( &#039;integrity&#039;, &#039;crossorigin&#039; ) , array( &#039;sha256-CjSoeELFOcH0\/uxWu6mC\/Vlrc1AARqbm\/jiiImDGV3s=&#039;, &#039;anonymous&#039; ) );<\/code><\/pre>\n\n\n\n<p>There you have it.<\/p>\n\n\n\n<p>You can read more about Integrity <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Subresource_Integrity\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"broken_link\">here<\/a> and Crossorigin <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/CORS_settings_attributes\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> from the official JavaScript reference.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our previous article, we talked about how and why you should use Integrity and Crossorigin in your script link tag attributes. For those who are somewhat familiar with web&#8230;<\/p>\n","protected":false},"author":1,"featured_media":7727,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,9,27,16,17],"tags":[106,136,170,303,313,320,328,424,452,471,543,635,637,651],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress Script With Integrity and Crossorigin Best Practice<\/title>\n<meta name=\"description\" content=\"This is the recommended way of using integrity and crossorigin in a WordPress theme when enqueueing JavaScript in your templates\" \/>\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\/wordpress-script-integrity-crossorigin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Script With Integrity and Crossorigin Best Practice\" \/>\n<meta property=\"og:description\" content=\"This is the recommended way of using integrity and crossorigin in a WordPress theme when enqueueing JavaScript in your templates\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/\" \/>\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-15T15:46:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T16:00:05+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.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\/wordpress-script-integrity-crossorigin\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"How to use Integrity and Crossorigin in a WordPress Theme\",\"datePublished\":\"2019-06-15T15:46:31+00:00\",\"dateModified\":\"2021-12-08T16:00:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/\"},\"wordCount\":180,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.jpg\",\"keywords\":[\"Browsers\",\"CMS\",\"CSS\",\"HTML\",\"InfoSec\",\"Internet\",\"JavaScript\",\"Open Source\",\"PHP\",\"Programming\",\"Software Design\",\"Web\",\"Web Design\",\"WordPress\"],\"articleSection\":[\"Guides\",\"How To\",\"Programming\",\"Technology\",\"Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/\",\"url\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/\",\"name\":\"WordPress Script With Integrity and Crossorigin Best Practice\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.jpg\",\"datePublished\":\"2019-06-15T15:46:31+00:00\",\"dateModified\":\"2021-12-08T16:00:05+00:00\",\"description\":\"This is the recommended way of using integrity and crossorigin in a WordPress theme when enqueueing JavaScript in your templates\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.jpg\",\"width\":1200,\"height\":630,\"caption\":\"CMS WordPress Crossorigin\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Integrity and Crossorigin in a WordPress Theme\"}]},{\"@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":"WordPress Script With Integrity and Crossorigin Best Practice","description":"This is the recommended way of using integrity and crossorigin in a WordPress theme when enqueueing JavaScript in your templates","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\/wordpress-script-integrity-crossorigin\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Script With Integrity and Crossorigin Best Practice","og_description":"This is the recommended way of using integrity and crossorigin in a WordPress theme when enqueueing JavaScript in your templates","og_url":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2019-06-15T15:46:31+00:00","article_modified_time":"2021-12-08T16:00:05+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.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\/wordpress-script-integrity-crossorigin\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"How to use Integrity and Crossorigin in a WordPress Theme","datePublished":"2019-06-15T15:46:31+00:00","dateModified":"2021-12-08T16:00:05+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/"},"wordCount":180,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.jpg","keywords":["Browsers","CMS","CSS","HTML","InfoSec","Internet","JavaScript","Open Source","PHP","Programming","Software Design","Web","Web Design","WordPress"],"articleSection":["Guides","How To","Programming","Technology","Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/","url":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/","name":"WordPress Script With Integrity and Crossorigin Best Practice","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.jpg","datePublished":"2019-06-15T15:46:31+00:00","dateModified":"2021-12-08T16:00:05+00:00","description":"This is the recommended way of using integrity and crossorigin in a WordPress theme when enqueueing JavaScript in your templates","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2019\/04\/cms-wordpress-crossorigin.jpg","width":1200,"height":630,"caption":"CMS WordPress Crossorigin"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/wordpress-script-integrity-crossorigin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"How to use Integrity and Crossorigin in a WordPress Theme"}]},{"@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\/7718"}],"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=7718"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/7718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/7727"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=7718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=7718"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=7718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}