控制请求来源的HTML Meta标签 - Referrer详解

83. 控制请求来源的HTML Meta标签 - Referrer详解

在Web开发中,为了保护用户的隐私和安全,控制请求的来源信息是至关重要的。HTML中的标签提供了一种简单而有效的方式来控制请求的来源,其中包括Referrer(引荐者)相关的设置。本文将详细介绍标签中的Referrer属性,并提供代码示例演示其用法。

什么是Referrer属性?

Referrer属性用于控制HTTP请求中的Referrer信息,即请求的来源URL。通过设置Referrer属性,我们可以决定是否发送Referrer头以及如何发送Referrer头信息。

Referrer属性的使用

Referrer属性可以通过标签中的referrerpolicy属性进行设置。referrerpolicy属性有以下几个取值:

  • no-referrer:不发送Referrer头信息。
  • no-referrer-when-downgrade(默认值):对于安全请求(HTTPS),发送完整的Referrer头;对于非安全请求(HTTP),不发送Referrer头。
  • origin:只发送来源的源信息,不包含路径和查询参数。
  • origin-when-cross-origin:对于同源请求,发送完整的Referrer头;对于跨源请求,只发送来源的源信息。
  • unsafe-url:总是发送完整的Referrer头信息。

示例代码

以下是一个示例代码,演示如何在HTML中使用标签控制Referrer属性:

DOCTYPE html>
<html>
<head>
  <meta name="referrer" content="no-referrer">
  
  <meta name="referrer" content="origin">
  
  
  
head>
<body>
  
body>
html>

在上述代码中,通过设置标签的referrer属性,我们可以选择是否发送Referrer头信息,并确定发送的Referrer信息的详细程度。

注意事项

  • 不同浏览器对Referrer属性的支持程度可能会有所不同,因此在使用时需要注意兼容性问题。
  • Referrer属性只影响请求的Referrer头信息,无法阻止通过其他手段获取请求来源的方法。
  • 在使用Referrer属性时,应根据具体需求和安全考虑选择适当的设置,以确保用户隐私和系统安全。

总结:Referrer属性是HTML中标签的一项重要功能,用于控制HTTP请求的来源信息。通过设置Referrer属性,我们可以选择是否发送Referrer头以及发送的Referrer信息的详细程度,以保护用户的隐私和系统的安全。在实际应用中,合理设置Referrer属性可以根据具体需求来保护用户隐私和确保系统的安全。

每日一游 - 大富翁小游戏

控制请求来源的HTML Meta标签 - Referrer详解_第1张图片

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 = $("
"
); 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: 0h2> body> html>

你可能感兴趣的:(js,dairy,html,html,前端,referrer)