These are some very basic notes I took during @TroyHunt’s talk at NDC London yesterday. It was a great talk and these are some very simple tips. Of course if you’re a web developer you may well already know this stuff, but apparently a surprising number of sites do not take these basic measures.
Protect against cross-site scripting by using the x-xss-protection response header, and also set the extra value that allows you to report on any cross-site attack attempts – you can set it so that attempts are reported but not blocked
Make sure you build a CSP using the content-security-policy header, and use the report-uri value to report any security breaches
This will prevent people from injecting innocuous-looking javascript that could be, for instance, capturing CVVs input by users (this is how the Ticketmaster leak happened, and it was via a third party component (from Inbenta), not Ticketmaster’s own front-end code)
!! I couldn’t verify from a quick Google search that the Ticketmaster breach could have been avoided by the use of a CSP, so I’m not 100% sure I got that detail correct.
Make sure your site has a populated security.txt which has details of how somebody can alert you if they have detected a data breach
For instance Troy Hunt has encountered significant problems in getting hold of the correct contact details when alerting site owners of breaches detected by haveibeenpwned.com (see images)
Specificity is what you use to determine which bit of styling will “win” when there are conflicts. It’s all about how specific your styling is in defining what elements it should be applied to.
There are five different levels of specificity, with most important at the top:
!important
Wherever this is, it wins
It’s BAD. Avoid. It makes a mockery of any other css rules, and makes your css v hard to read / debug.
Inline styling
(use of the Style=”” attribute within an html element)
Id selector
!! Remember, this means that your html element has an Id, and you are writing styling which will only apply to that one html element with its own unique Id
This means your css will not be reusable!
Class, pseudo-class or attribute selector
Element or pseudo-element selector
So, if there is some styling which uses a level higher up the tree, it will win
If there are two pieces of styling at the same level, this is how you decide which will win:
Whichever one uses the most selectors at that level will win
So, div > ul > li > p will beat div > p
If they use the same number, then the one defined most recently (eg lower in the file) will win
Notes:
css-tricks.com uses a numbering system to represent the above levels, eg (0,1,0,3,0)
The universal selector (*) has no specificity value (0,0,0,0,0)
Pseudo-elements (e.g. :first-line) get 0,0,0,0,1 unlike their psuedo-class brethren which get 0,0,0,1,0
The pseudo-class :not() adds no specificity by itself, only what’s inside it’s parentheses.
The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.
