Button markup

assets/dev/js/editor/utils/helpers.js

@@ -1,7 +1,7 @@
 import ColorPicker from './color-picker';
 import DocumentHelper from 'elementor-editor/document/helper-bc';
 import ContainerHelper from 'elementor-editor-utils/container-helper';
-import DOMPurify from 'dompurify';
+import DOMPurify, { isValidAttribute } from 'dompurify';
 
 const allowedHTMLWrapperTags = [
 	'article',
@@ -704,4 +704,10 @@ module.exports = {
 	sanitize( value, options ) {
 		return DOMPurify.sanitize( value, options );
 	},
+
+	sanitizeUrl( url ) {
+		const isValidUrl = isValidAttribute( 'a', 'href', url );
+
+		return isValidUrl ? url : '';
+	},
 };

includes/widgets/heading.php

@@ -390,7 +390,7 @@ protected function content_template() {
 		let title = elementor.helpers.sanitize( settings.title, { ALLOW_DATA_ATTR: false } );
 
 		if ( '' !== settings.link.url ) {
-			title = '<a href="' + _.escape( settings.link.url ) + '">' + title + '</a>';
+			title = '<a href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '">' + title + '</a>';
 		}
 
 		view.addRenderAttribute( 'title', 'class', [ 'elementor-heading-title' ] );

includes/widgets/icon-box.php

@@ -790,7 +790,7 @@ protected function content_template() {
 		view.addRenderAttribute( 'icon', 'class', 'elementor-icon elementor-animation-' + settings.hover_animation );
 
 		if ( hasLink ) {
-			view.addRenderAttribute( 'link', 'href', settings.link.url );
+			view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link.url ) );
 			view.addRenderAttribute( 'icon', 'tabindex', '-1' );
 		}
 

includes/widgets/icon-list.php

@@ -806,7 +806,7 @@ protected function content_template() {
 
 					<li {{{ view.getRenderAttributeString( 'list_item' ) }}}>
 						<# if ( item.link && item.link.url ) { #>
-							<a href="{{ item.link.url }}">
+							<a href="{{ elementor.helpers.sanitizeUrl( item.link.url ) }}">
 						<# } #>
 						<# if ( item.icon || item.selected_icon.value ) { #>
 						<span class="elementor-icon-list-icon">

includes/widgets/icon.php

@@ -487,7 +487,7 @@ protected function content_template() {
 			return;
 		}
 
-		const link = settings.link.url ? 'href="' + _.escape( settings.link.url ) + '"' : '',
+		const link = settings.link.url ? 'href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '"' : '',
 				iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
 				migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
 				iconTag = link ? 'a' : 'div';

includes/widgets/image-box.php

@@ -700,7 +700,7 @@ protected function content_template() {
 			var imageHtml = '<img src="' + _.escape( image_url ) + '" class="elementor-animation-' + _.escape( settings.hover_animation ) + '" />';
 
 			if ( settings.link.url ) {
-				imageHtml = '<a href="' + _.escape( settings.link.url ) + '" tabindex="-1">' + imageHtml + '</a>';
+				imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '" tabindex="-1">' + imageHtml + '</a>';
 			}
 
 			html += '<figure class="elementor-image-box-img">' + imageHtml + '</figure>';
@@ -714,7 +714,7 @@ protected function content_template() {
 					titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
 
 				if ( settings.link.url ) {
-					title_html = '<a href="' + _.escape( settings.link.url ) + '">' + title_html + '</a>';
+					title_html = '<a href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '">' + title_html + '</a>';
 				}
 
 				view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' );

includes/widgets/image.php

@@ -822,7 +822,7 @@ protected function content_template() {
 			}
 
 			if ( link_url ) {
-					#><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ link_url }}"><#
+					#><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ elementor.helpers.sanitizeUrl( link_url ) }}"><#
 			}
 						#><img src="{{ image_url }}" class="{{ imgClass }}" /><#
 

includes/widgets/social-icons.php

@@ -660,7 +660,7 @@ protected function content_template() {
 					social = elementor.helpers.getSocialNetworkNameFromIcon( item.social_icon, item.social, false, migrated );
 				#>
 				<span class="elementor-grid-item">
-					<a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ link }}">
+					<a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ elementor.helpers.sanitizeUrl( link ) }}">
 						<span class="elementor-screen-only">{{{ social }}}</span>
 						<#
 							iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.social_icon, {}, 'i', 'object' );

includes/widgets/testimonial.php

@@ -567,7 +567,7 @@ protected function content_template() {
 
 			var imageHtml = '<img src="' + _.escape( imageUrl ) + '" alt="testimonial" />';
 			if ( settings.link.url ) {
-				imageHtml = '<a href="' + _.escape( settings.link.url ) + '">' + imageHtml + '</a>';
+				imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link.url ) + '">' + imageHtml + '</a>';
 			}
 		}
 

includes/widgets/traits/button-trait.php

@@ -577,7 +577,7 @@ protected function content_template() {
 		view.addRenderAttribute( 'button', 'class', 'elementor-button' );
 
 		if ( '' !== settings.link.url ) {
-			view.addRenderAttribute( 'button', 'href', settings.link.url );
+			view.addRenderAttribute( 'button', 'href', elementor.helpers.sanitizeUrl( settings.link.url ) );
 			view.addRenderAttribute( 'button', 'class', 'elementor-button-link' );
 		} else {
 			view.addRenderAttribute( 'button', 'role', 'button' );