Immutable images. How do I specify paths for all images in directory tree in _headers

Support
, ,
1

We have a conventional content website that is deployed on netlify. By design, practically all the assets excepting the HTML files, are immutable. I am trying to configure the headers in netlify.toml to set a longer max-age for all jpg files in the directory tree (dozens of them). I tried the following

[[headers]]
for = “*.jpg”
[headers.values]
X-Frame-Options = “DENY”
X-XSS-Protection = “1; mode=block”

Cache-Control = "public max-age=604800"

However, when I look in Chrome Dev Tools for the response headers, I am still seeing the standard netlify cache-control headers.

This seems like a common scenario, but I couldn’t find anything about it in the support tickets.

Here is the URL

thanks,

Al

3

I tried the same thing, but with a _headers file. This time it works, but I specified wildcards for images in each directory, i.e.

/foo/*.jpg
Cache-Control: public, max-age=604800

This is tedious and error prone. Is there a simple way to specify it for all images in the directory tree?

4

Hi, @Rangoli-Software, and welcome to the Netlify community site. :+1:

The wildcard will match anything until the end of the URL. The rule above is essentially the same as this (without “.jpg”:

/foo/*
Cache-Control: public, max-age=604800

So it is working only because the path matches, not because of the file extension. There is no way to write a rule that matches the file extension at this time.

The recommended workaround would be to put all the assets that require a special header into a subdomain (as you have done) and apply the rule to the contents of that directory.

If there are other questions about this, please let us know.

5

Does the path /foo/*.js match all files in /foo? It seems like “html” files in those directories still get the standard netlify cache control headers, rather than the ones I’m specifying.

8

Hi @Rangoli-Software ,

You should actually be able to do what you’re trying to do. Can you make cache-control lowercase? That should work then. The case has to match in order for it to override our default headers.

9

It does actually work as is (without lowercasing “cache-control”). It would be nice if the question of wild-card matches (do the extensions work as they seem to be) could be authoritatively answered.

10

That is what Gerald was trying to tell you - if you use _headers, and use a path of:

/*.jpg

and a header of

cache-control (INSTEAD OF Cache-Control!)

I think you’ll see things working as expected :slight_smile:

11

Either @luke is correct or futuregerald and @fool are correct, but all of the posts can’t be true.

Can you use file extensions after a wildcard like /dir/*.html and /dir/*.jpg or not?

Also can you use double wildcards for directories like /dir/**/*.html and /dir/**/*.jpg or not?

There seems to be a lot of conflicting information (even from the Netlify team) about both the syntax and capabilities of the header directives across this forum so a little clarity would be much appreciated. Thank you. :slightly_smiling_face:

12

I think Luke was wrong - you can use either:

/path/*

or

*.jpg

type notation IN THE HEADERS FILE (vs in the redirects file).

There is definitely no provision for ** notation. Only one * would possibly work.

Feel free to give a try for /dir/*.html and let us know how it goes; I’ve never tried that and it is not outlined in our docs.