HTML atrybut src, łamanie linii w adresie URL, błąd 404, kodowanie %0A, obsługa długich ścieżek

Pytanie

html, adres wpisany w src=""n w dwóch liniach

Odpowiedź Sztucznej Inteligencji

Bezpośrednia odpowiedź na pytanie

• Wartość atrybutu src="" musi być jednym, nieprzerwanym ciągiem znaków – znak nowej linii (\n, \r\n) lub spacja wstawione wewnątrz adresu stają się częścią URL i zostaną zakodowane (np. %0A), co niemal zawsze kończy się błędem 404/400.
• Jeśli adres jest długi, zapewnij czytelność kodu:

• włącz „soft-wrap” w edytorze,
• składaj URL z fragmentów w JavaScripcie / szablonie,
• trzymaj adres w zmiennej/konstancie lub pliku konfiguracyjnym.

Szczegółowa analiza problemu

1. Jak przeglądarka parsuje atrybut
   • W HTML5 parser traktuje wszystko pomiędzy cudzysłowami jako literalną wartość.
   • Znak nowej linii lub tabulator nie jest usuwany ani normalizowany – staje się bajtem LF (0x0A) lub CR (0x0D).
   • Przy wysyłaniu żądania URL przechodzi przez normalizację i LF/CR kodowane są jako %0A/%0D.

   Przykład błędny:

   <img src="https://example.com/img/
   big-picture.jpg">

   Zapytanie, które zobaczysz w narzędziach deweloperskich:

   https://example.com/img/%0Abig-picture.jpg

2. Czy da się „legalnie” łamać wiersz?
   • Jedyną dopuszczalną wielowierszową formą adresu jest łańcuch złożony w czasie generowania:
   – po stronie serwera (PHP, Python, Node.js)
   – w JS po stronie klienta.
   • HTML nie oferuje ekwiwalentu \ (jak w bash) ani kontynuacji linii znanej z CSS.

3. Alternatywy dla długich ciągów
   • Przechowywanie bazowego origin i ścieżki w osobnych zmiennych (konfiguracja->konsystencja).
   • Dla obrazów responsywnych: element <picture> z kilkoma <source> zamiast jednego ogromnego srcset.
   • Skracacze URL lub aliasy serwera (np. Nginx location /imgs/ { … }).

4. Diagnostyka
   • Chrome/Firefox DevTools → zakładka Network, kolumna Request URL.
   • Jeśli zobaczysz %0A, wiesz, że w pliku znajduje się twarde łamanie linii.

Aktualne informacje i trendy

• Nowoczesne bundlery (Vite, Webpack 5, esbuild) pozwalają importować zasoby jako moduły (import img from './long-name.png';) i automatycznie wstawiają poprawny URL w HTML/JS.
• W projektach statycznych popularne jest utrzymywanie asset-ów w CDN o krótkich ścieżkach i wersjonowanie przez query-string (?v=…) zamiast rozbudowanych nazw.
• W specyfikacji WHATWG HTML (aktualizacja 2024-04) nie planuje się zmiany zachowania parsera atrybutów.

Wspierające wyjaśnienia i detale

• href, action, data, poster – każdy atrybut przyjmujący URL podlega tej samej regule.
• „Spacja wewnątrz URL” również musi być kodowana (%20), dlatego przeglądarka nie może po prostu „pominąć” białych znaków.
• Wyjątek: atrybuty listowe (srcset, sizes) mają własny gramatyczny separator przecinek/spacja; nawet tu znak nowej linii jest traktowany jak zwykła spacja i będzie częścią tokenu – również niezalecane.

Aspekty etyczne i prawne

• Nie ma bezpośrednich zagadnień etycznych, lecz błędnie złożony URL może generować niepotrzebny ruch 404 na serwerze (koszty, logi, obciążenie).
• Przy dynamicznym składaniu URL z danych użytkownika pamiętaj o walidacji i unikaniu open redirect/XSS.

Praktyczne wskazówki

1. Edytor: włącz soft-wrap, ustaw limit kolumn (80–120), używaj formattera (Prettier/ESLint).
2. JS/TS:

   const CDN = 'https://cdn.example.com/assets/';
   const file = '2024/05/very-long-name.webp';
   img.src = `${CDN}${file}`;

3. Serwer: konfiguracja URL-rewrite pozwala skrócić ścieżki użytkowe bez zmiany struktury dysku.
4. Testy: jednostkowo sprawdzaj poprawność wygenerowanych adresów (expect(url).not.toMatch(/[\n\r\s]/)).

Ewentualne zastrzeżenia

• Niektóre stare narzędzia minifikujące mogły wstawiać „\” na końcu linii w atrybutach, co psuło pliki; dziś standardowe minifikery tego nie robią.
• Biblioteki szablonów umożliwiają wcięcia i złamania w kodu, jednak wynikowy HTML po renderze jest już jednoliniowy – to bezpieczne.

Sugestie dalszych badań

• Sprawdź mechanizmy srcset i <picture> dla dużych, responsywnych obrazów.
• Zapoznaj się z Module Workers / Import Maps – zmieniają podejście do ścieżek zasobów w nowoczesnych aplikacjach.
• Przetestuj narzędzia typu URLPattern (Chrome 111+) do walidacji adresów po stronie klienta.

Krótkie podsumowanie

Atrybut src przyjmuje jedną linię tekstu bez znaków nowej linii. Fizyczne złamanie linii w pliku HTML powoduje powstanie nieprawidłowego URL (kodowany %0A/%0D) i błąd ładowania zasobu. Poprawna praktyka to wizualne zawijanie w edytorze lub dynamiczne składanie adresów poza HTML.