<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Tossesdev</title>
    <description>The latest articles on Forem by Tossesdev (@tossesdev).</description>
    <link>https://forem.com/tossesdev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3861429%2F35cacbf2-4643-4f0c-a73b-c928cf4ec314.png</url>
      <title>Forem: Tossesdev</title>
      <link>https://forem.com/tossesdev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/tossesdev"/>
    <language>en</language>
    <item>
      <title>Stop building backends just to hide API keys</title>
      <dc:creator>Tossesdev</dc:creator>
      <pubDate>Fri, 10 Apr 2026 04:10:19 +0000</pubDate>
      <link>https://forem.com/tossesdev/stop-building-backends-just-to-hide-api-keys-oem</link>
      <guid>https://forem.com/tossesdev/stop-building-backends-just-to-hide-api-keys-oem</guid>
      <description>&lt;p&gt;We all know how inconvenient it is to spin up a backend just to hide an API key, but obviously that inconvenience is a lot more appealing than waking up to a $20k bill because someone found your key on GitHub or in DevTools while you were sleeping. So, I put some thought into what protections having a dedicated backend for your key actually gets you, and it narrowed down to a handful of things:&lt;/p&gt;


&lt;div class="crayons-card c-embed"&gt;

  

&lt;ul&gt;
&lt;li&gt;Rate limiting - Stop your key from getting spammed&lt;/li&gt;
&lt;li&gt;CORS - Stop people from putting your key into their own apps&lt;/li&gt;
&lt;li&gt;Authentication (Firebase, auth0, Clerk, etc) - Require sign in for hitting the API&lt;/li&gt;
&lt;li&gt;Endpoint allow listing - Stop people from accessing endpoints they shouldn't be

&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;



&lt;p&gt;And for most projects, the implementation is nearly identical app to app. So why not make a &lt;em&gt;drop in replacement&lt;/em&gt; to hardcoding keys, that's compatible with any API... I did. &lt;/p&gt;
&lt;h2&gt;
  
  
  Introducing Bounce
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://bounce.tosses.dev" rel="noopener noreferrer"&gt;Bounce&lt;/a&gt; is an API proxy that lets you set up a config and swap your API base URL for a Bounce URL... and that's it. It handles all of the security mentioned above, and injects your key into the query before sending it to the upstream. Then responds exactly the same as the upstream API would (streamed responses work as well). Without needing code. &lt;/p&gt;
&lt;h3&gt;
  
  
  The replacement is just:
&lt;/h3&gt;
&lt;h4&gt;
  
  
  Instead of calling the API directly (exposing your key):
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://api.tosses.dev/v1/credentials&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
 &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;SECRET_KEY&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;expiry_ttl&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1800&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; 
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  Route through Bounce to auto-inject your secret key:
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;BOUNCE_KEY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;your_key_here&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;BOUNCE_URL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`https://fetch.tosses.dev/&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;BOUNCE_KEY&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/v1/credentials`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;BOUNCE_URL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
&lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;expiry_ttl&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1800&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="c1"&gt;// No 'key' needed&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;a href="https://bounce.tosses.dev" class="crayons-btn crayons-btn--primary" rel="noopener noreferrer"&gt;Try it out here! I'd appreciate any feedback!&lt;/a&gt;
&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>security</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Built a proxy so frontend devs can make secure API calls without a backend</title>
      <dc:creator>Tossesdev</dc:creator>
      <pubDate>Sat, 04 Apr 2026 19:19:15 +0000</pubDate>
      <link>https://forem.com/tossesdev/built-a-proxy-so-frontend-devs-can-make-secure-api-calls-without-a-backend-46aj</link>
      <guid>https://forem.com/tossesdev/built-a-proxy-so-frontend-devs-can-make-secure-api-calls-without-a-backend-46aj</guid>
      <description>&lt;p&gt;Built &lt;a href="https://bounce.tosses.dev" rel="noopener noreferrer"&gt;Bounce&lt;/a&gt; after I realized how annoying it is for frontend devs to need a backend just to make a secure API call. Used my own backend experience to take that off their plate. It's a proxy that injects your credentials server-side so your keys never hit the browser. Any feedback would be greatly appreciated.&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://bounce.tosses.dev/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbounce.tosses.dev%2Fog-image.png" height="" class="m-0" width=""&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://bounce.tosses.dev/" rel="noopener noreferrer" class="c-link"&gt;
            Bounce by Tosses - API Proxy
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Secure API calls, straight from the frontend. A smart-proxy that removes the need for a dedicated backend.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbounce.tosses.dev%2Ffavicon.svg" width="200" height="200"&gt;
          bounce.tosses.dev
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>webdev</category>
      <category>devtool</category>
      <category>security</category>
      <category>api</category>
    </item>
  </channel>
</rss>
