Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update docs for remotePatterns to mention what happens when prop is omitted #60387

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/02-app/02-api-reference/01-components/image.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -430,13 +430,14 @@ module.exports = {
{
protocol: 'https',
hostname: '**.example.com',
port: '',
},
],
},
}
```

> **Good to know**: The example above will ensure the `src` property of `next/image` must start with `https://img1.example.com` or `https://me.avatar.example.com` or any number of subdomains. Any other protocol or unmatched hostname will respond with 400 Bad Request.
> **Good to know**: The example above will ensure the `src` property of `next/image` must start with `https://img1.example.com` or `https://me.avatar.example.com` or any number of subdomains. Any other protocol, port, or unmatched hostname will respond with 400 Bad Request.

Wildcard patterns can be used for both `pathname` and `hostname` and have the following syntax:

Expand All @@ -445,6 +446,8 @@ Wildcard patterns can be used for both `pathname` and `hostname` and have the fo

The `**` syntax does not work in the middle of the pattern.

> **Good to know**: When omitting `protocol`, `port` or `pathname`, then the wildcard `**` is implied. This is not recommended because it may allow malicious actors to optimize urls you did not intend.

### `domains`

> **Warning**: Deprecated since Next.js 14 in favor of strict [`remotePatterns`](#remotepatterns) in order to protect your application from malicious users. Only use `domains` if you own all the content served from the domain.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -379,13 +379,14 @@ module.exports = {
{
protocol: 'https',
hostname: '**.example.com',
port: '',
},
],
},
}
```

> **Good to know**: The example above will ensure the `src` property of `next/legacy/image` must start with `https://img1.example.com` or `https://me.avatar.example.com` or any number of subdomains. Any other protocol or unmatched hostname will respond with 400 Bad Request.
> **Good to know**: The example above will ensure the `src` property of `next/legacy/image` must start with `https://img1.example.com` or `https://me.avatar.example.com` or any number of subdomains. Any other protocol, port, or unmatched hostname will respond with 400 Bad Request.
Wildcard patterns can be used for both `pathname` and `hostname` and have the following syntax:

Expand All @@ -394,6 +395,8 @@ Wildcard patterns can be used for both `pathname` and `hostname` and have the fo

The `**` syntax does not work in the middle of the pattern.

> **Good to know**: When omitting `protocol`, `port` or `pathname`, then the wildcard `**` is implied. This is not recommended because it may allow malicious actors to optimize urls you did not intend.
### Domains

> **Warning**: Deprecated since Next.js 14 in favor of strict [`remotePatterns`](#remote-patterns) in order to protect your application from malicious users. Only use `domains` if you own all the content served from the domain.
Expand Down
5 changes: 5 additions & 0 deletions test/unit/image-optimizer/match-remote-pattern.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ describe('matchRemotePattern', () => {
expect(m(p, new URL('https://example.com/path/to/file?q=1'))).toBe(false)
expect(m(p, new URL('http://example.com/path/to/file'))).toBe(false)
expect(m(p, new URL('ftp://example.com/path/to/file'))).toBe(false)
expect(m(p, new URL('https://example.com:81'))).toBe(false)
expect(m(p, new URL('https://example.com:81/path/to/file'))).toBe(false)
expect(m(p, new URL('https://example.com:81/path/to/file?q=1'))).toBe(false)
})

it('should match literal protocol, hostname, port, pathname', () => {
Expand Down Expand Up @@ -100,6 +103,8 @@ describe('matchRemotePattern', () => {
expect(m(p, new URL('https://example.com/path/to/file?q=1'))).toBe(false)
expect(m(p, new URL('http://example.com/path/to/file'))).toBe(false)
expect(m(p, new URL('ftp://example.com/path/to/file'))).toBe(false)
expect(m(p, new URL('https://example.com:81/path/to/file'))).toBe(false)
expect(m(p, new URL('https://example.com:81/path/to/file?q=1'))).toBe(false)
})

it('should match hostname pattern with single asterisk by itself', () => {
Expand Down