How to configure anti-hotlinking for nginx website service (recommended)

How to configure anti-hotlinking for nginx website service (recommended)

1. Principle of Hotlinking

1.1 Web page preparation

Web source host (192.168.153.20) configuration

cd /usr/local/nginx/html
Transfer the preview.jpg image file to the /usr/local/nginx/html directory vim index.html
......
<img src="preview.jpg"/>
</body>
</html>

echo "192.168.153.20 www.wt.com" >> /etc/hosts
echo "192.168.153.10 www.abc.com" >> /etc/hosts

insert image description here
insert image description here

Hotlink website host (192.168.153.20) configuration

In order to distinguish it from the nginx service of the source host, the hotlink host can use the general wed service yum install -y httpd

vim /var/www/html/index.html
<html><body><h1>Hello! </h1>
<img src="http://www.wt.com/preview.jpg"/>     
</body></html>

echo "192.168.153.20 www.wt.com" >> /etc/hosts
echo "192.168.153.10 www.abc.com" >> /etc/hosts

systemctl restart httpd

insert image description here

1.2 Browser access verification

insert image description here
insert image description here

2. Configure anti-hotlinking

2.1 Modify the configuration file

vim /usr/local/nginx/conf/nginx.conf
http {
......
	server {
	......
		location ~* \.(jip|gif|swf)$ {
			valid_referers *.wt.com wt.com;
			if ( $invalid_referer ) {
				rewrite ^/ http://www.wt.com/error.png;
				#return 403;
			}
		}
	......
	}
}

~* .(jpg|gif|swf)$ : This regular expression matches case-insensitive files ending with .jpg, .gif or .swf;
valid_referers: Set trusted websites so that images can be used normally;
The following URL or domain name: The URL containing the relevant string in referer;
If statement: If the source domain name of the link is not in the list of valid_referers, and $invalid_referer is 1, the following operation is executed, that is, rewriting or returning to the 403 page.

insert image description here

Transfer the error.png image file to the /usr/local/nginx/html directory

insert image description here

2.2 Browser access verification

insert image description here

This is the end of this article about how to configure anti-hotlinking for nginx website services. For more relevant content on anti-hotlinking for nginx website services, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Complete steps for Nginx to configure anti-hotlinking
  • How to configure Nginx's anti-hotlinking
  • Nginx anti-hotlink blocks malicious User Agent requests based on UA ​​(anti-spider)
  • Introduction to the method of anti-hotlinking under Nginx server
  • Nginx image hotlink protection configuration example
  • Nginx Anti-Hotlink Configuration Method
  • 3 ways to prevent hotlinks in Nginx

<<:  Example of how to set up a multi-column equal height layout with CSS

>>:  Vue Page Stack Manager Details

Recommend

7 major elements of web page redesign Share the 7 major elements of web page redesign

Shopify Plus is the enterprise version of the e-c...

Detailed explanation of Docker's most commonly used image commands and container commands

This article lists the most commonly used image c...

In-depth understanding of the use of the infer keyword in typescript

Table of contents infer Case: Deepen your underst...

Docker deploys Mysql, .Net6, Sqlserver and other containers

Table of contents Install Docker on CentOS 8 1. U...

CSS3 creates web animation to achieve bouncing ball effect

Basic preparation For this implementation, we nee...

Docker installation and configuration steps for RabbitMQ

Table of contents Single-machine deployment Onlin...

How to use skeleton screen in vue project

Nowadays, application development is basically se...

MYSQL Operator Summary

Table of contents 1. Arithmetic operators 2. Comp...

Detailed explanation of MySQL covering index

concept If the index contains all the data that m...

Detailed example of changing Linux account password

Change personal account password If ordinary user...

Quick understanding and example application of Vuex state machine

Table of contents 1. Quick understanding of conce...

Vue storage contains a solution for Boolean values

Vue stores storage with Boolean values I encounte...

HTML+CSS realizes scrolling to the element position to display the loading animation effect

How to add a loading animation every time I scrol...

How to deploy Vue project using Docker image + nginx

1. Packaging Vue project Enter the following name...

Problems with using wangeditor rich text editing in Vue

wangEditor is a web rich text editor developed ba...