780045 - Content Security Policy Logo

Status: ASSIGNED

(Marketing :: Design, task)

Description

[Tanvi Vyas[:tanvi]]

Background: Content Security Policy is something web developers can specify for their site to protect against Cross-Site Scripting (i.e. making it harder for attackers to steal your credentials and hijack your account).  It's something that originally started at Mozilla with Brandon Sterne and Sid Stamm.  Since then, other browser vendors have implemented CSP and the W3C is almost finished with the CSP 1.0 Specification.

We (mozilla) would like to promote CSP to developers and users. We want an icon/logo that we can use to universally represent CSP.  We can put it on our CSP mdn pages (https://developer.mozilla.org/en/Security/CSP/) and we can use when pushing sites to adopt CSP.  We are also working on an CSP add-on for users and developers that will be complete in early August and need an icon to launch the add-on in firefox (https://wiki.mozilla.org/SummerOfCode/2012/UserCSP).  Currently, we are just using the firefox globe as a placeholder on the addon bar at the bottom of firefox.

Some Ideas:
I found a logo that twitter used when they deployed CSP: http://news.softpedia.com/news/Twitter-Deploys-Content-Security-Policy-on-Mobile-Website-191154.shtml. They add a helmet to the twitter bird.  Which is kind of what CSP does - it adds additional protection to a website, but its doesn't mean that the site is 100% safe.

I think a helmet is better than a lock, because a lock is generally perceived as more full proof protection.  Maybe we could use a shield?

Please let me know if you want to chat or need any additional information.  Thanks!

Comment 1

[Tara (musingt)]

Hi Tanvi, I'm going to ask Matt to help us with this.  

Can you let me know what the desired timing and priority level is for this?  I have a few other things on Matt's plate I'd like him to focus on first before getting to this.  So I want to have a better sense of timing so we can plan accordingly.

Comment 2

[Tanvi Vyas[:tanvi]]

Hi Tara,

This was actually requested at the beginning of June, with a desired timing of end of July.  So the priority level is very high.  We particularly need this now for a google summer of code project which must be completed by August 20th.  Is there anyway we can have a logo by then?

Thanks!

Comment 3

[Tara (musingt)]

Thanks Tanvi

So, it sounds like you need an actual image/icon vs. a wordmark solution, is that right?  Matt, our freelancer who is awesome, can help with this but I wanted to make sure it's clear what the ask is.  

I'm going to have him work on this first before getting to the other projects I have for him and he should hopefully be able to knock this out before the 20th. I'll let him comment on that thought.

wrt to the shield, I think that makes sense... though I also know that shields are used quite a lot for similar things... so hopefully it doesn't conflict with any existing icons and communicates what you need clearly.  were you thinking of a shield with "csp" carved inside it, or something like that? do we need to write "csp" ?

Matt, if you have any additional questions, please do comment on the bug or free free to contact Tanvi directly to discuss.

Comment 4

[Tanvi Vyas[:tanvi]]

Hi Tara,

I'm not sure what a wordmark solution is.  But an icon/image with "CSP" written in it would be great.

We do use shields in other places.  And actually we might use them in the URL bar as part of a mixed content solution.  But I think we can use a shield as well if it is a different color.  When looking at some google image search results, we came across this:
http://c.dryicons.com/images/icon_sets/colorful_stickers_part_6_icons_set/png/256x256/security.png
http://dryicons.com/icon/colorful-stickers-part-6-icons-set/security/

This seems cool because its an orange shield (orange for Firefox).  We could use that with CSP written in it.  If the designer wants to make it more his/her own and change it up a bit, thats fine too.

Thanks for your help!

Comment 5

[MT]

Hi Tanvi,

Thanks for having me to help out on this.  I have had some time recently to work out a possible logo design which makes use of the example shield you recommended.  I've added a few minor details on it as well as included an embossed 'CSP' on it.  I've emphasized the 'S' to give it some character...thought that due to the shield shape it filled in the space nicely...also giving subtle prominence to the security factor.

Please let me know how you feel about this direction.

Thanks!
Matt

Comment 6

[MT]

Attachment: CSP_shield_concept

Comment 7

[Tanvi Vyas[:tanvi]]

Hi Matt,

Thank you for the icon!  It looks great.

Sorry for the delay in my response, as I was out on PTO.  Kailas (cc'ed) used this image for his add-on and submitted it on August 20th.  Thanks for the quick work!

~Tanvi

Comment 8

[Tanvi Vyas[:tanvi]]

Hi Matt,

Do you have a version of the image without the background color?  Thanks!

Comment 9

[MT]

Hi Tanvi,

Here is a link to a png version of the shield. 

http://cl.ly/image/260b1X2v2w3C

Comment 10

[Mike West]

You both are awesome. Thanks for looping me in, Tanvi. :)

Comment 11

[Tanvi Vyas[:tanvi]]

Thanks Matt!