6

I am being rate limited, because the code I am editing in a snippet is requesting nonexistent images in a loop.

I have fixed the reason for the rate limiting (I believe) by adding the tag <base href="https://example.com/" /> to the html, but that took me a while to figure out.

It would be rather nice to get a warning first and not just an error when the rate limiting is about to kick in while editing!


Here is an example snippet. If you type for a while in the textbox, you will be rate limited I believe because it loads an image per character you type and even though it gets a 404, it counts as a request in the quota.

The code could throttle/debounce the images but that was not part of the question and would not be a problem on OP's site

const lineLength = 20;
const space = 'FONT/space.png';
const newLine = '<br/>';
const userInput = document.getElementById('userInput');
const imageOutput = document.getElementById('imageOutput');
const generateImages = (str) => [...str.toUpperCase()]
  .map((char, i) => {
    if (char === '\n') return newLine;
    const src = char === ' ' ? space : `FONTS/${char}${Math.floor(Math.random() * (4 - 1) + 1)}.png`;
    const img = `<img class="bobbing-photo" alt="${char}" src="${src}" />`
    // console.log(img)
    return `${img}${(i>0 && i%lineLength === 0) ? newLine : ''}`;
  })
  .join('');
userInput.addEventListener('input', (event) => {
  imageOutput.innerHTML = generateImages(userInput.value.trim());
  document.querySelectorAll('.bobbing-photo').forEach(photo => {
    var randomDelay = Math.random() * (0, 100) / 100; // Random delay between 0 and 2 seconds
    photo.style.animationDelay = randomDelay + 's';
  });
});
body { background-color: #f35c2c; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; font-family: "Work Sans", sans-serif; color: white; } img { height: 75px; } .bobbing-photo { float: left; position: relative; animation: bob-anim 0.5s infinite linear alternate; } body, input { font-size: 20px; } 
<!-- base href="https://example.com/" / --><!-- delete this on your own server. When commented out on Stack Overflow, then I believe it generates rate limitations -->

Enter your message: <br />
<textarea id="userInput"></textarea>
<div id="imageOutput"></div>

5
  • I'm curious, what does the rate limiting affect - just the snippet domain, or does it start blocking you on the SO parent site as well? Commented Jul 21, 2023 at 10:26
  • 2
    All stackexchange I believe - I could not ask on Meta either
    – mplungjan
    Commented Jul 21, 2023 at 10:29
  • 2
    Can you provide an example snippet so we can reproduce this?
    – Cerbrus
    Commented Jul 21, 2023 at 11:33
  • @Cerbrus I have to comment from my phone some I got limited after typing only a few letters. Getting 406 not acceptable when just trying to run the snippet
    – mplungjan
    Commented Jul 21, 2023 at 12:02
  • The question itself is twice as long with the irrelevant CSS.
    – Cerbrus
    Commented Jul 21, 2023 at 12:48

1 Answer 1

5

The problem boils down to bad code, in a very specific use case.

I'm not sure this can feasibly be fixed. The snippet is indeed bulk-loading images from https://stacksnippets.net/.

These images are being loaded directly from innerHTML-injected img tags.

To show a warning first, you'd have to prevent the requests from being sent (client-side).
Stack Snippets would have to, somehow, interrupt these requests when they're too frequent.

I don't see how.

8
  • Just ignore 404s or pop a warning "You are about to be rate limited". If the referer is the snippet iFrame, then they can even tell why.
    – mplungjan
    Commented Jul 21, 2023 at 12:19
  • This is not the first time I have this due to relative links in code. I will try to use the base href where feasible
    – mplungjan
    Commented Jul 21, 2023 at 12:25
  • "or pop a warning "You are about to be rate limited"" How? That's technically pretty much impossible
    – Cerbrus
    Commented Jul 21, 2023 at 12:45
  • Not at all. Happens in for example github where they have throttling AND rate limiting. We have quota management at our site too, especially for the API with green, orange and red light return values
    – mplungjan
    Commented Jul 21, 2023 at 12:55
  • 1
    @mplungjan you're asking for 1: stacksnippets.net returning a rate-limiting warning whilst actually returning a valid response and the stack snippets client to actually catch that warning on image tag requests, and handle those. That, on a ____extremely___ specific usecase. There is no HTTP standard for a rate-limiting "warning". You can either return a valid response, or an error code.
    – Cerbrus
    Commented Jul 21, 2023 at 13:09
  • I see a red error popup when they fail to save. SO counts the number of accesses per IP to eventually send the "Go away" screen. I am asking for a red warning to come a bit earlier that the red error. Completely doable, imnho. Alternatively stop rate limiting users with more than XXXX rep
    – mplungjan
    Commented Jul 21, 2023 at 13:11
  • 3
    The stacksnippets domain doesn't have knowledge of a user's reputation. Again; Assuming such a warning is even possible on a HTTP call, wow would snippets (client-side) handle that warning? What you're asking for is technically unfeasible. Or at very least an excessive amount of effort for a very specific, uncommon use-case caused by bad code in a snippet.
    – Cerbrus
    Commented Jul 21, 2023 at 13:15
  • Very well.......
    – mplungjan
    Commented Jul 21, 2023 at 13:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .