tracker issue : CF-3923189

select a category, or use search below
(searches all categories and all time range)
Title:

[ANeff] Bug for: cf_socialplugin fixes and enhancements

| View in Tracker

Status/Resolution/Reason: Closed/Fixed/

Reporter/Name(from Bugbase): Aaron Neff / Aaron Neff (Aaron Neff)

Created: 01/19/2015

Components: Social

Versions: 11.0

Failure Type: Enhancement Request

Found In Build/Fixed In Build: CF11_Final /

Priority/Frequency: Major / Some users will encounter

Locale/System: ALL / Platforms All

Vote Count: 0

Listed in the version 2016.0.0.297996 Issues Fixed doc
Verification notes: verified_fixed on September 08, 2019 using build 2016.0.01.298513 
Please see attached 20150119_socialplugin_fixesandenhancements for these files:
- socialplugin_original.cfm (original from CF11 Update 3)
- socialplugin_revised.cfm (contains fixes and enhancements)
- readme.htm (contains full details) 

Full details from readme.htm:

------------
Enhancements
------------

- For consistency, added the HTML5 version for like, likebox, activityfeed, and subscribe and added the iframe version for follow and tweet. Added the format="html4|html5(default)" attribute for specifying iframe (html4) or div (html5). This is ignored for commentbox and plusone because an iframe version is not available for those.
- To allow the JavaScript to be placed in the <head>, and to remove the use of REQUEST-scoped variables for determining if the JavaScript had already been output, added the render="all(default)|html|javascript". Encapsulated the JavaScript for Facebook, Twitter and Google into a getJavaScript() function.
- To support Facebook's new versioning support, added the apiversion attribute for all Facebook types. Default is 1.0. If the version is no longer supported, Facebook automatically uses the oldest supported version.
- Previously, only the urls were encoded when output. Encoding method was incorrect for two of the cases. And canonicalization was not being done in any of the cases (and CF currently doesn't even have a way to properly canonicalize URLs). To allow the remaining options to be properly encoded, and to allow developer control over the encoding (in case developer is already encoding the other options), added the encodeoutput="true(default)|false" attribute. When true, output is canonicalized and encoded for its context. Added the udfCanonicalizeURL() function for canonicalizing URLs b/c canonicalize() converts, for example, &pi to the Pi symbol in the query string ?foo=bar&pid=product_id.

----------------------------- Additional Watson Details -----------------------------

Watson Bug ID:	3923189

External Customer Info:
External Company:  
External Customer Name: itisdesign
External Customer Email:

Attachments:

  1. January 19, 2015 00:00:00: 1_20150119_socialplugin_fixesandenhancements.zip
  2. January 20, 2015 00:00:00: 2_20150120_socialplugin_update.zip

Comments:

----------- Fixes ----------- - The getCurrentUrl() function wasn't appending CGI.path_info and CGI.query_string to the returned URL (line 38 of socialplugin.cfm) - XSS fixes (in addition to adding the encodeoutput="true(default)|false" option and adding tag attributes for the rest of each plugin's options) -- Twitter Tweet Button --- changed encodeForURL(ATTRIBUTES.url) to encodeForHTMLAttribute(ATTRIBUTES.url) (line 273 of socialplugin.cfm) -- Google +1 Button --- changed encodeForURL(ATTRIBUTES.url) to encodeForHTMLAttribute(ATTRIBUTES.url) (line 315 of socialplugin.cfm) - Facebook Like Button -- added "button" as a possible ATTRIBUTES.layout value (line 91 of socialplugin.cfm) -- removed unsupported &amp;font and &amp;send=false from Facebook URL (line 99 of socialplugin.cfm) -- un-hardcoded the height option by adding ATTRIBUTES.height and changing height:90px; to #ATTRIBUTES.height#px; (line 99 of socialplugin.cfm) -- removed the trailing &amp from the iframe's src attribute (line 99 of socialplugin.cfm) -- changed =#LCase(Replace(ATTRIBUTES.layout, ' ', '_', 'all'))# to =#LCase(ATTRIBUTES.layout)# b/c the layout options are hardcoded (line 99 of socialplugin.cfm) - Facebook Like Box -- changed the url attribute's default from getCurrentUrl() to "https://www.facebook.com/FacebookDevelopers" and added the following comment: "must be a Facebook Page URL" (line 114 of socialplugin.cfm) -- removed unsupported &amp;border_color from Facebook URL (line 126 of socialplugin.cfm) - Facebook Comment Box -- added the missing data-colorscheme="#LCase(ATTRIBUTES.colorscheme)#" to the div tag (line 159 of socialplugin.cfm) -- added the missing style attribute to the div tag (line 159 of socialplugin.cfm) -- added support for 100% for width to match Facebook's doc - Facebook Activity Feed -- Facebook allows specifying a frame name for linktarget, so enabled this ability by disabling the ATTRIBUTES.linktarget validation (line 182 of socialplugin.cfm) -- removed the unnecessary LCase() from around the following: ATTRIBUTES.appid, ATTRIBUTES.action and ATTRIBUTES.linktarget (line 188 of socialplugin.cfm) -- removed unsupported &amp;font and &amp;border_color from Facebook URL (line 188 of socialplugin.cfm) - Facebook Follow Button (formerly Subscribe Button) -- changed subscribe.php to follow.php per Facebook's doc b/c the Subscribe Button is now the Follow Button (line 214 of socialplugin.cfm) -- removed unsupported &amp;font and &amp;send=false from Facebook URL (line 214 of socialplugin.cfm) -- removed the trailing &amp from the iframe's src attribute (line 214 of socialplugin.cfm) -- changed =#LCase(Replace(ATTRIBUTES.layout, ' ', '_', 'all'))# to =#LCase(ATTRIBUTES.layout)# b/c the layout options are hardcoded (line 214 of socialplugin.cfm) -- added language validation
Comment by External U.
8936 | January 19, 2015 06:02:17 AM GMT
----------- Fixes (continued) ----------- - Twitter Follow Button changed =#ATTRIBUTES.showusername# to ="#ATTRIBUTES.showusername#" (quotes were missing) (line 236 of socialplugin.cfm) -- removed unsupported "small" from possible values for size and changed default from small to medium to match Twitter's default (which was the size CF was actually displaying by default) (lines 223 and 230 of socialplugin.cfm) - Twitter Tweet Button -- added the missing style="#ATTRIBUTES.style#" to the 'a' tag (line 273 of socialplugin.cfm) -- support for the mention and hashtag buttons was missing (now supported when format is html5) added the tweettype="share(default),mention,hashtag" attribute and validation and the username="" attribute in order to support the mention and hashtag buttons -- changed twitter-share-button to twitter-#ATTRIBUTES.tweettype#-button in order to support the mention and hashtag buttons (line 273 of socialplugin.cfm) -- changed the ATTRIBUTES.buttonsize validation from 'small,large' to 'medium,large' b/c medium and large are currently the only supported values (line 267 of socialplugin.cfm) -- changed the default for size from small to medium to match Twitter's default (which was the size CF was actually displaying by default) (line 255 of socialplugin.cfm) -- added "vertical" as a possible ATTRIBUTES.count value (line 268 of socialplugin.cfm) -- added the missing data-lang attribute to the 'a' tag (line 273 of socialplugin.cfm) -- removed the unnecessary len() check from around ATTRIBUTES.tweettext (line 273 of socialplugin.cfm) -- changed the default for count from none to horizontal to match Twitter's default and to match the PlusOne button's default which is bubble (line 258 of socialplugin.cfm) -- added language validation - Google +1 Button -- changed annotaion to annotation (line 310 of socialplugin.cfm) -- renamed the buttonsize attribute's unsupported "large" option to "standard" and changed the default from small to medium to match the height of the Facebook and Twitter buttons (lines 301 and 311 of socialplugin.cfm) -- changed the default for language from en to en-US to match Google's doc (line 302 of socialplugin.cfm) -- added language validation
Comment by External U.
8937 | January 19, 2015 06:02:57 AM GMT
Here are the current attributes. Except for apiversion, format, render and encodeoutput, the remaining attributes were added b/c the extraoptions attribute allows XSS. So all plugin options needed to be added as tag attributes. The apiversion, format, render and encodeoutput attributes are explained above under the Enhancements section. <cf_socialplugin type = "like" appid = "facebook_app_id" (NEW) apiversion = "1.0|2.0|2.1|2.2|..(default is 1.0 or lowest supported version)" (NEW) format = "html4|html5(default) If html4, plugin is rendered in an iframe. If html5, plugin is rendered in a div." (NEW) render = "all(default)|html|javascript If html, only the HTML is rendered. If javascript, only the JavaScript is rendered. This allows the JavaScript and HTML to be placed at separate locations in the page." (NEW) encodeoutput = "true(default)|false If true, output is canonicalized and then encoded for its context." (NEW) url = "URL to like. Default is current page." layout = "standard(default)|box_count|button_count|button" (NEW: button option) showfaces = "true(default)|false" verb = "like(default)|recommend" colorscheme = "light(default)|dark" width = "default is 450" height = "default is 90" (UPDATED: 90 was hard-coded but is now configurable) kiddirectedsite = "true|false(default)" (NEW) share = "true|false(default)" (NEW) referral = "label_for_tracking_referrals must be less than 50 characters" (NEW) style ="" extraoptions = "" >
Comment by External U.
8938 | January 19, 2015 06:04:08 AM GMT
----------- Current Attributes (continued) ----------- <cf_socialplugin type = "likebox" appid = "facebook_app_id" (NEW) apiversion = "1.0|2.0|2.1|2.2|..(default is 1.0 or lowest supported version)" (NEW) format = "html4|html5(default) If html4, plugin is rendered in an iframe. If html5, plugin is rendered in a div." (NEW) render = "all(default)|html|javascript If html, only the HTML is rendered. If javascript, only the JavaScript is rendered. This allows the JavaScript and HTML to be placed at separate locations in the page." (NEW) encodeoutput = "true(default)|false If true, output is canonicalized and then encoded for its context." (NEW) url = "This refers to a Facebook Page. Default is current page https://www.facebook.com/FacebookDevelopers." showfaces = "true(default)|false" showstream = "true(default)|false" showheader = "true(default)|false" showborder = "true(default)|false" (NEW) forcewall = "true|false(default)" (NEW) colorscheme = "light(default)|dark" width = "default is 292" height = "default is 590" style = "" extraoptions = "" >
Comment by External U.
8939 | January 19, 2015 06:04:46 AM GMT
----------- Current Attributes (continued) ----------- <cf_socialplugin type = "commentbox" appid = "facebook_app_id" (NEW) apiversion = "1.0|2.0|2.1|2.2|..(default is 1.0 or lowest supported version)" (NEW) format = "Only accepts html5 (the default), which renders the plugin in a div." (NEW) render = "all(default)|html|javascript If html, only the HTML is rendered. If javascript, only the JavaScript is rendered. This allows the JavaScript and HTML to be placed at separate locations in the page." (NEW) encodeoutput = "true(default)|false If true, output is canonicalized and then encoded for its context." (NEW) url = "URL to display comments from. Default is current page." width= "Default is 292. Width in pixels or 100%." (updated: 100% is now allowed) colorscheme = "light(default)|dark" numberofposts = "default is 2" orderby = "social(default),reverse_time,time" (NEW) mobile = "true|false (auto-detected by default)" (NEW) style = "" extraoptions = "" >
Comment by External U.
8940 | January 19, 2015 06:05:20 AM GMT
----------- Current Attributes (continued) ----------- <cf_socialplugin type = "activityfeed" appid= "facebook_app_id" apiversion = "1.0|2.0|2.1|2.2|..(default is 1.0 or lowest supported version)" (NEW) format = "html4|html5(default) If html4, plugin is rendered in an iframe. If html5, plugin is rendered in a div." (NEW) render = "all(default)|html|javascript If html, only the HTML is rendered. If javascript, only the JavaScript is rendered. This allows the JavaScript and HTML to be placed at separate locations in the page." (NEW) encodeoutput = "true(default)|false If true, output is canonicalized and then encoded for its context." (NEW) width = "default is 300" height = "default is 300" colorscheme = "light(default)|dark" showheader = "true(default)|false" action = "" linktarget = "_blank|_top|_parent|a frame name" (UPDATED: specifying a frame name is now allowed) recommendations = "true|false(default)" filter = "directory path to append to the URL attribute, to filter which URLs are shown" (NEW) maxage = "Default is 0. Valid values are 0-180. Limits the created time of articles that are shown. If 0, there is no limit." (NEW) referral = "label_for_tracking_referrals must be less than 50 characters" (NEW) style = "" extraoptions = "" >
Comment by External U.
8941 | January 19, 2015 06:05:44 AM GMT
----------- Current Attributes (continued) ----------- <cf_socialplugin type = "subscribe" appid = "facebook_app_id" (NEW) apiversion = "1.0|2.0|2.1|2.2|..(default is 1.0 or lowest supported version)" (NEW) format = "html4|html5(default) If html4, plugin is rendered in an iframe. If html5, plugin is rendered in a div." (NEW) render = "all(default)|html|javascript If html, only the HTML is rendered. If javascript, only the JavaScript is rendered. This allows the JavaScript and HTML to be placed at separate locations in the page." (NEW) encodeoutput = "true(default)|false If true, output is canonicalized and then encoded for its context." (NEW) url = "profile to subscribe" width = "default is 450" colorscheme = "light(default)|dark" showfaces = "true(default)|false" layout = "standard(default)|button_count|box_count" kiddirectedsite = "true|false(default)" (NEW) style = "" extraoptions = "" >
Comment by External U.
8942 | January 19, 2015 06:06:12 AM GMT
----------- Current Attributes (continued) ----------- <cf_socialplugin type = "follow" format = "html4|html5(default) If html4, plugin is rendered in an iframe. If html5, plugin is rendered in a div." (NEW) render = "all(default)|html|javascript If html, only the HTML is rendered. If javascript, only the JavaScript is rendered. This allows the JavaScript and HTML to be placed at separate locations in the page." (NEW) encodeoutput = "true(default)|false If true, output is canonicalized and then encoded for its context." (NEW) showcount = "true|false(default)" buttonsize = "small(default)|medium(default)|large" (UPDATED: removed unsupported small and set default to medium per Twitter's doc and to match the size that CF was rendering by default) language = "en(default)|fr|de|it|es|ko|ja" showusername = "true(default)|false" username = "default is twitter" width = "default is 100" (NEW) height = "Default is 20. Ignored when format is html5." (NEW) align = "left(default)|right" (NEW) dnt = "true|false(default)" (NEW) style = "" extraoptions = "" >
Comment by External U.
8943 | January 19, 2015 06:06:33 AM GMT
----------- Current Attributes (continued) ----------- <cf_socialplugin type = "tweet" format = "html4|html5(default) If html4, plugin is rendered in an iframe. If html5, plugin is rendered in a div." (NEW) render = "all(default)|html|javascript If html, only the HTML is rendered. If javascript, only the JavaScript is rendered. This allows the JavaScript and HTML to be placed at separate locations in the page." (NEW) encodeoutput = "true(default)|false If true, output is canonicalized and then encoded for its context." (NEW) url = "url to share" tweettext = "default Tweet text" language = "en(default)|fr|de|it|es|ko|ja" count = "none(default)|horizontal(default)|vertical" (UPDATED: added vertical and set default to horizontal per Twitter's doc and to match the PlusOne button's default which is bubble) hashtag = "Comma-separated hash tags appended to tweet text. Do not include the #. It is prepended to each list item automatically. If tweettype is hashtag, the first hashtag is displayed in the button." (UPDATED: added support for hashtag buttons) buttonsize = "small(default)|medium(default)|large" (UPDATED: removed unsupported small and set default to medium per Twitter's doc and to match the size that CF was rendering by default) via = "username to attribute the Tweet to" recommend = "Comma-separated accounts to suggest the user to follow." counturl = "URL to which the shared URL resolves" (NEW) dnt = "true|false(default)" (NEW) tweettype = "share(default)|mention|hashtag If mention, displays a username within the button. If hashtag, displays a hashtag within the button. Ignored when format is html4." (NEW) username = "The username to display in the mention button. Default is twitter. Used when tweettype is mention. Ignored when format is html4." (NEW) style = "" extraoptions = "" >
Comment by External U.
8944 | January 19, 2015 06:06:56 AM GMT
----------- Current Attributes (continued) ----------- <cf_socialplugin type = "plusone" format = "Only accepts html5 (the default), which renders the plugin in a div." (NEW) render = "all(default)|html|javascript If html, only the HTML is rendered. If javascript, only the JavaScript is rendered. This allows the JavaScript and HTML to be placed at separate locations in the page." (NEW) encodeoutput = "true(default)|false If true, output is canonicalized and then encoded for its context." (NEW) url = "url to plus one" buttonsize = "small(default)|medium|large|standard(default)|tall" (UPDATED: removed unsupported large and added standard and set default to medium to match the height of the Facebook and Twitter buttons) language = "af|am|ar|eu|bn|bg|ca|zh-HK|zh-CN|zh-TW|hr|cs|da|nl|en-GB|en-US(default)|et|fil|fi|fr|fr-CA|gl|de|el|gu|iw|hi|hu|is|id|it|ja|kn|ko|lv|lt|ms|ml|mr|no|fa|pl|pt-BR|pt-PT|ro|ru|sr|sk|sl|es|es-419|sw|sv|ta|te|th|tr|uk|ur|vi|zu" (UPDATED: changed en to en-US per Google's doc) width = "default is 450" annotation = "none|inline|bubble(default)" align = "left(default)|right" (NEW) style = "" extraoptions = "" >
Comment by External U.
8945 | January 19, 2015 06:07:16 AM GMT
Thanks Aaron for all the fixes and changes you have given us. We will look into all of these and get back to you. Thanks, Suchika
Comment by Suchika S.
8946 | January 19, 2015 06:21:33 AM GMT
Hi Suchika, You're very welcome! Once implemented, <cf_socialplugin>'s XSS protection will be one of its key advantages. Thanks!, -Aaron
Comment by External U.
8947 | January 19, 2015 06:28:40 AM GMT
Hi Suchika, I missed the Subscribe button's layout="button" option, sorry. I've added this on line 529 of 20150120_socialplugin_revised.cfm in the attached 20150120_socialplugin_update.zip. Also in the .zip is a sample.cfm that shows how the JavaScript can be placed into the head and shows all the buttons. Thanks!, -Aaron
Comment by External U.
8948 | January 20, 2015 02:52:48 AM GMT
Hi Suchika, I filed CF-3924625 to add canonicalizeURL(). If implemented, then <cf_socialplugin> could use that, in place of the udfCanonicalizeURL() that I'd added. The issue is canonicalize() converts &pi to Pi (as an example) in query strings. It basically sees certain characters as entities and converts them to symbols. In order for <cf_socialplugin> to properly encode its output, it would need to correctly canonicalize the URLs that are passed into the tag. Thus, hopefully CF-3924625 can be implemented and then <cf_socialplugin> updated to use canonicalizeURL(). Thanks!, -Aaron
Comment by External U.
8949 | January 21, 2015 04:08:51 AM GMT
Hi Adobe, I've verified this is fixed in CF2016 Update 1 (build 2016.0.01.298513). Thanks!, -Aaron
Comment by Aaron N.
31308 | September 08, 2019 05:31:35 AM GMT