83. 控制请求来源的HTML Meta标签 - Referrer详解
在Web开发中,为了保护用户的隐私和安全,控制请求的来源信息是至关重要的。HTML中的<meta>
标签提供了一种简单而有效的方式来控制请求的来源,其中包括Referrer(引荐者)相关的设置。本文将详细介绍<meta>
标签中的Referrer属性,并提供代码示例演示其用法。
什么是Referrer属性?
Referrer属性用于控制HTTP请求中的Referrer信息,即请求的来源URL。通过设置Referrer属性,我们可以决定是否发送Referrer头以及如何发送Referrer头信息。
Referrer属性的使用
Referrer属性可以通过<meta>
标签中的referrerpolicy
属性进行设置。referrerpolicy
属性有以下几个取值:
no-referrer
:不发送Referrer头信息。no-referrer-when-downgrade
(默认值):对于安全请求(HTTPS),发送完整的Referrer头;对于非安全请求(HTTP),不发送Referrer头。origin
:只发送来源的源信息,不包含路径和查询参数。origin-when-cross-origin
:对于同源请求,发送完整的Referrer头;对于跨源请求,只发送来源的源信息。unsafe-url
:总是发送完整的Referrer头信息。
示例代码
以下是一个示例代码,演示如何在HTML中使用<meta>
标签控制Referrer属性:
<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="no-referrer">
<!-- 或者 -->
<meta name="referrer" content="origin">
<!-- 或者其他可选值 -->
<!-- 页面的其他内容 -->
</head>
<body>
<!-- 页面的主体内容 -->
</body>
</html>
在上述代码中,通过设置<meta>
标签的referrer
属性,我们可以选择是否发送Referrer头信息,并确定发送的Referrer信息的详细程度。
注意事项
- 不同浏览器对Referrer属性的支持程度可能会有所不同,因此在使用时需要注意兼容性问题。
- Referrer属性只影响请求的Referrer头信息,无法阻止通过其他手段获取请求来源的方法。
- 在使用Referrer属性时,应根据具体需求和安全考虑选择适当的设置,以确保用户隐私和系统安全。
总结:Referrer属性是HTML中<meta>
标签的一项重要功能,用于控制HTTP请求的来源信息。通过设置Referrer属性,我们可以选择是否发送Referrer头以及发送的Referrer信息的详细程度,以保护用户的隐私和系统的安全。在实际应用中,合理设置Referrer属性可以根据具体需求来保护用户隐私和确保系统的安全。
每日一游 – 大富翁小游戏
<!DOCTYPE html>
<html>
<head>
<title>大富翁小游戏</title>
<style>
body {
text-align: center;
}
#game-area {
position: relative;
width: 400px;
height: 800px;
border: 1px solid gray;
overflow: hidden;
margin: 0 auto;
}
#basket {
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: calc(50% - 50px);
background: url("../img/jbp.jpg") no-repeat;
background-size: contain;
}
.fruit {
width: 50px;
height: 50px;
border-radius: 50%;
background: url("../img/yuanbao.jpg") no-repeat;
background-size: contain;
position: absolute;
}
</style>
</head>
<body>
<h1>大富翁小游戏</h1>
<div id="game-area">
<div id="basket"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var score = 0;
var speed = 5;
var fruitInterval;
var gameArea = {
width: $("#game-area").width(),
height: $("#game-area").height()
};
function startGame() {
$("#basket").css("left", gameArea.width / 2 - 50);
$(document).keydown(function (e) {
if (e.keyCode == 37) {
moveLeft();
} else if (e.keyCode == 39) {
moveRight();
}
});
fruitInterval = setInterval(function () {
var fruit = $("<div class='fruit'></div>");
fruit.css({
left: Math.random() * (gameArea.width - 50),
top: -50
});
$("#game-area").append(fruit);
fruit.animate({ top: gameArea.height + 50 }, speed * 1000, function () {
$(this).remove();
});
}, 1000);
setInterval(checkCollision, 100);
}
function moveLeft() {
var basketPos = $("#basket").position().left;
if (basketPos > 0) {
$("#basket").css("left", basketPos - 50);
}
}
function moveRight() {
var basketPos = $("#basket").position().left;
if (basketPos < gameArea.width - 100) {
$("#basket").css("left", basketPos + 50);
}
}
function checkCollision() {
$(".fruit").each(function () {
var fruitPos = $(this).position();
var basketPos = $("#basket").position();
if (
fruitPos.top + 50 >= basketPos.top &&
fruitPos.top + 50 <= basketPos.top + 100 &&
fruitPos.left >= basketPos.left &&
fruitPos.left <= basketPos.left + 100
) {
$(this).remove();
score++;
$("#score").text("Score: " + score);
}
});
}
$(document).ready(function () {
startGame();
});
</script>
<h2 id="score">Score: 0</h2>
</body>
</html>
原文地址:https://blog.csdn.net/weixin_42560424/article/details/131419907
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_38814.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!