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

- Fixes #44660
This commit is contained in:
Steven 2024-01-08 12:57:23 -05:00 committed by GitHub
parent dcb00f676a
commit 543ca11571
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 2 deletions

View file

@ -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:
@ -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.

View file

@ -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:
@ -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.

View file

@ -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', () => {
@ -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', () => {