Code Self Study Forum

HTML5 ping Attribute Example

I was curious about the ping attribute on a elements, so I created a small Express.js app to experiment with it. I’ve only seen it in the wild on Google’s search results.

Example:

<a href="/some-path" ping="/analytics">Click</a>

MDN’s description:

ping

A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

If the route, /analytics, captures the headers, it will show the ping-from and ping-to headers like this:

{
    // the page where the link was clicked
    'ping-from': 'http://localhost:3000/',
    // the page where the user is going
    'ping-to': 'http://localhost:3000/some-path',
}

Example code to print out the headers:

router.post('/analytics', (req, res) => {
    console.log('here', req.headers);
    res.json({});
});

At the moment, Firefox doesn’t send the pings, but it looks like they have plans to enable it. uBlock Origin will also block it.

Back in the days of IIS, we used to do this with an ISAPI filter. You could just hook into any URL you were interested in and then build the from/to navigation if you wanted.

1 Like