Nginx http2_push issue

Question

I am trying to implement http2_push using nginx on windows 7. I followed steps mentioned in this article.

I'm running nginx 1.13.12 executable version. Have created & installed self signed certificates and it is working fine.

As mentioned in this answer, I checked and solved the certificate validation issue as well.

Still the files I want to push is not getting pushed into the browser. I am checking it through the network tab in inspector (Google Chrome - Screenshot attached).

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       443 ssl http2;
        server_name  localhost;

        ssl_certificate      ssl/localhost.crt;
        ssl_certificate_key  ssl/localhost.key;

        location = /test.html {
            root html;
            http2_push /stylepush.css;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

Output (Screenshot):

Can anyone help me out where I am going wrong? Thanks for the help in advance.

Is stylepush.css in the same directory as test.html? – Faisal Memon May 15 '18 at 17:47 — Faisal Memon, May 15 '18 at 17:47
@FaisalMemon Yes its in the same directory. – Pankit Kapadia May 16 '18 at 05:06 — Pankit Kapadia, May 16 '18 at 05:06

score 2 · Accepted Answer · edited May 16 '18 at 12:56

2

HTTP/2 push only works when the pushed resource is needed by the page (i.e. it's referenced in the HTML). In this case, the fact that /stylepush.css is not loaded by the page at all (never mind by Push as the initiator) shows it is not being used.

If you go to chrome://net-internals/#http2 you should see this as an unclaimed push:

Add a reference to this CSS file in your HTML and you should see it as pushed.

If not, then go to chrome://net-internals/#events&q=type:HTTP2_SESSION in Chrome and provide the HTTP/2 Session data.

Additionally Chrome requires a recognised certificate before it allows you to cache resources (and HTTP/2 resources are pushed into a cache before they are uses). Since Chrome Version 58, they also require the Subject Alternative Name (SAN) to be be set on the certificate, which requires some extra config to set when creating a self-signed certificate.

edited May 16 '18 at 12:56

Pankit Kapadia

1,579
13
25

answered May 15 '18 at 16:40

Barry Pollard

40,655
7
76
92

Any specific way to add a reference or simply a `link` tag are you talking about? – Pankit Kapadia May 16 '18 at 05:09
You must add a `` tag to your HTML so the page tries to load the CSS file. – Barry Pollard May 16 '18 at 05:14
I added `link` tag but then the Initiator for the `stylepush.css` is showing `test.html` and not `Push/test.html` [Check Screenshot](http://kapadiapankit.in/ss.jpg) – Pankit Kapadia May 16 '18 at 05:52
Can you give a screenshot of chrome://net-internals/#http2 ? And ideally the log contents for your domain in chrome://net-internals/#events&q=type&type:HTTP2_SESSION – Barry Pollard May 16 '18 at 06:02
Here are the screenshots: [HTTP2](http://kapadiapankit.in/http2.jpg) & [Events](http://kapadiapankit.in/event.jpg). – Pankit Kapadia May 16 '18 at 06:16
What I am noticing is when I use/add `link` tag in my html, the net-internal is showing `Duplicate pushed stream with url: https://localhost/stylepush.css` in `HTTP2_SESSION_SEND_RST_STREAM` block. – Pankit Kapadia May 16 '18 at 06:24
So push is working from nginx but Chrome is refusing it. That's usually due to a certificate error. Is your certificate for localhost? Or Localhost? Or LOCALHOST? I've seen instances in those cases where your see a green padlock but it's not accepted as a valid cert for HTTP/2. – Barry Pollard May 16 '18 at 06:39
Can you show the Subject Alternative Name for the Certificate under the Details tab? – Barry Pollard May 16 '18 at 07:23
Are you talking about [this](http://kapadiapankit.in/crt-sub.jpg)? I could not find `Alternative Name` thing. – Pankit Kapadia May 16 '18 at 07:40
That;'s your problem then but Chrome shouldn't accept that and you should not have a green padlock. Did you get a cert error when you go to the site? What version of chrome are you on? – Barry Pollard May 16 '18 at 09:35
Chrome Version 65.0.3325.181. No I didn't get any cert error. How do I create self sign certificate which has `Alternative Name`? I'd created it using openssl. – Pankit Kapadia May 16 '18 at 09:39
Sharing you the commands which I'd used creating the certificates. [Check this](http://kapadiapankit.in/ssl.jpg) – Pankit Kapadia May 16 '18 at 09:45
Weird. there are plenty of resources on creating certificates with Subject Alternative Names: https://stackoverflow.com/questions/43665243/invalid-self-signed-ssl-cert-subject-alternative-name-missing – Barry Pollard May 16 '18 at 09:48
Okay Thanks. I will check and regenerate certificate which has Subject Alternative Name. Get back to you after a trial :) – Pankit Kapadia May 16 '18 at 09:54
Finally! Yes, after adding Subject Alternative Name to the certificate it worked like a charm! :) Thanks a lot for you support. I have one more doubt. When I include `link` tag in my html file. Won't it be increasing the number of requests to the server? – Pankit Kapadia May 16 '18 at 11:04
The browser will see the link, see it needs the stylesheet, and then realise it already has it cause it’s already been pushed. I can recommend a good book on this subject btw :-) https://www.manning.com/books/http2-in-action – Barry Pollard May 16 '18 at 11:43
Okay. Thanks a lot Barry! :) – Pankit Kapadia May 16 '18 at 12:32

Nginx http2_push issue

1 Answers1