Steam API from JavaScript

Why Steam blocks your page

Opening https://store.steampowered.com/api/appdetails?appids=620 in a tab works because a page load is not subject to CORS. A fetch() of the same URL from your site is. Responses from store.steampowered.com, api.steampowered.com and steamcommunity.com carry no Access-Control-Allow-Origin header, so the browser hides them from your script and logs blocked by CORS policy. Steam has no setting for this; the request has to come from a server, or through a proxy that adds the header.

Game details and price from the store API

appdetails returns everything on a store page. Add filters=basic,price_overview to cut the response from about 29 KB to 7 KB, cc for the currency and l for the language. An unknown app id still returns status 200, with {"1":{"success":false}}, so check success.

// Markup: <div id="game"></div>
const proxy = 'https://proxy.cors.dev/';

async function getGame(appId, country = 'us') {
  const url = `https://store.steampowered.com/api/appdetails?appids=${appId}&cc=${country}&l=english&filters=basic,price_overview`;
  const response = await fetch(proxy + url, { credentials: 'omit' });
  if (!response.ok) {
    throw new Error(`Steam request failed: ${response.headers.get('X-Cors-Error') ?? response.status}`);
  }

  const entry = (await response.json())[appId];
  if (!entry?.success) throw new Error(`No store data for app ${appId}`);

  const game = entry.data;
  return {
    name: game.name,
    summary: new DOMParser().parseFromString(game.short_description, 'text/html').body.textContent,
    image: game.header_image,
    price: game.is_free ? 'Free' : (game.price_overview?.final_formatted ?? 'Not for sale'),
  };
}

const card = document.querySelector('#game');
getGame(620)
  .then((game) => {
    const image = document.createElement('img');
    image.src = game.image;
    image.alt = game.name;
    const title = document.createElement('h2');
    title.textContent = `${game.name}, ${game.price}`;
    const summary = document.createElement('p');
    summary.textContent = game.summary;
    card.replaceChildren(image, title, summary);
  })
  .catch((error) => {
    card.textContent = error.message;
  });

Free games have no price_overview; read is_free instead. To price several games at once, pass a comma-separated appids list together with filters=price_overview; without that filter Steam answers 400 for more than one id. Images such as header_image load in an <img> tag directly, without the proxy.

Player counts and news without a key

A few api.steampowered.com methods are public. GetNumberOfCurrentPlayers returns a single number in 48 bytes, which makes a cheap live counter. GetNewsForApp returns news posts, including ones from outside news sites; add feeds=steam_community_announcements to keep only official announcements and patch notes. GetGlobalAchievementPercentagesForApp returns the unlock rate of every achievement in a game.

// Runs in a module script or the DevTools console
const proxy = 'https://proxy.cors.dev/';

async function steamWebApi(path) {
  const response = await fetch(proxy + 'https://api.steampowered.com' + path, { credentials: 'omit' });
  if (!response.ok) {
    throw new Error(`Steam request failed: ${response.headers.get('X-Cors-Error') ?? response.status}`);
  }
  return response.json();
}

const appId = 730;
const [players, news] = await Promise.all([
  steamWebApi(`/ISteamUserStats/GetNumberOfCurrentPlayers/v1/?appid=${appId}`),
  steamWebApi(`/ISteamNews/GetNewsForApp/v2/?appid=${appId}&count=3&maxlength=300&feeds=steam_community_announcements`),
]);

console.log(`${players.response.player_count.toLocaleString()} players in game right now`);
for (const item of news.appnews.newsitems) {
  console.log(new Date(item.date * 1000).toDateString(), item.title, item.url);
}

Steam endpoints that work from the browser

API keys and limits

Player data methods such as GetPlayerSummaries and GetOwnedGames need a key from steamcommunity.com/dev/apikey. Keep those calls on a server or a serverless function. The free tier refuses any target URL with a key parameter with a 400 error, which stops a key from leaking by accident. Pro accepts keys in URLs for APIs meant to be called that way, but anything in browser code is visible to every visitor, so a Steam key still does not belong there.

• cors.dev free tier: GET and HEAD, 600 requests per minute per client IP, no daily or monthly quota, responses up to 1 MiB and 10 seconds for Steam to answer. Cookies are never forwarded.
• Steam throttling: the store API is undocumented and so are its limits. Cache app details for hours; names and prices rarely change within a day.
• Community data: market prices and ?xml=1 profiles work for public data only.

Good questions.