Nathan Wong is the co-founder and head of the tech side of BSA. He wrote an informative piece about some changes with password security at BuySellAds. You can see the original post, and Nathan’s other writings, over at Nathan.ca

Lock

Image courtesy of WickedVT

As of this morning we have officially migrated everyone’s password at BuySellAds over to bcrypt. I’m almost ashamed it took us so long – especially since it turned out to be so straight-forward to switch. If you still believe MD5 or SHA-1 is sufficient for passwords, read this post and get to work.

The final push that motivated us to switch to bcrypt was Kickstarter’s security breach. I was watching our always-endearing tech community lambast them for storing nearly-plaintext passwords when it hit me: we’re storing nearly-plaintext passwords. Damn!

The next day I put in an open-ended ticket to figure out a migration plan for switching to bcrypt. One of our developers, Jon Hehir, handled most of it from there.

The premise is simple: in order to avoid having any MD5-hashed passwords in the database at all, simply bcrypt the old hashes, and continue to double-hash passwords when new ones come in. This is in contrast to the common advice to “version” passwords and only update them when people login (i.e. when you have a plaintext version of the password on hand). It’s highly likely that you have older users who will never login again, though, and they deserve their password to be stored properly too.

In PHP, handling bcrypted passwords is easy:

  • Use password_hash($input, PASSWORD_BCRYPT, array('cost' => 13)); to encode the given password that you want to store in the database.
  • Use password_verify($input, $storedhash); to compare whether the given password matches the hash you stored in the database.
  • If you aren’t on PHP 5.5 yet, include the compatibility library too.

Coupled with the migration strategy above, that’s all you need to know. The above functions handle hashing, salting, storing the salt, versioning, and everything else you need. It really is that easy – arguably simpler than what we had before – so there are no excuses.

In our case, we did run into one additional snag where we were storing cookies that contained a hash of a login salt and the user’s hashed password. We’ve since switched to storing a unique random hash in the cookie instead. This did, however, delay our ability to remove the old passwords from the database for users who we knew had logged in recently. This meant we had to wait until we knew their cookies had all expired to avoid logging them out prematurely.

Nonetheless, I’m extremely relieved to know that we no longer have any nearly-plaintext passwords in our database or in our cookies. I expect to sleep a little better tonight. If you’re still using MD5 or SHA-1, what are you waiting for? Go switch to bcrypt now!

iubenda is a privacy policy generator that automatically updates your site’s privacy policy to conform with current laws and best practices. You never have to update or keep track of these changes, since iubenda does it for you. This is why BuySellAds decided to partner with them. Simon Schmid of iubenda has written a short piece to introduce our publishers to privacy policies and explain why they’re important.

At iubenda we are constantly adding new clauses and observing the international privacy policy landscape. We host and automatically send updates to our users’ policies when global changes are needed.

As of a recent update iubenda’s privacy policy generator now has a clause for BuySellAds users. Therefore it’s now as easy as a click of a button to disclose your use of advertising technology to your users and display an appropriate privacy policy on your site along with the ads.

To celebrate this occasion we’ve decided to give BuySellAds users an introductory offer, for 50% off on their first year subscription with iubenda. You can claim your offer by using this coupon code.

iubenda BuySellAds Privacy Policy

There’s another thing that I would like to talk about now that we’ve made this offer. Even if you’re not taking us up on it, you may find it interesting to hear about some of the latest developments in the “Do Not Track” discussions that Todd Garland had written about earlier (FTC’s Proposed ‘Do Not Track’ List).

Do Not Track is a proposed technology that essentially allows users to tell websites they don’t want their browsing behavior tracked. Wikipedia defines DNT as follows in technical terms:

The Do Not Track (DNT) header is the proposed HTTP header field DNT that requests that a web application disable either its tracking or cross-site user tracking (the ambiguity remains unresolved) of an individual user. (…)”.

Until now there is no legal requirement for website operators to use DNT.

California, however, recently introduced Do Not Track amendments to their existing privacy regulations via Assembly Bill no. 370. This change affects everyone who either operates their site from California or who has users/consumers that reside in California. The CalOPPA now states:

(5) Disclose how the operator responds to Web browser “do not track” signals or other mechanisms that provide consumers the ability to exercise choice regarding the collection of personally identifiable information about an individual consumer’s online activities over time and across third-party Web sites or online services, if the operator engages in that collection. 

In other words, this change doesn’t bring a requirement to sites to implement Do Not Track technology, but a requirement to inform if you are in fact making use of DNT technology, or not. Therefore If you are making use of the technology, make sure that you outline exactly what this means for the user and how his DNT request is being honored.

These kind of changes are exactly why users have found iubenda helpful. It is both time-consuming and risky to track all the legal changes required of sites in today’s society, everything is moving too fast and is too disputed. Give iubenda a try, and see how easy it is to let them keep you at the top of your game.

Going to SXSW?

So are we! If you’re interested in meeting one of us in real life, tweet at Marc (@marcman), or Andrew (@AndrewDertinger) and we’ll do our best to catch up with you.

We’ll be there from early afternoon Friday, to Tuesday morning.

SXSW Interactive 2014

reddit joins BuySellAds Marketplace

reddit joins bsa

We’re thrilled to announce that we teamed up with reddit! Yes, THAT reddit. In case you’re unfamiliar, reddit is an influential powerhouse that covers every topic under the sun. They’re also massive: they serve over 5 billion impressions per month to over 100 million unique visitors.

BSA Advertisers, we know what you’re thinking… “But reddit is so large, how can I target MY audience?” Fear not! We kicked things off with the “reddit Design Collection,” featuring the best, hand-picked, design-centric subreddits. Your ad will rotate through this entire collection.

Here are the subreddits that make up the reddit Design Collection:

/r/photography, /r/design, /r/ITookAPicture, /r/graphic_design, /r/crappydesign, /r/interiordesign, /r/architecture, /r/design_critiques, /r/designporn, /r/typography, /r/identifythisfont, /r/52weeksofdesign, /r/jquery, /r/designjobs, /r/industrialdesign, /r/talesfromdesigners, /r/visualization, /r/product_design, /r/designthought, and /r/criticaldesign.

This audience is highly engaged, curated and eager to see what you have to offer: http://buysellads.com/buy/detail/213025

Advertisers: We’d love to hear which subreddit categories you’d be interested in reaching, as there are more collections on the way! Get in touch.

We’ve been hard at work on our Publisher Pro product the past couple months, and one of the things I’m most excited about is the recent addition of custom ad serving templates within the app. This feature is now available to all Publisher Pro users. To access it, simply hit the cog icon in the top right corner, and select Ad Serving Templates from the drop-down menu.

Ad Serving Templates

I’m sure all of you are very familiar with good old banner ad formats like 728×90, 300×250, 125×125, etc. Well, advertising is evolving and BuySellAds is kicking things up a notch with custom ad serving templates.

Ad serving templates let you achieve pretty much anything you can dream of in terms of ad units. Of course we’ve taken care of creating a lot of them already, from interstitial to fully responsive ads and retina creatives, fly out boxes, fancy bars, and page peel ads. We now have over 15 ready-to-use ad serving templates which you can use right out of the box, or customize to better suit your needs.

Custom Ad Units

Though the fun begins when you start creating your own templates. If you have basic knowledge of HTML and CSS, you can spin up new custom ad serving templates in no time at all.

How It Works

At BuySellAds, we’ve been using ad serving templates internally for years. Every time you see a 300×250 on a site, or an image+text ad like on Fusion Ads, there’s an ad serving template that powers it. When you create an ad serving template in your Publisher Pro account, you essentially tell our ad server exactly what you want it to serve when an ad is booked in that zone.

Creating Your First Ad Serving Template

The first thing you need is an idea. Once you know what you want your ad unit to look like and you have an idea of the markup/css you’ll need, the sky is the limit. Let’s take one of our own demos (the fly-out box demo) as an example, and I’ll walk you through how I created it.

The concept is simple. This ad unit is hidden by default and slides into view in the bottom right corner of the browser window as you scroll down the page. If you scroll back up, the fly-out box goes away. It’s a great way to grab the attention of visitors.

The fly-out box ad unit needs several elements in order to work and look like the demo. It needs an image, a short description, a call to action, and a close button.

Header, Ad, Footer

An ad template has 3 possible sections: a header, the ad’s content, and a footer. The Header box is where you would put your CSS, just like you would with a HTML document. The ‘Ad Content‘ box is where you should put the markup and JS you need to generate the ad unit – that means, the full HTML code as well as any javascript that you need. As for the Footer box, it’s the perfect place to put something like an ‘Advertise Here‘ link.

The Markup

The first thing I did was create a div and give it an id of #bsa_flyout. I could have called it simply #flyout (or even use a class instead of an id, like .flyout), but to make sure my markup and CSS would not interfere with other code that may run on someone’s site I used a more specific ID. This #bsa_flyout div is what holds the whole thing together as far as the markup goes.

Then inside that container, I put my close button link, and then a href with a class of .bsa_creative. Inside that href goes everything that I want to be made clickable.

To ensure this ad unit gets the most clicks possible, making the whole container clickable was the way to go (rather than create a linked image, and then link the text and then the button, etc… that’s just too much markup and it’s not as effective).

Here is what my markup looks like:

<div id="bsa_flyout">
	<a id="bsa_close" href="#close">x</a>
	<a class="bsa_creative" href="##statlink##">
		<img src="##creative##" alt="Creative" />
		<span class="bsa_flyout-content">
			<span class="bsa_flyout-recommended">Recommended App</span>
			<span class="bsa_flyout-title">##description##</span>
			<span class="bsa_flyout-cta">visit sponsor</span>
		</span>
	</a>
</div>

As you can see, every id or class I used has the bsa_ prefix. I think it’s better to stay on the safe side when naming classes and id. As you can see in the markup above, we have values such as ##statlink##, ##creative## and ##description##. Those are what we call Template Tags. Let’s see how that works.

Template Tags

Template tags are an essential part of ad serving templates. The template tags you create can be links, images, text, etc… for example, in our fly-out demo, we have a 125×125 image, some description text and a click-through URL. So we have the following template tags:

  • ##statlink##: this is the click-through URL
  • ##creative##: this is the 125×125 creative image
  • ##description##: this is the short text description

I should mention that when you create your own ad serving templates you can name template tags anything you want. For example, you could name your banner graphic BannerAd, and our system will automatically wrap it with # signs.

Then, you need CSS to make this look pretty.

The CSS

The CSS is also rather simple. I made my #bsa_flyout { position: fixed; } so it would always be visible as the you scroll the page, and I hid it by giving the “right” property a value of -322px, which effectively puts the container outside the viewport.

#bsa_flyout {
	position: fixed;
	z-index: 10001;
	bottom: 0;
	right: -322px;
}
#bsa_flyout a.bsa_creative {
	background-color: #333333;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(51, 51, 51)),to(rgb(34, 34, 34)));
	background-image: -webkit-linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	background-image: -moz-linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	background-image: -o-linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	background-image: -ms-linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	background-image: linear-gradient(top, rgb(51, 51, 51), rgb(34, 34, 34));
	overflow: hidden;
	width: 320px;
	height: 125px;
	display: block;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
}
#bsa_flyout a.bsa_creative img {
	width: 125px;
	float: left;
}
#bsa_flyout a.bsa_creative span.bsa_flyout-content {
	line-height: 100%;
	padding: 10px 15px 15px;
	width: 165px;
	float: right;
}
#bsa_flyout a.bsa_creative span.bsa_flyout-recommended {
	float: left;
	width: 100%;
	clear: both;
	color: #666;
	text-transform: uppercase;
	font-size: 10px;
}
#bsa_flyout a.bsa_creative span.bsa_flyout-title {
	float: left;
	font-weight: bold;
	font-size: 13px;
	width: 100%;
	line-height: 120%;
	clear: both;
	margin: 10px 0;
	color: #fff;
}
#bsa_flyout a.bsa_creative span.bsa_flyout-cta {
	float: left;
	font-size: 10px;
	font-weight: bold;
	clear: both;
	margin: 5px 0 0;
	padding: 2px 10px 3px;
	text-align: center;
	color: #fff;
	background: #85B543;
	border-radius: 3px;
}
#bsa_flyout a.bsa_creative:hover span.bsa_flyout-title {
	color: #388acc;
}
#bsa_flyout a.bsa_creative:hover span.bsa_flyout-cta {
	background: #fff;
	color: #000;
}
a#bsa_close {
	cursor: pointer;
	position: absolute;
	right: 10px;
	font-size: 12px;
	top: 0;
	line-height: 100%;
	padding: 3px 6px 4px;
	border-radius: 3px;
	background: #000;
	border: 1px solid #555;
	border-top: none;
	color: #fff;
	text-decoration: none;
	z-index: 10002;
}
.flyoutbox_show #bsa_flyout{
    right: 0;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.5s;
}
.flyoutbox_hide #bsa_flyout{
    right: -322px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

Javascript

The JS is where the magic happens. It’s what shows and hides the ad. Obviously not all custom ad serving templates will need Javascript, but the fly-out box does. We’ve used Javascript here rather than jQuery or another JS library. This is to make sure the code that is being served to display ads does not interfere with any pre-existing code or library you may be running on your site.

var _flyoutbox_##org_zoneid## = {

	//
	hide: function () {
		this.removeClass(document.getElementById('bsap_##org_zoneid##'), 'flyoutbox_show');
		this.addClass(document.getElementById('bsap_##org_zoneid##'), 'flyoutbox_hide');
	},
	show: function () {
		this.removeClass(document.getElementById('bsap_##org_zoneid##'), 'flyoutbox_hide');
		this.addClass(document.getElementById('bsap_##org_zoneid##'), 'flyoutbox_show');
	},

	//
	hasClass: function (el, name) {
		return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
	},
	addClass: function (el, name) {
		if (!this.hasClass(el, name)) {
			el.className += (el.className ? ' ' : '') +name;
		}
	},
	removeClass: function (el, name) {
	   if (this.hasClass(el, name)) {
	      el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
	   }
	}
};

// click to close
document.getElementById('bsa_close').onclick = function () {
	document.getElementById('bsa_flyout').style.display = 'none';
	return false;
};

var flyoutbox_didScroll;
window.onscroll = function () {
    flyoutbox_didScroll = true;
};

// check and see how far they have scrolled
var flyoutbox_scrollInterval = setInterval( function () {
    if ( flyoutbox_didScroll ) {

        flyoutbox_didScroll = false;

        // figure out how far the user has scrolled from the top of the page
        var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        //alert(scrollTop);

        // if they have scrolled > 250px
        if (scrollTop > = 250) {
        	_flyoutbox_##org_zoneid##.show();
        }
        // if they scroll back to the top, we need to hide the ad
        if (scrollTop < 250) {
            _flyoutbox_##org_zoneid##.hide();
        }
    }
}, 500);

If you’re building your own custom ad serving template and you already have the jQuery library loaded on your site, feel free to write jQuery instead of raw Javascript. Custom ad serving templates are meant to be highly customizable. So if you want to run jQuery, MooTools, Prototype, or even Scriptaculous on your site, that’s all fine.

Conclusion

As you can see it’s rather easy to create ad serving templates. If you have an idea and can write the necessary markup, we can serve it via Publisher Pro – and more importantly, you can sell ads in those zones!

On the other hand, you can always use one of our pre-made templates if you prefer. Or, use a pre-made template as a starting point and customize it to better suit your needs.

Join BuySellAds Publisher Pro!

BuySellAds Pro is open for public registration and we’re constantly adding new and exciting features. If you’re not yet a BSA Publisher Pro user, now would be a good time to join!

Sign-up for BSA Publisher Pro!