index.headers in 1.0

[mhite]

Me again, still working through the upgrade process of .5 -> 1.0.

I used the following index.headers in my .5 site:

/*
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  X-Content-Type-Options: nosniff
  X-XSS-Protection: 1; mode=block
  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; frame-src mailto: https://*.paddle.com https://player.vimeo.com https://www.youtube.com; img-src 'self' https://*.netlify.app https://cdn.paddle.com data:; script-src 'self' https://cdn.paddle.com 'sha256-iIdAg2NbKitkvSjYOm5mMTqCmPgoNlTKrO9kL1KtZ7Y=' https://*.netlify.app 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg=='; style-src 'self' https://*.netlify.app https://cdn.paddle.com 'unsafe-inline'
  X-Frame-Options: SAMEORIGIN
  Referrer-Policy: strict-origin
  Feature-Policy: geolocation 'self'
  Cache-Control: public, max-age=31536000
  Access-Control-Allow-Origin: *

I am wondering if this file is still respected/used in 1.0.

[mhite]

After some poking around, I believe the answer is that index.headers is no longer supported. You should put this stuff into netlify.toml. Thulite provides a sample in its example netlify.toml if you install from scratch:

# Custom headers — https://docs.netlify.com/routing/headers/#syntax-for-the-netlify-configuration-file
[[headers]]
  for = "/*"
  [headers.values]
    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
    X-Content-Type-Options = "nosniff"
    X-XSS-Protection = "1; mode=block"
    Content-Security-Policy = "default-src 'self'; manifest-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' https://avatars.githubusercontent.com data:; script-src 'self' 'nonce-dXNlcj0iaGVsbG8iLGRvbWFpbj0iaGVua3ZlcmxpbmRlLmNvbSIsZG9jdW1lbnQud3JpdGUodXNlcisiQCIrZG9tYWluKTs=' 'sha256-aWZ3y/RxbBYKHXH0z8+8ljrHG1mSBvyzSfxSMjBSaXk='; style-src 'self'"
    X-Frame-Options = "SAMEORIGIN"
    Referrer-Policy = "strict-origin"
    Permissions-Policy = "geolocation=(self), microphone=(), camera=()"
    Cache-Control= '''
    public,
    max-age=31536000'''
    Access-Control-Allow-Origin = "*"

Now I'm not sure what that example nonce- will ever cover. Is there some special way of doing nonce with netlify? Also, not sure what script that example sha256- is in reference to. These may all just be bogus examples to illustrate how to create headers. Not 100% sure.

[mhite]

I'm trying to verify migrating my CSP from index.headers to netlify.toml works. I'm noticing in my migration from .5 -> 1.0 that there is now some special handling of "mailto:" links such that they all get replaced by Javascript (presumably to avoid email address scraping). This is a bit painful to deal with because depending on the linked text and the actual email address, you'll get a different sha256- you'd need to add to the CSP.

So I'm definitely wondering if there is some way of incorporating nonce? I'm a bit out of my depth here, but my hunch is no, it can't be done with a static site generator? So you are stuck with chasing down all the hashes you need to exempt, or you unsafe-inline script-src.... which is probably something you don't want to do if you've got a locked down CSP.

[mhite]

Oddly enough, it didn't happen here:

markdown source:

Please reach out to me via [email](mailto:redacted@redacted.com). Licensed users can also reach me through the private Discord server. (The link to this server is provided when a license is purchased.)

In this case it's a non-whitespace (.) character that immediately followed the linked email.

[h-enk]

Hey, that's strange, I'm seeing it the other way around (default, new install):

No quick fix here. I recommend to use a shortcode like for example this one: Email obfuscation

Currently, a render hook (node_modules/@thulite/doks-core/layouts/_default/_markup/render-link.html) is doing its magic. I'm planning to deprecate this functionality (too opinionated, you should have a choice). The new prefered way will be to use a shortcode, see Email obfuscation for an example

[h-enk]

It appears Netlify has some magic they can do.

https://app.netlify.com/extensions/content-security-policy

I've not played with it, but it looks like this could probably be leveraged.

Interesting one, I didn't know that. Thanks for pointing out

[h-enk]

#1323

[mhite]

Hey, that's strange, I'm seeing it the other way around (default, new install):

Hmmm, well this is quite the mystery!

No quick fix here. I recommend to use a shortcode like for example this one: Email obfuscation

Currently, a render hook (node_modules/@thulite/doks-core/layouts/_default/_markup/render-link.html) is doing its magic. I'm planning to deprecate this functionality (too opinionated, you should have a choice). The new prefered way will be to use a shortcode, see Email obfuscation for an example

One issue with the shortcode approach is that I don't think you can't reference it in the mailto link.

IE. These won't work:

Please send email to ({{< email >}})[mailto:{{< email >}}].

Please send email to (support)[mailto:{{< email >}}].

If you do deprecate the render hook in favor of the shortcode, perhaps there is a way to make the shortcode able to render mailto links? (Or perhaps there is a way of referencing it in a link already that I don't understand?)

Also, as I dig into node_modules/@thulite/doks-core/layouts/partials/main/email.html I can see that there is a nonce- hardcoded there that I could presumably add to the CSP. (If I'm understanding how nonce works correctly.)