围绕http请求头中Referer展开的一些知识

news2024/11/20 4:55:38

1. 什么是referer？

<点击以获取跳转信息 >跳转过去记得按一下f12点击网络请求详情，再刷新一下，就可以看见referer字段：
在这里插入图片描述

当我们尝试在浏览器内部直接输入这熟悉的网址时，此时刷新后则是这样一番景象：
在这里插入图片描述
于是你就明白了referer的基本用途，它是存在于http请求头内部的用于标识访问者来源网页的标识字段。通常在普通用户的访问下是不会出现的，常常出现于各个网页之间的相互跳转。

说到这里你想到了什么，各个网页？嗯…记得这块在网页里面引用别人的东西好像还挺多的。直接把人家的图片地址写下来，就能显示，可方便了。对，这种行为就是盗图，当然只要是可以在网页上访问的网络资源，基本上都会面临这样一种情况：被盗取资源。盗取链接与防止盗取链接形成了一个经久不衰的话题。那么今天我们就通过几个小例子来体会一下盗图与防盗图的斗争吧。好好的理解一下关于referer字段的故事。

Referer请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用Referer（注：正确英语拼写应该是referrer，由于早期HTTP规范的拼写错误，为了保持向后兼容就一直延续下来）请求头识别访问来源，可能会以此统计分析、日志记录以及缓存优化等。
真有人为了这事情发博客吐槽…哈哈 详细历史见吐槽内容

2. Referrer-policy

言归正传，学习！显然，注意刚刚访问百度的同学可以细心的发现referrer-policy这个引用者策略，其规定了referer的具体使用规则。不同的设置如下给出：
在这里插入图片描述

  • no-referrer : 整个referee首部会被移除，访问来源信息不随着请求一起发送。
  • no-referrer-when-downgrade : 在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS)，但是在降级的情况下不会被发送 (HTTPS->HTTP).
  • origin: 在任何情况下，仅发送文件的源作为引用地址。例如 https://example.com/page.html 会将 https://example.com/ 作为引用地址。
  • origin-when-cross-origin: 对于同源的请求，会发送完整的URL作为引用地址，但是对于非同源请求仅发送文件的源。
  • same-origin: 对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息。
  • strict-origin： 在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)。
    - strict-origin-when-cross-origin： 对于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此首部 (HTTPS->HTTP)。
  • unsafe-url： 无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址。（最不安全了）

3.设置referrer

可以在HTML里面设置meta标签

<meta name="referrer" content="origin">

也可以用<a>、<area>、<img>、<iframe>、<script> 或者<link> 元素上的 referrerpolicy 属性为其设置独立的请求策略。

比如：

<script src='/javascripts/test.js' referrerpolicy="no-referrer"></script>

注意，如果不对页面进行处理的话，默认的referer-policy的数值是 strict-origin-when-cross-origin

4.绕过防盗链

前面我们说过防盗链的工作原理，其就是通过Referer或者签名，网站可以检测目标网页访问的来源网页，如果是资源文件，则可以追踪到显示它的网页地址 一旦检测到来源不是本站，即进行阻止或者返回指定的页面。

那么要绕过它就至少的满足下面的三个条件之一：

  1. 本网站。
  2. 无referer信息的情况。（服务器认为是从浏览器直接访问的图片URL，所以这种情况下能正常访问）
  3. 授权的网址。

显然，方法1、3均无法实现。留给我们的方法就只有想办法去除自己在访问时的referer字段了。

4.1 利用https降级访问http资源网站

当我们的目标被盗网站的策略采用默认策略时，我们可以利用访问主动降级的方式将目标图片盗链下来。也就是说我们可以在https的网页中用http请求另一个https网站的资源。此时可以不发送我们的referer字段，达到绕过防盗链的效果。(由于浏览器的升级，现在这种操作已经被禁止了。)虽然如此，我们还是尝试这复现一下这一操作。

示例环境：centos7 安装nodejs环境

用nodejs同时模拟出”盗图人“和“拥图人”。我们使用古老的浏览器尝试访问网页见证这一古老的偷图方法。

1.生成自签名证书

如何在本地为本地的web服务创建自签名成了我们要解决的第一个问题。按照以下步骤创建对应的证书以及签名。在此之前应当创建对应的文件夹：

[root@blackstone ceshi]# mkdir demo01
[root@blackstone ceshi]# mkdir -p ./demo01/server/keys
[root@blackstone ceshi]# mkdir -p ./demo01/server/src
[root@blackstone ceshi]# mkdir -p ./demo01/client/src
[root@blackstone ceshi]# mkdir -p ./demo01/client/keys
[root@blackstone ceshi]# mkdir -p ./demo01/ca
[root@blackstone ceshi]# tree demo01
demo01
├── ca
├── client
│   ├── keys
│   └── src
└── server
    ├── keys
    └── src

好，接下来到这个demo01目录下，进行证书的构造

#1.生成私钥
// 生成服务器端私钥   
openssl genrsa -out server/keys/server.key 1024   
// 生成客户端私钥  
openssl genrsa -out client/keys/client.key 1024

#2.生成公钥
openssl rsa -in server/keys/server.key -pubout -out server/keys/server.pem
openssl rsa -in client/keys/client.key -pubout -out client/keys/client.pem

#3.CA证书自签名
#3.1 创建CA私钥
openssl genrsa -out ca/ca.key 1024

#3.2 生成CA的CSR文件与crt
#生成csr
openssl req -new -key ca/ca.key -out ca/ca.csr
#生成crt
openssl x509 -req -in ca/ca.csr -signkey ca/ca.key -out ca/ca.crt

#3.3 为server发放证书
#生成csr文件
openssl req -new -key server/keys/server.key -out server/keys/server.csr

#签名过程需要CA的证书和私钥参与， 最终颁发一个带有CA签名的证书
openssl x509 -req -CA ca/ca.crt -CAkey ca/ca.key -CAcreateserial -in server/keys/server.csr -out server/keys/server.crt

#3.4 为client发放证书
#生成CSR文件
openssl req -new -key client/keys/client.key -out client/keys/client.csr
#签名过程需要CA的证书和私钥参与， 最终颁发一个带有CA签名的证书
openssl x509 -req -CA ca/ca.crt -CAkey ca/ca.key -CAcreateserial -in client/keys/client.csr -out client/keys/client.crt

关于CA证书：为了得到签名证书，服务器端需要通过自己的私钥生成CSR(Certificate Signing Request，证书签名请求)文件。CA机构通过这个文件颁发属于该服务器端的签名证书，只要通过CA机构就能验证证书是否合法。
上面用是自签名证书来构建安全网络的。所谓自签名证书，就是自己扮演CA机构，给自己得服务器端颁发签名证书。其过程包括了生成CA私钥、生成CSR文件、通过私钥自签名生成证书

经过上面一通创建之后，我们使用tree确认生成无误
在这里插入图片描述

2. 配置server端

server目录下创建server.js用于建立服务

let https = require("https");
let fs = require("fs");
let url = require("url");
let path = require("path");
// 白名单
const whiteList = ["192.168.2.169:80"];

const options = {
  key: fs.readFileSync("./keys/server.key"),
  cert: fs.readFileSync("./keys/server.crt"),
};


https
  .createServer(options, function (req, res) {

    let refer = req.headers["referer"] || req.headers["refer"];
    console.log('refer----', refer, req.url);
    res.setHeader("Access-Control-Allow-Origin", "*");
    if (refer) {
      let referHostName = url.parse(refer, true).host;
      let currentHostName = url.parse(req.url, true).host;
      console.log(referHostName, currentHostName, '--==')
      // 当referer不为空, 但host未能命中目标网站且不在白名单内时, 返回错误的图
      if (
        referHostName != currentHostName &&
        whiteList.indexOf(referHostName) == -1
      ) {
        res.setHeader("Content-Type", "image/jpeg");
        fs.createReadStream(path.join(__dirname, "/src/img/403.jpg")).pipe(res);
        return;
      }
    }
    // 当referer为空时, 返回正确的图
    res.setHeader("Content-Type", "image/jpeg");
    fs.createReadStream(path.join(__dirname, "/src/img/1.jpg")).pipe(res);

  }).listen(9999);

监听的是9999端口，用于模拟被偷服务器，在其对应的src目录下放上相应的资源
在这里插入图片描述

3.配置client端

服务端的nodejs文件client.js

let https = require("https");
let fs = require("fs");
let url = require("url");
let path = require("path");


var options = {
  hostname: "localhost",
  port: 8000,
  path: "/",
  method: "GET",
  rejectUnauthorized: false,
  key: fs.readFileSync("./keys/client.key"),
  cert: fs.readFileSync("./keys/client.crt"),
  ca: [fs.readFileSync("../ca/ca.crt")],
};

// 创建服务器
https.createServer(options, function (req, res) {

  let staticPath = path.join(__dirname, "src");
  let pathObj = url.parse(req.url, true);

  if (pathObj.pathname === "/") {
    pathObj.pathname += "index.html";
  }
  //  读取静态目录里面的文件，然后发送出去
  let filePath = path.join(staticPath, pathObj.pathname);
  fs.readFile(filePath, "binary", function (err, content) {
    if (err) {
      res.writeHead(404, "Not Found");
      res.end("<h1>404 Not Found</h1>");
    } else {
      res.writeHead(200, "OK");
      res.write(content, "binary");
      res.end();
    }
  });

}).listen(8080);

配置client首页文件

[root@blackstone client]# cat ./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>client</title>
</head>
<body>
    <h1>client页面</h1>
    <div id="container">
        <!-- <img src="https://192.168.2.169:9999/" referrerpolicy="no-referrer"> -->
        <img src="http://192.168.2.169:9999">
    </div>
    <!-- <script src="js/fetchImg.js"></script> -->
</body>
</html>

4.在浏览器上测试盗链情况

依次分别运行server和client

[root@blackstone server]# node server.js
[root@blackstone client]# node client.js

使用火狐浏览器测试访问：
在这里插入图片描述

可以看到，尽管我们尝试进行盗链，但是因为浏览器的安全限定，无法显示偷出来的图片，我们掏出超低版本的浏览器试试。。。经测试暂时无果，这个古老的方案大抵是被禁用掉了。
点击此处获取老版本浏览器
在这里插入图片描述

4.2 使用meta

<meta name="referrer" content="no-referrer" />

在这里插入图片描述
可以清晰的看到，设置后发出的https请求已经没了referer字段，正常请求到了图片

4.3 设置referrerpolicy=“no-referrer”

在标签旁设置上这个属性就行

<img src="https://192.168.2.169:9999/" referrerpolicy="no-referrer">

4.4 利用iframe伪造请求referer

function showImg(src, wrapper ) {
    let url = new URL(src);
    let frameid = 'frameimg' + Math.random();
    window.img = `<img id="tmpImg" width=400 src="${url}" alt="图片加载失败，请稍后再试"/> `;

    // 构造一个iframe
    iframe = document.createElement('iframe')
    iframe.id = frameid
    iframe.src = "javascript:parent.img;" // 通过内联的javascript，设置iframe的src
    // 校正iframe的尺寸，完整展示图片
    iframe.onload = function () {
        var img = iframe.contentDocument.getElementById("tmpImg")
        if (img) {
            iframe.height = img.height + 'px'
            iframe.width = img.width + 'px'
        }
    }
    iframe.width = 10
    iframe.height = 10
    iframe.scrolling = "no"
    iframe.frameBorder = "0"
    wrapper.appendChild(iframe)
}

showImg('https://192.168.2.169:9999', document.querySelector('#container'))

在这里插入图片描述

4.5 客户端在请求时修改header头部

4.5.1 利用XMLHttpRequest

XMLHttpRequest中setRequestHeader方法，用于向请求头添加或修改字段。我们能不能手动将修改 referer字段呢？
演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>client</title>
</head>
<body>
    <h1>client页面</h1>
    <div id="container">
    </div>
</body>
<script src="./03.js"></script>
</html>

// 通过ajax下载图片
function loadImage(uri) {
    return new Promise(resolve => {
        let xhr = new XMLHttpRequest();
        xhr.responseType = "blob";
        xhr.onload = function() {
            resolve(xhr.response);
        };

        xhr.open("GET", uri, true);
        // 通过setRequestHeader设置header不会生效
        // 会提示 Refused to set unsafe header "Referer"
        xhr.setRequestHeader("Referer", ""); 
        xhr.send();
    });
}
  

// 将下载下来的二进制大对象数据转换成base64，然后展示在页面上
function handleBlob(blob) {
    let reader = new FileReader();
    reader.onload = function(evt) {
        let img = document.createElement('img');
        img.src = evt.target.result;
        document.getElementById('container').appendChild(img)
    };
    reader.readAsDataURL(blob);
}

const imgSrc = "https://tiebapic.baidu.com/forum/w%3D580%3B/sign=f88eb0f2cf82b9013dadc33b43b6ab77/562c11dfa9ec8a135455cc35b203918fa1ecc09c.jpg";

loadImage(imgSrc).then(blob => {
    handleBlob(blob);
});

在这里插入图片描述
可以看见setRequestHeader设置referer响应头是无效的，这是由于浏览器为了安全起见，无法手动设置部分保留字段，不幸的是Referer恰好就是保留字段之一，详情列表参考Forbidden header name。

可见使用xmlhttprequest提供的方法用AJAX同源请求无法完成这一操作。使用fetch可以解决这一问题。

4.5.2 利用fetch

// 将下载下来的二进制大对象数据转换成base64，然后展示在页面上
function handleBlob(blob) {
    let reader = new FileReader();
    reader.onload = function(evt) {
        let img = document.createElement('img');
        img.src = evt.target.result;
        document.getElementById('container').appendChild(img)
    };
    reader.readAsDataURL(blob);
}

const imgSrc = "https://192.168.2.169:9999";


function fetchImage(url) {
    return fetch(url, {
        headers: {
            // "Referer": "", // 这里设置无效
        },
        method: "GET",  
        referrer: "", // 将referer置空
        // referrerPolicy: 'no-referrer', 
    }).then(response => response.blob());
}

fetchImage(imgSrc).then(blob => {
    handleBlob(blob);
});

可以看到这里的请求明显没了referer字段

在这里插入图片描述

4.6 服务器做图片中转

更加"刑"的方法就是直接搭建一个中转服务器，代理盗链者对目标资源进行正常请求，并将获取到的资源进行转发。

5.应对策略

当然，在上面罗列了那么多的绕过防盗链手法中，大部分的方法就是人为或者自动的取消掉自己的referer头部伪装成普通用户的正常访问去获取资源。要解决这个问题可以从以下几个方面去开展：

1.动态文件名，定期更换文件名称或者路径

2.判定引用地址，一般是判断浏览器请求时HTTP头的Referer字段的值

3.使用登录验证，cookie

4.图片加水印

5.可以购买一些安全服务对服务器的请求进行过滤

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/147570.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++类和对象的基本概念

C++类和对象的基本概念

目录 1.c和c中struct的区别 2.类的封装 3.类的访问权限 1.c和c中struct的区别 c语言中结构体中不能存放函数,也就是数据(属性)和行为(方 法)是分离的 c中结构体中是可以存放函数的,也就是数据(属性)和行为 (方法)是封装在一起的 #define _CRT_SECURE_NO_WARNINGS #include …
阅读更多...
基于Python tensorflow机器学习的人脸识别登陆系统源码、人脸注册系统源码

基于Python tensorflow机器学习的人脸识别登陆系统源码、人脸注册系统源码

face_login 代码下载地址&#xff1a;基于Python tensorflow机器学习的人脸识别登陆系统源码、人脸注册系统源码 介绍 本项目基于tensorflow机器学习&#xff0c;实现web端人脸识别登陆&#xff0c;人脸注册。 提供手机端页面(face_login_app)和网页端页面(vue_element-adm…
阅读更多...
JUC并发编程学习笔记（六）线程池及分支合并框架

JUC并发编程学习笔记（六）线程池及分支合并框架

10 ThreadPool 线程池&#xff08;重点&#xff09; 10.1 线程池简介 回顾以前的连接池概念 连接池是创建和管理一个连接的缓冲池的技术&#xff0c;这些连接准备好被任何需要它们的线程使用 线程池&#xff08;英语&#xff1a;thread pool&#xff09;&#xff1a;一种线程…
阅读更多...
实时数仓，为什么不可代替？

实时数仓，为什么不可代替？

什么是实时数据仓库&#xff1f;它有哪些不可替代之处&#xff1f; 大数据时代中&#xff0c;数据仓库解决了商业智能分析过程中的数据管理问题&#xff0c;但是存在烟囱式、冗余高的弊端 随着商业智能的兴起和数据时代的到来&#xff0c;越来越多的企业开始汇总、整合和分析自…
阅读更多...
ArcGIS基础实验操作100例--实验62点、线、面状符号

ArcGIS基础实验操作100例--实验62点、线、面状符号

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验62 点、线、面状符号 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;1&…
阅读更多...
C/C++中二级指针传递参数【个人遇到内存值发生改变现象的记录及相关修正方法】

C/C++中二级指针传递参数【个人遇到内存值发生改变现象的记录及相关修正方法】

目录 0、前言 1、二级指针传参奇怪现象 2、分析 3、解决方法 0、前言 在c/c中&#xff0c;时常会使用到主调函数通过参数去获取被调函数中的数值情况。针对这种情况&#xff0c;我前面也写过C/C主调函数从被调函数中获取&#xff08;各种类型&#xff09;数据内容方式的梳理…
阅读更多...
【ONE·R || 两次作业（一）：R基础数据处理】

【ONE·R || 两次作业（一）：R基础数据处理】

总言 两次作业汇报&#xff1a;其一。    文章目录总言1、作业一&#xff1a;1.1 、任务一&#xff1a;各项数据建立1.2 、任务二&#xff1a;去除缺失值1.3 、任务三&#xff1a;返回性别为女生&#xff0c;年龄<20的学生及成绩1.4、 任务四&#xff1a;统计性别为女生&a…
阅读更多...
【Python百日进阶-数据分析】Day149 - plotly直方图:go.histogram()

【Python百日进阶-数据分析】Day149 - plotly直方图:go.histogram()

文章目录4.2 利用 go.Histogram 的直方图4.2.1 基本直方图4.2.2 归一化直方图4.2.3 水平直方图4.2.4 叠加直方图4.2.5 堆叠直方图4.2.6 风格直方图4.2.7 直方图条形文本4.2.8 累积直方图4.2.9 指定聚合函数4.2.10 自定义分箱4.2.11 在直方图之间共享 bin4.2.12 按类别顺序排序直…
阅读更多...
深度学习（一）-环境安装

深度学习（一）-环境安装

前言&#xff1a; 最近电脑重装了下系统&#xff0c;然后所有环境啥的都得重新配置一遍&#xff0c;刚好趁着这个时间记录下整个环境的配置过程 注意&#xff1a;本文记录的仅为window系统的配置过程! 一、Anaconda安装及相关配置 Anaconda下载地址&#xff0c;根据需要选择需…
阅读更多...
TypeScript 中 Class incorrectly implements interface 错误

TypeScript 中 Class incorrectly implements interface 错误

当一个类在没有指定接口上定义的所有属性和方法的情况下实现接口时&#xff0c;会发生错误“Class incorrectly implements interface”。 要解决该错误&#xff0c;需要确保定义并键入接口的所有必需属性和方法。 下面是产生上述错误的示例代码 interface Employee {id: num…
阅读更多...
Linux学习记录——유 gcc/g++基础知识

Linux学习记录——유 gcc/g++基础知识

文章目录一、程序翻译二、gcc使用1、-o2、预处理-E3、编译-S4、汇编-c5、链接三、库四、库的部分实际操作五、Linux项目自动化构建工具 make/Makefile1、规则一、程序翻译 C语言中&#xff0c;写出代码后&#xff0c;编译器会经过四个阶段才会生成可执行文件。 预处理&#x…
阅读更多...
计算数组中元素的加权平均值 numpy.average()

计算数组中元素的加权平均值 numpy.average()

【小白从小学Python、C、Java】【计算机等级考试500强双证书】【Python-数据分析】计算数组中元素的加权平均值numpy.average()[太阳]选择题对于以下python代码最后输出的结果是?import numpy as npa np.array([1, 2, 3, 4])print("【显示】a")print(a)print("…
阅读更多...
如何进行Java 单元测试

如何进行Java 单元测试

什么是单元测试 维基百科中是这样描述的&#xff1a;在计算机编程中&#xff0c;单元测试又称为模块测试&#xff0c;是针对程序模块来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中&#xff0c;一个单元就是单个程序、函数、过程等&#xff1b;…
阅读更多...
架构师课程笔记day04——Nginx

架构师课程笔记day04——Nginx

大纲 1.从单体到集群过渡 2.Nginx 2.1什么是nginx 2.2常见服务器 2.3nginx在架构中所处位置 2.4使用率&#xff0c;性能&#xff0c;市场占有率等信息 2.5正反向代理啥意思 正向代理 反向代理 示例 2.6安装步骤 Nginx安装步骤 常用命令等 2.7请求链路 2.8进程模型 通用模型 …
阅读更多...
JS面向对象基础（原型链、构造函数、new关键字、寄生组合继承、对象元编程）

JS面向对象基础（原型链、构造函数、new关键字、寄生组合继承、对象元编程）

这篇文章将简单介绍面向对象的基本概念&#xff0c;以及JS语言是如何支持面向对象这种编程范式的&#xff0c;最后还会讲解一些对象元编程的基础知识。通过阅读这篇文章&#xff0c;你可以了解JS中的原型链机制&#xff0c;new和构造函数的原理、寄生组合继承的实现以及对象元编…
阅读更多...
李群李代数学习笔记

李群李代数学习笔记

前言 因为论文学习的需要&#xff0c;入门了一下李群和李代数&#xff0c;觉得B站的这个视频讲得不错&#xff1a;视频地址为机器人学——李群、李代数快速入门&#xff0c;这里记录一下。 前言引入&#xff1a;一些常见的例子S1S^1S1&#xff1a;单位复数SO(2)SO(2)SO(2)&…
阅读更多...
ArcGIS基础实验操作100例--实验64创建统计图符号

ArcGIS基础实验操作100例--实验64创建统计图符号

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验64 创建统计图符号 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;1&am…
阅读更多...
24考研数学复习方法、全年规划

24考研数学复习方法、全年规划

文章目录各个阶段推荐的辅导书和习题1.教材基础&#xff1a;22年9月-23年3月复习“三基”2.强化阶段&#xff1a;23年4月-23年8月3.真题阶段&#xff1a;23年9月-10月4.冲刺模拟阶段&#xff1a;23年11-12月各个阶段推荐的辅导书和习题 阶段(时间)辅导教材习题册1.基础阶段(1-…
阅读更多...
Vue初识系列【2】内容升级版

Vue初识系列【2】内容升级版

文章目录一 模板语法1.1 文本1.2 原始THTML1.3 属性Attribute1.4 JavaScript表达式的使用二 条件渲染2.1 v−if&v−elsev-if\&v-elsev−if&v−else2.2 v−showv-showv−show2.3 v−ifv-ifv−if与v−showv-showv−show的区别三 列表渲染3.1 v−forv-forv−for列表渲…
阅读更多...
OpenSceneGraph几何基础教程【OSG】

OpenSceneGraph几何基础教程【OSG】

默认情况下&#xff0c;OSG 使用顶点数组法和显示列表法来渲染几何体。 但是&#xff0c;渲染策略可能会发生变化&#xff0c;具体取决于几何数据的呈现方式。 在本文中&#xff0c;我们将了解在 OSG 中处理几何体的基本技术。 OpenSceneGraph 后端的 OpenGL 使用几何图元&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023