Google's New 'Time Spent Here' Feature

02 August, 2016

Whether you've noticed or not - at the end of July - Google silently added a new feature to Google Business Listings returned in search results: 'typical time spent here'. If you haven't noticed it yet it could be due to the fact that currently this feature is only available on mobile search results, and is not displayed on results found through a desktop browser. See below for a screen shot of the same search result on both Safari for iOs and Firefox on a laptop:

undefined
Search Result on Desktop
undefined
Search Result on Mobile

The 'People typically Spend' information will show you either a specific time, like example above, or a time range, such as "30 min - 45 min". In our experimentation it does not seem to be displayed for all search results, but only popular locations such as chains and often visited shops. This is most likely due to the lack of data on the less-visited locations.

We are safe to assume this information is taken from Android's location services, and location history, which is opt-out; meaning that a stock Android phone is tracking everywhere you go, and how long you stay there. Not interested in that? LifeHacker has a good article on how to turn off and clear your history: http://lifehacker.com/psa-your-phone-logs-everywhere-you-go-heres-how-to-t-1486085759.

I would expect this feature to roll out for Desktop browsers sometime soon, but in the meantime - I wonder if knowing how long someone typically spends a location is valuable enough information for me to ask that myself, and strangers, allow a company to track and aggregate where and how I spend my time...

Preventing XSS Attacks

10 July, 2016

Cross Site Scripting Attacks, abbreviated as XSS, is a variety of digital attacking where a user tricks a server into running some malicious JavaScript code when themselves, or another user, visits a page. This type of attack is very common, and typically occurs when a user has access to a text input on a web application.

XSS Attacks can be used for a variety of things; since the JavaScript executes in your browser, they have access to your local file system, and session information allowing for:

  • The installation of malware or adware on your browser or computer
  • Sniffing of your online session information, allowing them to impersonate you on that website
  • Performing some action on the website, which would seem as if you performed it (like changing your password)

These attacks are very powerful, however than can easily be thwarted. In its most simple form, you can mitigate leaving any XSS holes in your code by never allowing the user to enter data that is rendered as/in HTML. THIS INCLUDES URL PARAMETERS. I have seen quite few attacks happen because a URL parameter was not escaped before being output to the page. Just because the user isn't supposed to input something, doesn't mean they can't.

So - you find yourself staring at some code where the user's profile is output to the page. You test if you are open to an attack by entering "I really like <script>alert('BIG');</script> trucks" in the text area and hitting save. Boom, the word 'BIG' appears on screen in an alert when the page reloads, showing you your bio: "I really like  trucks". Time to close those XSS holes.

If there is no need for actual HTML tags to be present in your user's outputted data, pure PHP sanitation pre-output is the way to go:

htmlspecialchars($_GET['foo']), ENT_XHTML, 'UTF-8')

would convert all special characters that may allow the code to run, to harmless characters displayed on the screen. If you are dealing with text added to the page with JavaScript, utilize jQuery's text function, like so:

var safe = $('<span></span>').text(unsafe).html();

If you need the user's content to include actual HTML tags for formatting, and are not using a template engine, we recommend utilizing HTML Purifier to sanitize your code server-side before it is saved. Do not trust strip_tags, or a regex, as it is always possible to trick them with something like '<scr<script>ipt>'. If you are using a template engine, make sure that the saved data is outputted using some sanitation - TWIG does this by default, Smarty would utilize:

<p>{$foo|escape:'html','UTF-8'}</p>

Take care to review your code, and make sure you are not leaving your users, and your systems, vulnerable.

Which WYSIWYG editor is for me?

08 July, 2016

For this review we're going to make some assumptions:

  • You are a developer
  • You are looking to integrate a WYSIWIG editor to obtain user input
  • Your users are not developers, and are looking for a simple, intuitive, interface
  • You are looking for a freely licensed platform in either JS, or PHP

After giving the most common options a once-over, and eliminating all paid platforms, we've decided to narrow our choices to:

 

TinyMCE

TinyMCE is a true and tested Editor that has been around for years and is integrated into quite a few existing content management platforms, such as WordPress, Joomla!, Magento, and more. It is released under the Open source (LGPL 2.1) license; however there are a number of paid plugins and options available from the developers. There are also a number of free plugins that are available by default, and produced by the open source community. Due to it's wide adaptation, TinyMCE is, or has been, in every developers toolbox at one time or another.

The editor itself is easy to install; all you need is to include a JS file into your page, and use a few lines of javascript to transform an element into a TinyMCE Editor. There are a plenty of options on the code level, and initiating multiple editors is a breeze; if the platform itself doesn't include a specific function by default, there is most-likely a plugin for it - https://www.tinymce.com/docs/plugins/. The platform is also mobile optimized, and works fine on the devices we tested it on.

The main complaint we have with TinyMCE is that there is no default file managers or uploaders in the free package. With the release of TinyMCE version 4, the source team created Moxie Manager, which is a monthly subscription. There are a few free plugins that exist on the web, however we have not tested them.

> Overall TinyMCE should be your go-to if you have no need for your users to manage media or access the file system.

 

CKEditor

CKEditor is also a widely adopted and utilized editor that has been used by platforms such as MailChimp, Adobe, and the GetSimple CSM. It is released under the GPL, LGPL and MPL Open Source licenses; however, there are also premium versions which include tech support and a few paid plugins. The platform itself allows you to download it with any of its default 72 free plugins.

Just like TinyMCE, all you need to do is include and external file, write a few lines of Javascript, add a <textarea> element, and 'viola!' - anyone with at least one hand can start entering some text. Configuring the plugins is easy, and they include just about anything you would ever need - we haven't had a need to look for any 3rd party plugins yet - but they do exist if you need them. The interface is a little more easy on the eyes than TinyMCE and should be very easy for even the most computer-illiterate user to pick up. One of the big bonuses we see in CKEditor, is the integration of some great copy-paste functionality that allows users to upload images just by copy-pasting them (or drag and drop).

> We would recommend CKEditor for any input area where your users might need to upload media, there are also few video plugins available, however we have not used them personally.

 

Summernote

Summernote is new on our radar, and we included it here to force us outside our box and look at a new product. Summernote was no harder to set up and get running than CKEditor or TinyMCE - however it does depend on the Bootstrap CSS/JS, so make sure to include it after you include those elements. Also Summernote had no CDN that we could find, however that will most likely change as it is used more widely. The platform is distributed under the MIT license and had no paid counterparts that we could find (although there is a donate button on their page).

Overall, the platform looks very clean, and may be the most attractive looking of the 3 we reviewed. It includes a number of skins you can utilize, and the basic functionality of text editor. There are no 'plugins', as all the functionality is included in the base download - this makes the setup easy (but also limiting). The editor does include some native upload functionality, which is great, and has some awesome integration with CodeMirror for displaying the HTML code being edited.

Obviously however, Summernote is in it infancy - only being on version 0.8 and released initially just a few years ago. While not having plugins makes the initial setup simple, we could not find a file browser or a few other plugins the other platforms have by default, which would mean we would need to integrate them ourselves or scrape some code from their forums. The dependency on Bootstrap is also limiting in my eyes, as Bootstrap is constantly changing as well; however, there is much time for this platform to undergo some changes and become as fully-featured as the rest.

> If you need to throw something together quickly, and want to give it a try, you probably won't have any problems - We'd keep our eye on Summernote, and revisit in the future to see how it's developed.

 

Newer posts → Home ← Older posts