Is there a way to send a 503 Header on specific pages?

Hey,

I tried to find a solution to be able to display specific Status Code Pages and also supply the correct HTTP Status Header. e.g. a Maintenance or specific Error Page with a 503 Status code.

first i tried to add the “Status” Value to the header, but Netlify accepted the header rules itself but ignored the 503 Status for the “/components/specific” route. At least i never saw it.

    [{
        "for": "/components/specific",
        "values": {
            "Status": "503 Service Temporarily Unavailable",

“Retry-After”: 300,
“X-XSS-Protection”: “1; mode=block”,
“X-Frame-Options”: “DENY”,
“X-Content-Type-Options”: “nosniff”,
“Referrer-Policy”: “no-referrer”,
“Content-Security-Policy”: “default-src * data: ‘unsafe-eval’ ‘unsafe-inline’”,
“Feature-Policy”: “camera ‘self’; fullscreen ‘self’; microphone ‘self’; speaker ‘self’; midi 'self”
}
},
{
“for”: “/*”,
“values”: {
“X-XSS-Protection”: “1; mode=block”,
“X-Frame-Options”: “DENY”,
“X-Content-Type-Options”: “nosniff”,
“Referrer-Policy”: “no-referrer”,
“Content-Security-Policy”: “default-src * data: ‘unsafe-eval’ ‘unsafe-inline’”,
“Feature-Policy”: “camera ‘self’; fullscreen ‘self’; microphone ‘self’; speaker ‘self’; midi 'self”
}
}
]

Then i tried to maybe solve it by a redirect, as i saw you could redirect with a specific status code.
If I set the “to” to “/” then the “/” path would flicker up for a millisecond and then go back tot the “from” path with a visible 503 Status Code visible in the network tab.

    {
        "from": "/components/specific",
        "to": "/",
        "status": 503,
        "force": true
    }

If i tried to set the redirect from to the same as the to then nothing would be happening.

    {
        "from": "/components/specific",
        "to": "/components/specific",
        "status": 503,
        "force": true
    },

Is there no way to defined routes where you want to have a specific Status Code Header Sent?
If not then a maintenance mode is hardly possible :frowning:

you can see the results at: https://st-immospotter.netlify.app

Hey @bstrd,

Best I have for you is this discussion. My colleague, Gerald, has an example of a 503 using _redirects!

Hey @Scott,

yeah I saw that one, that is why I actually tried out redirects although they seem to behave weirdly…

[
{“from”:“/components/specific”,“to”:“/components/specific”,“status”:503,“force”:true},{“from”:“/components/common”,“to”:“/components”,“status”:503,“force”:true}
]

as you can see with:
https://st.immospotter.at/components/common
when you reload the page he jumps to /components and then instantly back to /components/common - why is that ?
It would be possible if you then define a specific maintenance page where you redirect to, but as long as he instantly jumps back to the “from”, even that would not work. :thinking:

on /components/specific, nothing happens at all.

Did I configure something wrong here ?
And is there no way to just define a Status Code Header in the Headers ?

Would really appreciate some help regarding a solution for that case :slight_smile:

thanks!

Hey @bstrd,

I actually think that this may be because the original page is being served and rendered. I think this may be due to a service worker running on the site.

Hey,

The Service Worker is only if you already visited the site already - you can see that the pwa service worker does not return the page if you do a hard reload on it - so that can’t be the reason I think.

Hi again!

Just checking in on this one – I can’t seem to be able to replicate the issue any more. What did you change? :smiley:

hey @Scott ,

sorry took it out in the meantime. But the redirect is now active again.

https://st.immospotter.at/components/common

Hey @bstrd,

I’d definitely try removing the service worker. Honestly, I think it’s making things funky:

URL: https://st.immospotter.at/components/common
Status: 503
Source: Service Worker

hey,

tried that already - although I need it for my PWA functionality.
It did not change anything on the behaviour with the 503 redirect though.

If you do a hard reload on the page and clear the app data you won’t have the service worker loading anything anyway and the redirect still behaves like that …

Hmmm.

Is there any chance that you can try this from a _redirects file? Judging by your syntax, you’ve used a netlify.toml file. I’d just like to see if maybe this is perhaps an issue with 503 redirects in the netlify.toml file.

/components/common /components 503!

can you see that the deployed redirects in the netlify.toml are correct?

Changed and deployed it with the _redirects file instead → according to the build log the redirect rule is accepted

→ same behaviour

Alright @bstrd, I’m out of ideas for now but I’ll get back to you once I’ve discussed this internally!

Thanks :slight_smile: Please keep me posted - and just give me a shout to try out stuff

if possibl, when you discuss it internally - maybe also consider a _headers solution where you can just set specific status codes (503) with the netlify.toml headers - because like described above - that also does not work - there is no 503 status code applied when tried like that.

The Headers solution would be preferred anyway.

Could you create a new rule and not have to shadow the 503 for us to test against?

e.g. /nonsenseurl /components 503

We’ll check how this performs! With this, we can get a bug filed and chase up the intended behaviour.

Shadow?

will create a page and rule for it shortly.
With _redirects or netlify.toml ?

Yeah, instead of 503! (force=true) can you try 503 (force=false)?

Either/or, I’d say _redirects if you only wanna try one! :slight_smile:

Hey @Scott

created three pages for your now so you can actually see how it behaves with different redirects and headers:
https://st.immospotter.at/components/maintenance
https://st.immospotter.at/components/maintenance-force
https://st.immospotter.at/components/maintenance-header

redirects:

[                                                                                                                                                                 11:30:59
  {
    from: '/components/maintenance',
    to: '/components',
    status: 503,
    force: false
  },
  {
    from: '/de/komponenten/wartungsarbeiten',
    to: '/de/komponenten',
    status: 503,
    force: false
  },
  {
    from: '/components/maintenance-force',
    to: '/components',
    status: 503,
    force: true
  },
  {
    from: '/de/komponenten/maintenance-force',
    to: '/de/komponenten',
    status: 503,
    force: true
  }
]

headers

[
  {
    for: '/components/maintenance-header',
    values: {
      Status: '503 Service Temporarily Unavailable',
      'Retry-After': 300,
      'X-XSS-Protection': '1; mode=block',
      'X-Frame-Options': 'DENY',
      'X-Content-Type-Options': 'nosniff',
      'Referrer-Policy': 'no-referrer',
      'Content-Security-Policy': "default-src * data: 'unsafe-eval' 'unsafe-inline'",
      'Feature-Policy': "camera 'self'; fullscreen 'self'; microphone 'self'; speaker 'self'; midi 'self"
    }
  },
  {
    for: '/*',
    values: {
      'X-XSS-Protection': '1; mode=block',
      'X-Frame-Options': 'DENY',
      'X-Content-Type-Options': 'nosniff',
      'Referrer-Policy': 'no-referrer',
      'Content-Security-Policy': "default-src * data: 'unsafe-eval' 'unsafe-inline'",
      'Feature-Policy': "camera 'self'; fullscreen 'self'; microphone 'self'; speaker 'self'; midi 'self"
    }
  }
]

you can see that only the force redirect has any result and it behaves weirdly because it jumps to the redirect and back again.

the non force redirect seems to have no effect at all.

the 503 header seems also to have no effect at all.

It would be great to find a solution for that. :slight_smile:

thanks for those reproduction steps! We’ll be reviewing with our CDN developers on Monday and hope to have a follow up for you after that.