{"id":15631376,"url":"https://github.com/azu/url-cheatsheet","last_synced_at":"2025-08-20T14:32:24.584Z","repository":{"id":64744588,"uuid":"577811797","full_name":"azu/url-cheatsheet","owner":"azu","description":"URL manipulation cheatsheet for JavaScript","archived":false,"fork":false,"pushed_at":"2023-08-21T14:38:04.000Z","size":108,"stargazers_count":194,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-10T00:42:14.890Z","etag":null,"topics":["cheatsheet","javascript","url","urlsearchparams"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"azu"}},"created_at":"2022-12-13T15:25:27.000Z","updated_at":"2024-10-25T12:14:12.000Z","dependencies_parsed_at":"2024-10-23T01:36:22.452Z","dependency_job_id":null,"html_url":"https://github.com/azu/url-cheatsheet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azu%2Furl-cheatsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azu%2Furl-cheatsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azu%2Furl-cheatsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azu%2Furl-cheatsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azu","download_url":"https://codeload.github.com/azu/url-cheatsheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230431103,"owners_count":18224655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cheatsheet","javascript","url","urlsearchparams"],"created_at":"2024-10-03T10:40:11.217Z","updated_at":"2024-12-19T12:11:14.065Z","avatar_url":"https://github.com/azu.png","language":"JavaScript","funding_links":["https://github.com/sponsors/azu"],"categories":[],"sub_categories":[],"readme":"# url-cheatsheet\n\nURL manipulation cheatsheet for JavaScript.\n\n## DO NOT: concat url and user input without escape\n\nPlease DO NOT concat url and user input without escape\n\n```js\n// DO NOT\nconst name = \"\u003cuser input\u003e\";\nconst url = `https://example.com/user/${name}`;\nconsole.log(url); // =\u003e \"https://example.com/user/\u003cuser input\u003e\"\n```\n\nThis code may have directory traversal vulnerability.\nYou should escape the `name` by `encodeURIComponent`.\n\n```js\n// DO\nconst name = \"\u003cuser input\u003e\";\nconst url = `https://example.com/user/${encodeURIComponent(name)}`;\nconsole.log(url); // =\u003e \"https://example.com/user/%3Cuser%20input%3E\"\n```\n\nAddtionaly, You should reject [`.`](https://url.spec.whatwg.org/#single-dot-path-segment) and [`..`](https://url.spec.whatwg.org/#double-dot-path-segment) as a name.\nBecause `encodeURIComponent(\"..\")` is `..`, it may have directory traversal vulnerability.\n\n```js\n// DO\nconst name = \"\u003cuser input\u003e\";\nif (name === \"..\" || name === \".\") {\n  throw new Error(\"Invalid name\");\n}\nconst url = `https://example.com/user/${encodeURIComponent(name)}`;\nconsole.log(url); // =\u003e \"https://example.com/user/%3Cuser%20input%3E\"\n```\n\n- \u003chttps://url.spec.whatwg.org/#example-url-parsing\u003e\n- [Path Traversal | OWASP Foundation](https://owasp.org/www-community/attacks/Path_Traversal)\n- [Path Traversal and SSRF - Security, Tech, And Ramblings](https://smarpo.com/posts/path-traversal-and-ssrf/)\n\n## DO NOT: concat parameter and user input without escape\n\nPlease DO NOT concat parameter and user input without escape\n\n```js\n// DO NOT\nconst query = \"\u003cuser input\u003e\";\nconst url = `https://example.com?q=${query}`;\nconsole.log(url); // =\u003e \"https://example.com?q=\u003cuser input\u003e\"\n```\n\nThis example does not consider that `query` includes `\u0026` or `?` that is required to escape.\nYou should escape the `query` by `encodeURIComponent`.\n\n```js\n// DO\nconst query = \"\u003cuser input\u003e\";\nconst url = `https://example.com?q=${encodeURIComponent(query)}`;\nconsole.log(url); // =\u003e \"https://example.com?q=%3Cuser%20input%3E\"\n```\n\nOr, You can use [URLSearchParams()](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams) that escape each parameters automatically.\n\n- Related: [Client-side HTTP parameter pollution (reflected) - PortSwigger](https://portswigger.net/kb/issues/00501400_client-side-http-parameter-pollution-reflected)\n\n## Base URL + Path\n\nUse [`new URL(pathname, base)`](https://developer.mozilla.org/docs/Web/API/URL/URL).\n\n- keywords: url-join, join path\n\n```js\nconst base = \"https://example.com\";\nconst pathname = \"/path/to/page\";\nconst result = new URL(pathname, base);\nconsole.log(result.toString()); // =\u003e \"https://example.com/path/to/page\"\n```\n\nIf the pathname include user input, you should escape it by `encodeURIComponent`.\n\n```js\nconst base = \"https://example.com/\";\nconst name = \"\u003cuser input\u003e\";\nconst result = new URL(`/user/${encodeURIComponent(name)}`, base);\nconsole.log(result.toString()); // =\u003e \"https://example.com/user/%3Cuser%20input%3E\"\n```\n\nAddtionaly, You should reject [`.`](https://url.spec.whatwg.org/#single-dot-path-segment) and [`..`](https://url.spec.whatwg.org/#double-dot-path-segment) as a name.\nBecause `encodeURIComponent(\"..\")` is `..`, it may have directory traversal vulnerability.\n\n```js\n// DO\nconst base = \"https://example.com/\";\nconst name = \"\u003cuser input\u003e\";\nif (name === \"..\" || name === \".\") {\n  throw new Error(\"Invalid name\");\n}\nconst result = new URL(`/user/${encodeURIComponent(name)}`, base);\nconsole.log(result.toString()); // =\u003e \"https://example.com/user/%3Cuser%20input%3E\"\n```\n\n- \u003chttps://url.spec.whatwg.org/#example-url-parsing\u003e\n- [Path Traversal | OWASP Foundation](https://owasp.org/www-community/attacks/Path_Traversal)\n- [Path Traversal and SSRF - Security, Tech, And Ramblings](https://smarpo.com/posts/path-traversal-and-ssrf/)\n\n\n## Get parameter from URL\n\nUse [`URL`](https://developer.mozilla.org/docs/Web/API/URL/URL) and [URLSearchParams#get](https://developer.mozilla.org/docs/Web/API/URLSearchParams/get)\n\n```js\nconst inputURL = \"https://example.com/?q=query\u0026page=1\";\nconst url = new URL(inputURL);\nconst q = url.searchParams.get(\"q\");\nconsole.log(q); // =\u003e \"query\"\n```\n\n## Get multiple parameters as array from URL\n\nUse [`URL`](https://developer.mozilla.org/docs/Web/API/URL/URL) and [URLSearchParams#getAll](https://developer.mozilla.org/docs/Web/API/URLSearchParams/getAll)\n\n```js\nconst inputURL = \"https://example.com/?q=query\u0026lang=en_US\u0026lang=ja_JP\";\nconst url = new URL(inputURL);\nconst langs = url.searchParams.getAll(\"lang\");\nconsole.log(langs); // [\"en_US\", \"ja_JP\"]\n```\n\n## Add parameters to URL\n\nUse [URLSearchParams](https://developer.mozilla.org/docs/Web/API/URLSearchParams)\n\n```js\nconst q = \"query\";\nconst page = 1;\nconst base = \"https://example.com\";\nconst url = new URL(base);\nconst params = new URLSearchParams({\n  q,\n  page,\n});\nconsole.log(url + \"?\" + params); // =\u003e \"https://example.com/?q=query\u0026page=1\"\n```\n\nor\n\n```js\nconst q = \"query\";\nconst page = 1;\nconst base = \"https://example.com\";\nconst url = new URL(base);\nurl.search = new URLSearchParams({\n  q,\n  page,\n});\nconsole.log(url.toString()); // =\u003e \"https://example.com/?q=query\u0026page=1\"\n```\n\n:memo: `URLSearchParams` escape each parameter automtically.\n\n```js\nconst q = \"\u003cuser input\u003e\";\nconst page = 1;\nconst base = \"https://example.com\";\nconst url = new URL(base);\nurl.search = new URLSearchParams({\n  q,\n  page,\n});\nconsole.log(url.toString()); // =\u003e \"https://example.com/?q=%3Cuser+input%3E\u0026page=1\"\n```\n\n## Update parameter of URL\n\nUse [`URL`](https://developer.mozilla.org/docs/Web/API/URL/URL)'s [`searchParams`](https://developer.mozilla.org/docs/Web/API/URL/searchParams) property.\n\n```js\nconst inputURL = \"https://example.com/?q=query\u0026page=1\";\nconst url = new URL(inputURL);\nurl.searchParams.set(\"q\", \"update\");\nconsole.log(url.toString()); // =\u003e \"https://example.com/?q=update\u0026page=1\"\n```\n\n## Remove parameter from URL\n\nUse [`URL`](https://developer.mozilla.org/docs/Web/API/URL/URL) and [URLSearchParams](https://developer.mozilla.org/docs/Web/API/URLSearchParams)\n\n```js\nconst inputURL = \"https://example.com/?q=query\u0026page=1\";\nconst url = new URL(inputURL);\nurl.searchParams.delete(\"q\");\nconsole.log(url.toString()); // =\u003e \"https://example.com/?page=1\"\n```\n\n## Filter parameters\n\nAllow only `a` and `d` parameters.\n\n- keywords: pick, white list, allow list\n\n```js\nconst base = \"https://example.com/?a=1\u0026b=2\u0026c=3\u0026d=4\";\nconst url = new URL(base);\nconst allowedParameterNames = [\"a\", \"d\"];\nurl.search = new URLSearchParams(\n  Array.from(url.searchParams).filter(([key, value]) =\u003e {\n    return allowedParameterNames.includes(key);\n  })\n);\nconsole.log(url.toString()); // =\u003e \"https://example.com/?a=1\u0026d=4\"\n```\n\n## Check URL is Absolute-URL\n\n[`new URL(urlString)`](https://developer.mozilla.org/docs/Web/API/URL/URL) throw an error when parsing relative url string.\nAs a result, you can use `URL` for checking URL is absolute-URL that starts with a schema like `https:`\n\n- Related: [Secure JavaScript URL validation | Snyk](https://snyk.io/blog/secure-javascript-url-validation/)\n\n```js\nconst isValidURL = (urlString) =\u003e {\n  try {\n    new URL(urlString); // if `urlString` is invalid, throw an erorr\n    return true;\n  } catch {\n    return false;\n  }\n};\nconsole.log(isValidURL(\"https://example.com\")); // =\u003e true\nconsole.log(isValidURL(\"https/example.com\")); // =\u003e false\n```\n\n## Check URL is HTTP\n\nCheck [`URL`](https://developer.mozilla.org/docs/Web/API/URL/URL)'s [`protocol`](https://developer.mozilla.org/docs/Web/API/URL/protocol) property.\n\n```js\nconst isHttpURL = (urlString) =\u003e {\n  try {\n    const url = new URL(urlString); // if `urlString` is invalid, throw an erorr\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\n  } catch {\n    return false;\n  }\n};\nconsole.log(isHttpURL(\"http://example.com\")); // =\u003e true\nconsole.log(isHttpURL(\"https://example.com\")); // =\u003e true\nconsole.log(isHttpURL(\"ftp://example.com\")); // =\u003e false\nconsole.log(isHttpURL(\"https/example.com\")); // =\u003e false\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazu%2Furl-cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazu%2Furl-cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazu%2Furl-cheatsheet/lists"}