Security,

Content Security Policy,

Background Images,

And Mobile performance,

Use arrow keys to move slides

John Brandenburg

Technology Manager

Web Page Test

Security scores of recent sites

Don't feel too bad

Judge your security posture by the needs of your site.

PII?

Finance?

Low grades are due to:

• Strict Transport Security - HSTS
• Content Security Policy - CSP

It also may call out a low an XSS issue, and X Frame options, but those two are the "high severity" items

What is HSTS?

A header that is sent in the page request that tellsthe browser to connect to that domain via HTTPS

strict-transport-security: max-age=31536000; includeSubDomains

http headers

How can I set up HSTS?

In Drupal, the Security Kit module can be used. You can also just set the header directly in PHP.

In Wordpress. Also set the header directly. There are also Plugins available.

Warning

If a site was setup to use HSTS, and you ever let the certificate expire, no one will be able to access the site.

What is CSP?

A protocol that allows you to define the acceptable sources a website can use to access resources

Yeah, but what does that mean?

An HTTP header that...

Defines what sources can be used on a web page.

content-security-policy: default-src 'self';

From here, you can add domains, nonces, hashes, protocols, and other options.

Why do I need a Content Security Policy?

British airways hack in 2018

• 380,000 credit card details.
• Facing £183m fine (GDPR).

These days, hacking is automated, someone may just want to install a bitcoin miner.

No site is too small to hack.

Directives:

For details, see the (CSP) Quick Reference Guide

Rules Apply from Specific to General

Browsers will apply rules that go from the most specific to most general. So if rules are missing for the more specific rules, they will apply the more general ones.

Also note not all browsers implement all categories. Firefox did not support script-src-attr until version 108, released Dec. 2022.

CSP in Drupal

So you should always enable the default-srcas a fallback.

Which is not enabled by default in th csp Drupal module.

Report-only mode

Allows you to see what would be blocked, without blocking it.

Key features in CSP

unsafe-inline

Content-Security-Policy: default-src 'unsafe-inline'

Still better than not using a CSP at all.

Hashes

Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='
            

Script or style allow-listed by referencing a base64/sha256/sha384/sha512 hashed version of the code.

Using hashes can be problematic, as they will invalidate any "unsafe-inline" options.

Don't use hashes

Chrome won't use sources defined as attributes.

Nonces

<style nonce="ABC123">

Script or style allow-listed by referencing an arbitrary, server-defined string. These should be generated new for each request.

Don't use static nonces.

They defeat the purpose of a CSP.

Hashes and Nonces are difficult to manage...

I forgot to set "default-src"

Source List Key Words

• none
• self
• unsafe-inline
• unsafe-eval

					    <div style="background-image: url('...')">
            

CSP will block this without the "unsafe-inline" option.

How do you set a CSP?

You could just set it manually in PHP...

but a CSP needs to be dynamic. --You might be seeing the challenge in implementing CSP in Drupal.

Wordpress

Various plugins available. Not sure what is the best yet.

Drupal

CSP module.

Do not use the "Security Kit."

(Bug in Drupal breaks CKEditor 4)

CSP module is smart enough to automatically add unsafe-inline to any pages with CKEditor 4 on them.

Does not work well with ajax loaded editors (e.g. when editing Paragraphs).

Modules

• Content Security Policy (drupal/csp)
• Attach Inline - for when you absolutely need inline javascript