Is it time to talk about host headers yet? CSP?

Elements Feedback
1

Is it time to talk about host headers yet?

Let’s talk about CSP.

Website security can be controlled via host headers. I’d particularly like to draw attention to “Content-Security-Policy.” To configure this perfectly, there’s “Content-Security-Policy-Report-Only.” Everything set there is only displayed in the browser console without having any effect. This way, you can find out exactly what’s possible.

Currently, I have to

default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.usercentrics.eu https://www.google-analytics.com https://www.googletagmanager.com; connect-src 'self' https://*.usercentrics.eu https://region1.google-analytics.com https://www.google-analytics.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.usercentrics.eu https://www.googletagmanager.com; object-src 'none'; frame-ancestors 'none'

set.

Two points here are not good: script-src 'unsafe-eval' 'unsafe-inline'

This will result in a negative rating. Source: https://securityheaders.com

One solution would be to start all scripts with <script nonce="abc123">, but then all files would have to be php. A fixed nonce would not be a problem for a motivated hacker, who could mark his injected script just as well.

<?php
$nonce = base64_encode(random_bytes(16));
header("Content-Security-Policy: script-src 'self' 'nonce-$nonce'");
?>
<html>
  <head>
    ...
    <script nonce="<?= $nonce ?>">
      // ...
    </script>
  </head>
</html>

The best solution would be to use Alpine in a way that eliminates the need for eval().

There is a CSP-safe version of Alpine.

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.csp.min.js" defer></script>

Want to see it? Launch the browser console and go to https://www.cornrow.de

1 Like
2

I’d need to get @ben to chime in about the CSP-safe version of Alpine as that’s above my pay-grade!

Since all Elements sites are self-hosted, you have full control over your server’s headers, so adding a Content Security Policy via .htaccess (Apache) or add_header (Nginx) is absolutely possible right now (as you probably know).

It would be nice to provide a solid baseline CSP that users can copy-paste into their own .htaccess files… I’ll likely include this in the manual soon, but happy to workshop some default policies here on the forum too if that’s useful :blush:

I checked the security headers on elementsapp.io this morning and it scored a D (game me flashbacks to my school days) :grimacing: So, I implemented the following in the .htaccess file. This has moved the site to an A :tada:

Happy to hear your thoughts on this basic set as you seem to know more about CSP than I do :slight_smile:

# Enforce HTTPS
<IfModule mod_headers.c>
  Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
</IfModule>

# Prevent MIME-type sniffing
<IfModule mod_headers.c>
  Header set X-Content-Type-Options "nosniff"
</IfModule>

# Prevent clickjacking
<IfModule mod_headers.c>
  Header always set X-Frame-Options "SAMEORIGIN"
</IfModule>

# Control referrer information
<IfModule mod_headers.c>
  Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

# Control browser features
<IfModule mod_headers.c>
  Header set Permissions-Policy "geolocation=(), camera=(), microphone=()"
</IfModule>
1 Like
3

thx, for that! i have updated all my .htaccess-files :slight_smile:

1 Like
4

I’ve just moved ours inside the Elements project for easy editing :smiling_face_with_three_hearts:

Right-click inside the page of your project and choose New File from the contextual menu. Name the file .htaccess and ensure it is in the root of your website.

CleanShot 2025-07-15 at 10 .34.46@2x
CleanShot 2025-07-15 at 10 .34.46@2x2684×1668 399 KB

5

Be careful with these settings. Search engines may stop indexing the pages.

Well-tested settings can be found here: https://securityheaders.com/?q=cornrow.de&hide=on&followRedirects=on

I check the browser console every time I update Elements to improve the settings.

6

Of course! The settings I specified above don’t negatively impact ranking/SEO :blush: