{"id":809641,"date":"2020-04-10T12:45:59","date_gmt":"2020-04-10T19:45:59","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=809641"},"modified":"2022-12-28T10:35:08","modified_gmt":"2022-12-28T18:35:08","slug":"using-html-with-popups-in-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript","title":{"rendered":"Using HTML with Popups in the ArcGIS API for JavaScript"},"author":23691,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[618911,29091,26161,212872,24071],"industry":[],"product":[36831],"class_list":["post-809641","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-breaking-change","tag-html","tag-new-release","tag-popups","tag-security","product-js-api-arcgis"],"acf":{"short_description":"How to use HTML in popups after a sanitzer was added to the ArcGIS Maps SDK for JavaScript in the v4.14 release. ","flexible_content":[{"acf_fc_layout":"content","content":"<p>As a Technical Support Specialist at Esri, I have already received a few questions concerning changes to popups in the ArcGIS Maps SDK for JavaScript. An <a href=\"https:\/\/github.com\/Esri\/arcgis-html-sanitizer\">HTML sanitizer<\/a> was added to handle some security concerns, which was mentioned in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/4.14\/index.html#breaking-changes\">breaking changes<\/a> section of the v4.14 release notes. In this blog post I will talk about why it was added and how it will affect your development moving forward.<\/p>\n<p><b>Here is the <a href=\"https:\/\/codepen.io\/benesri\/pen\/ExjZoOg\">sample code<\/a> if you are looking for a quick solution.<\/b><\/p>\n<p>&nbsp;<\/p>\n<h2>Why sanitize HTML?<\/h2>\n<p>The main concern when allowing users to inject HTML into applications is Cross-Site Scripting (XSS) attacks. According to <a href=\"https:\/\/owasp.org\/www-community\/attacks\/xss\/\">OWASP<\/a>:<\/p>\n"},{"acf_fc_layout":"blockquote","content":"<p>Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user.<\/p>\n"},{"acf_fc_layout":"content","content":"<p>The HTML sanitizer used by the ArcGIS Maps SDK for JavaScript allows common HTML elements, while removing potentially harmful code. For example, let&#8217;s say you define your <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-PopupTemplate.html\">Popup Template<\/a> as:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1467622,"id":1467622,"title":"approved HTML popup","filename":"1.png","filesize":15707,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\/1-44","alt":"approved HTML popup","author":"23691","description":"Code snippet showing a popup with approved HTML in the ArcGIS JavaScript API","caption":"","name":"1-44","status":"inherit","uploaded_to":809641,"date":"2022-01-25 22:06:02","modified":"2022-01-25 22:10:58","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":845,"height":137,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1-213x137.png","thumbnail-width":213,"thumbnail-height":137,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1.png","medium-width":464,"medium-height":75,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1.png","medium_large-width":768,"medium_large-height":125,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1.png","large-width":845,"large-height":137,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1.png","1536x1536-width":845,"1536x1536-height":137,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1.png","2048x2048-width":845,"2048x2048-height":137,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1-826x134.png","card_image-width":826,"card_image-height":134,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/1.png","wide_image-width":845,"wide_image-height":137}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>This code clearly contains HTML: there are paragraph, link, and image elements. However, the popup will work because there is nothing potentially dangerous that could run malicious code. Check out <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/reference\/supported-html.htm\">this page<\/a> for a list of supported HTML tags. All of the elements on that list are not sanitized, as well as some additional elements supported after the v4.15 release.<\/p>\n<p>The next code snippet contains a button with an onclick function:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1467632,"id":1467632,"title":"sanitized HTML button in popup","filename":"2.png","filesize":8761,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\/2-45","alt":"sanitized HTML button in popup","author":"23691","description":"Code snippet showing a button being sanitized from a popup in the ArcGIS JavaScript API","caption":"","name":"2-45","status":"inherit","uploaded_to":809641,"date":"2022-01-25 22:06:03","modified":"2022-01-25 22:10:58","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":840,"height":101,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2-213x101.png","thumbnail-width":213,"thumbnail-height":101,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2.png","medium-width":464,"medium-height":56,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2.png","medium_large-width":768,"medium_large-height":92,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2.png","large-width":840,"large-height":101,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2.png","1536x1536-width":840,"1536x1536-height":101,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2.png","2048x2048-width":840,"2048x2048-height":101,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2-826x99.png","card_image-width":826,"card_image-height":99,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/2.png","wide_image-width":840,"wide_image-height":101}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>This code will be sanitized because it can be potentially harmful, depending on the function.<\/p>\n<p>&nbsp;<\/p>\n<h2>What to do if your HTML is sanitized<\/h2>\n<p>The work-around is to use a function to directly modify the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\">DOM node<\/a> of the popup, which bypasses the HTML sanitizer. Therefore, in order to add a button to your popup, you can define the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-PopupTemplate.html\">Popup Template<\/a> as:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1468182,"id":1468182,"title":"","filename":"6.png","filesize":15207,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\/6-29","alt":"","author":"23691","description":"","caption":"","name":"6-29","status":"inherit","uploaded_to":809641,"date":"2022-01-26 18:41:02","modified":"2022-01-26 18:41:14","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":820,"height":192,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6-213x192.png","thumbnail-width":213,"thumbnail-height":192,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6.png","medium-width":464,"medium-height":109,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6.png","medium_large-width":768,"medium_large-height":180,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6.png","large-width":820,"large-height":192,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6.png","1536x1536-width":820,"1536x1536-height":192,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6.png","2048x2048-width":820,"2048x2048-height":192,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6.png","card_image-width":820,"card_image-height":192,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/6.png","wide_image-width":820,"wide_image-height":192}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The above code will work for most people. Some of you may have noticed a slight change between the two previous code snippets. The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-PopupTemplate.html\">Popup Template<\/a> that modifies the DOM node of the popup does not contain any <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/arcade\/\">Arcade<\/a> expressions. Here is a <a href=\"https:\/\/codepen.io\/benesri\/pen\/ExjZoOg\">sample<\/a> that demonstrates how to access feature attributes as well as use HTML in your popup, and here is the snippet:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1467682,"id":1467682,"title":"HTML button and feature attributes in popup","filename":"4.png","filesize":21878,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\/4-44","alt":"HTML button and feature attributes in popup","author":"23691","description":"Code snippet to create a popup that has access to feature attributes, and has an HTML button, using the ArcGIS JavaScript API","caption":"","name":"4-44","status":"inherit","uploaded_to":809641,"date":"2022-01-25 22:16:33","modified":"2022-01-25 22:19:13","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":921,"height":241,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4.png","medium-width":464,"medium-height":121,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4.png","medium_large-width":768,"medium_large-height":201,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4.png","large-width":921,"large-height":241,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4.png","1536x1536-width":921,"1536x1536-height":241,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4.png","2048x2048-width":921,"2048x2048-height":241,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4-826x216.png","card_image-width":826,"card_image-height":216,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/4.png","wide_image-width":921,"wide_image-height":241}},"image_position":"center","orientation":"horizontal","hyperlink":""}],"authors":[{"ID":23691,"user_firstname":"Ben","user_lastname":"Elan","nickname":"Izzy","user_nicename":"belan","display_name":"Ben Elan","user_email":"belan@esri.com","user_url":"https:\/\/github.com\/benelan","user_registered":"2020-04-07 18:06:44","user_description":"Web developer specializing in UI\/UX and spatial data visualization\/analysis. \r\n\r\nProduct Engineer for Calcite Components and ArcGIS API for JavaScript.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/card-1.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/b3.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using HTML with Popups in the ArcGIS API for JavaScript<\/title>\n<meta name=\"description\" content=\"Explanation and example for using HTML elements in ArcGIS Maps SDK for JavaScript popups after the addition of an HTML sanitzer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using HTML with Popups in the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:description\" content=\"Explanation and example for using HTML elements in ArcGIS Maps SDK for JavaScript popups after the addition of an HTML sanitzer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-28T18:35:08+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Ben Elan\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6e893143457a4997538307397e204cdc\"},\"headline\":\"Using HTML with Popups in the ArcGIS API for JavaScript\",\"datePublished\":\"2020-04-10T19:45:59+00:00\",\"dateModified\":\"2022-12-28T18:35:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\"},\"wordCount\":10,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"breaking change\",\"HTML\",\"New Release\",\"popups\",\"Security\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\",\"name\":\"Using HTML with Popups in the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2020-04-10T19:45:59+00:00\",\"dateModified\":\"2022-12-28T18:35:08+00:00\",\"description\":\"Explanation and example for using HTML elements in ArcGIS Maps SDK for JavaScript popups after the addition of an HTML sanitzer.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using HTML with Popups in the ArcGIS API for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6e893143457a4997538307397e204cdc\",\"name\":\"Ben Elan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png\",\"caption\":\"Ben Elan\"},\"description\":\"Web developer specializing in UI\/UX and spatial data visualization\/analysis. Product Engineer for Calcite Components and ArcGIS API for JavaScript.\",\"sameAs\":[\"https:\/\/github.com\/benelan\",\"https:\/\/www.linkedin.com\/in\/benelan\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Web Components\",\"UI\",\"UX\",\"User Interface\",\"Node\",\"Automation\",\"GitHub Action\",\"Mapping\",\"Spatial Data\",\"Visualization\",\"Analysis\",\"Web Design\",\"Web Development\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using HTML with Popups in the ArcGIS API for JavaScript","description":"Explanation and example for using HTML elements in ArcGIS Maps SDK for JavaScript popups after the addition of an HTML sanitzer.","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":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Using HTML with Popups in the ArcGIS API for JavaScript","og_description":"Explanation and example for using HTML elements in ArcGIS Maps SDK for JavaScript popups after the addition of an HTML sanitzer.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2022-12-28T18:35:08+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript"},"author":{"name":"Ben Elan","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6e893143457a4997538307397e204cdc"},"headline":"Using HTML with Popups in the ArcGIS API for JavaScript","datePublished":"2020-04-10T19:45:59+00:00","dateModified":"2022-12-28T18:35:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["breaking change","HTML","New Release","popups","Security"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript","name":"Using HTML with Popups in the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2020-04-10T19:45:59+00:00","dateModified":"2022-12-28T18:35:08+00:00","description":"Explanation and example for using HTML elements in ArcGIS Maps SDK for JavaScript popups after the addition of an HTML sanitzer.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-html-with-popups-in-the-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Using HTML with Popups in the ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6e893143457a4997538307397e204cdc","name":"Ben Elan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png","caption":"Ben Elan"},"description":"Web developer specializing in UI\/UX and spatial data visualization\/analysis. Product Engineer for Calcite Components and ArcGIS API for JavaScript.","sameAs":["https:\/\/github.com\/benelan","https:\/\/www.linkedin.com\/in\/benelan"],"gender":"male","knowsAbout":["JavaScript","React","Web Components","UI","UX","User Interface","Node","Automation","GitHub Action","Mapping","Spatial Data","Visualization","Analysis","Web Design","Web Development"],"knowsLanguage":["English"],"jobTitle":"Product Engineer","worksFor":"Esri","url":""}]}},"text_date":"April 10, 2020","author_name":"Ben Elan","author_page":false,"custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/b3.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":618911,"name":"breaking change","slug":"breaking-change","term_group":0,"term_taxonomy_id":618911,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":29091,"name":"HTML","slug":"html","term_group":0,"term_taxonomy_id":29091,"taxonomy":"post_tag","description":"","parent":0,"count":12,"filter":"raw"},{"term_id":26161,"name":"New Release","slug":"new-release","term_group":0,"term_taxonomy_id":26161,"taxonomy":"post_tag","description":"","parent":0,"count":21,"filter":"raw"},{"term_id":212872,"name":"popups","slug":"popups","term_group":0,"term_taxonomy_id":212872,"taxonomy":"post_tag","description":"","parent":0,"count":12,"filter":"raw"},{"term_id":24071,"name":"Security","slug":"security","term_group":0,"term_taxonomy_id":24071,"taxonomy":"post_tag","description":"","parent":0,"count":124,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/809641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/23691"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=809641"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/809641\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=809641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=809641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=809641"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=809641"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=809641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}