# Bad value X for attribute “src” on element “iframe”: Illegal character in query: “[” is not allowed.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-src-on-element-iframe-illegal-character-in-query-square-bracket-is-not-allowed
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When the W3C HTML Validator reports **"Bad value X for attribute `src` on element `iframe`: Illegal character in query: `[` is not allowed"**, it means your URL contains unencoded square brackets in the query portion (everything after the `?`). While most modern browsers will silently handle these characters and load the resource anyway, the URL does not conform to the URI syntax defined in [RFC 3986](https://datatracker.ietf.org/doc/html/rfc3986), which the HTML specification requires.

According to RFC 3986, square brackets are **reserved characters** that have a specific purpose: they are only permitted in the `host` component of a URI to denote IPv6 addresses (e.g., `http://[::1]/`). Anywhere else in the URI — including the query string — they must be percent-encoded. The HTML living standard (WHATWG) requires that URLs in attributes like `src`, `href`, and `action` be valid URLs, which means they must follow these encoding rules.

## Why this matters

- **Standards compliance:** Invalid URLs cause W3C validation failures, which can indicate deeper issues in your markup.
- **Interoperability:** While mainstream browsers are forgiving, some HTTP clients, proxies, CDNs, or web application firewalls may reject or mangle URLs with unencoded square brackets.
- **Consistent behavior:** Percent-encoding reserved characters guarantees that the URL is interpreted the same way everywhere — in browsers, server logs, link checkers, and automated tools.
- **Copy-paste reliability:** When users or tools copy a URL from your HTML source, an already-encoded URL is less likely to break during transmission through email clients, messaging apps, or other systems.

## How to fix it

Replace every occurrence of `[` with `%5B` and `]` with `%5D` within the query string of the URL. If you're generating URLs server-side or in JavaScript, use the language's built-in URL encoding functions rather than doing manual find-and-replace:

- **JavaScript:** `encodeURIComponent()` or the `URL` / `URLSearchParams` APIs
- **PHP:** `urlencode()` or `http_build_query()`
- **Python:** `urllib.parse.urlencode()` or `urllib.parse.quote()`

These functions will automatically encode square brackets and any other reserved characters.

## Examples

### ❌ Invalid — unencoded square brackets in query string

```html
<iframe src="https://example.com/embed?filter[status]=active&filter[type]=video"></iframe>
```

The validator flags `[` and `]` as illegal characters in the query component.

### ✅ Valid — square brackets percent-encoded

```html
<iframe src="https://example.com/embed?filter%5Bstatus%5D=active&filter%5Btype%5D=video"></iframe>
```

Replacing `[` with `%5B` and `]` with `%5D` resolves the error. The server receives the exact same parameter values — most server-side frameworks (PHP, Rails, etc.) automatically decode percent-encoded characters before processing them.

### ❌ Invalid — square brackets in a timestamp parameter

```html
<iframe src="https://example.com/report?time=[2024-01-01]"></iframe>
```

### ✅ Valid — timestamp parameter properly encoded

```html
<iframe src="https://example.com/report?time=%5B2024-01-01%5D"></iframe>
```

### Generating encoded URLs in JavaScript

If you're setting the `src` dynamically, let the browser handle encoding for you:

```html
<iframe id="report-frame"></iframe>
<script>
  const url = new URL("https://example.com/embed");
  url.searchParams.set("filter[status]", "active");
  url.searchParams.set("filter[type]", "video");
  document.getElementById("report-frame").src = url.toString();
</script>
```

The `URLSearchParams` API automatically percent-encodes the brackets, producing a valid URL in the `src` attribute.

## A note on other elements

This same rule applies to any HTML attribute that accepts a URL — including `href` on `<a>` elements, `action` on `<form>` elements, and `src` on `<script>` or `<img>` elements. Whenever you place a URL in HTML, ensure all reserved characters in the query string are properly percent-encoded.