TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发

TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发

目录

TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发

一、TDesign Vue Next Starter中后台项目模板

1.1、项目简介

1.2、使用文档

二、TDesign Vue Next Starter中后台生产环境配置与部署

2.1、vite.config.ts项目配置

三、如何部署生产模式才能渲染出页面

3.1、base基路径

3.2、vite5打包基于vue3的tdesign-vue-next项目的最基础原理

3.2.1、打包前

3.2.2、打包后

四、页面渲染与CORS跨源资源共享

4.1、CORS跨源资源共享

4.2、附常见：《HTTP header配置（跨域请求）》

五、页面渲染与CSP内容安全策略

5.1、CORS允许了但请求的具体资源是否安全可以用CSP策略来解决

5.2、配置CPS后端响应头代码

六、更多的服务后端网络安全开发

6.1、来源策略Referrer-Policy

6.2、不被浏览器发送Referer的情形：

6.3、前端主动在html文件中声明需要发送的发送Referer

原创不易，析构实现更不易，需要的就联系我购买

喜欢的，就收藏并点个赞，鼓励我继续技术的原创写作及经验分享：

一、TDesign Vue Next Starter中后台项目模板

1.1、项目简介

        TDesign Vue Next Starter 是一个基于腾讯官方TDesign，使用 Vue3、Vite、Pinia、TypeScript 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。

        特性：

  • 内置多种常用的中后台页面

  • 完善的目录结构

  • 完善的代码规范配置

  • 支持暗黑模式

  • 自定义主题颜色

  • 多种空间布局

  • 内置 Mock 数据方案

  • 支持TS

        TDesign 页面模板:
https://tdesign.tencent.com/starter/

1.2、使用文档

TDesign Starter 页面模板icon-default.png?t=N7T8https://tdesign.tencent.com/starter/docs/vue-next/get-startedGitHub - Tencent/tdesign-vue-next-starter: A starter-kit for TDesign Vue Next UI componentsA starter-kit for TDesign Vue Next UI components. Contribute to Tencent/tdesign-vue-next-starter development by creating an account on GitHub.icon-default.png?t=N7T8https://github.com/Tencent/tdesign-vue-next-starter

二、TDesign Vue Next Starter中后台生产环境配置与部署

2.1、vite.config.ts项目配置

        vite.config.ts配置相对完整规范，可做到开箱即用，其中vite的mode，即4种模式：

        vite默认在项目的根路径，让用户创建和配置“模式文件”。它们分别是：

        .env.test.  env.develepment、.env、env.site，含义为：测试模式、开发模式、生产模式、自定义模式。

       每种模式，都可以在项目的“配置文件”package.json中创建脚本编译和运行条目：

三、如何部署生产模式才能渲染出页面

3.1、base基路径

       基路径base，就是vite“用户配置接口”中，同时适用于“开发环境”和“生产环境”的站点部署的url的path的根路径；URL 由不同的部分组成：

        基路径base，就是你的站点的入口文件(默认为index.html)部署到生产环境的path to file的“逻辑请求”对应的“物理路径”，即告知vite打包时，应当将项目打包到怎样的站点路径下：

        本案，基路径base配置为：

        # 打包路径 根据项目不同按需配置：

        VITE_BASE_URL = /nosessionhtmls/vue-ssr/my-tnext-starter/dist/

       这一点，对于前端初学者，是一个坑，要特别注意！否则，你一开始，发出的请求就错了！！！

       举例：

站点入口：https://www.cpuofbs.com/nosessionhtmls/vue-ssr/my-tnext-starter/dist/index.html
基路径base：/nosessionhtmls/vue-ssr/my-tnext-starter/dist/

        进入站点后，vue3的Router路由器便生效了！路由驱动了站点内的菜单、按钮、链接等组件的事件及其行为，比如跳转等，譬如result/404、dashboard/base等请求的路由拦截、路由连接等。

3.2、vite5打包基于vue3的tdesign-vue-next项目的最基础原理

       如果你要学习该原理，最佳实践就是，对比打包前、打包后的结果：

3.2.1、打包前

       入口文件index.html :

3.2.2、打包后

       入口文件index.html :

        可见，如果上述基路径base设置不当，首页渲染可能出现意想不到的结果，甚至视觉上看不到结果。

四、页面渲染与CORS跨源资源共享

4.1、CORS跨源资源共享

        我们可以在生产环境的“模式配置”文件.env中，存在API的URL与你的站点的“源”是不一样的：

       请求的API的“源”和你的站点的“源”不一样，就设计到“CORS”跨源资源共享问题。

       当请求到达你的后端服务时，你的后端代码应当设置响应头，告知浏览器代理，请求的源允许在你的站点中执行其脚本：

DoCheckCorsOrigin(const Url: string; Request: THttpRequest; aReply: THttpReply; var Handled: Boolean);

       Access-Control-Allow-Origin: https://www.cpuofbs.com

       譬如，站点内跨源请求：

       Request URL: https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/get-menu-list-i18n?_t=1708676439865

       需要，服务后端代码配置响应头：

        否则。浏览器的调试工具控制台，将向你发出拒绝请求的信息并告知你具体的原因：

        Access to Axios Request at ''https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/get-menu-list-i18n?_t=1708671724342' from origin 'https://www.cpuofbs.com/'
has been blocked by CORS policy: No 'Access-Control-Allow-origin'header is present on the requested resource.



4.2、附常见：《HTTP header配置（跨域请求）》

HTTP header配置（跨域请求）_内容分发网络 CDN_用户指南_域名配置_高级配置HTTP header即HTTP消息头，是指在超文本传输协议（Hypertext Transfer Protocol，HTTP）的请求和响应消息中的消息头部分，定义了HTTP传输过程中的具体参数。跨域资源共享CORS(Cross-origin resource sharing)简称跨域访问，当A网站去访问B网站的资源时，就会发出跨域请求。icon-default.png?t=N7T8https://support.huaweicloud.com/usermanual-cdn/cdn_01_0021.html

五、页面渲染与CSP内容安全策略

5.1、CORS允许了但请求的具体资源是否安全可以用CSP策略来解决

        如果你的后端服务对发起请求的原始资源（比如上例，是TDesign Vue Next Startericon-default.png?t=N7T8https://www.cpuofbs.com/nosessionhtmls/vue-ssr/my-tnext-starter/dist/index.html）代码指定了CORS策略（不配置该策略的站点跨域时是很危险的，意味着恶意站点代码随时可能侵入），那么其初始化器Initiator（详见浏览器开发工具请求资源的Initiator页签）的后续引用的资源，都必须要遵循该策略：

       如果，你的代码的CSP策略中，未对上述CORS的资源请求设置CSP的连接源标头值（connect-src），则浏览器会进行拦截并提示CSP的阻塞信息及阻塞原因：

index-C5WRK1nU.js:2570 Refused to connect to 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/get-menu-list-i18n?_t=1708671724342' because it violates the following Content Security Policy directive: "connect-src https://www.cpuofbs.com https://cpuofbs.com https://www.cpuofbs.com:8080 https://cpuofbs.com:8080 wss://www.cpuofbs.com".

index-C5WRK1nU.js:2570 Refused to connect to 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/get-menu-list-i18n?_t=1708671724342' because it violates the following Content Security Policy directive: "connect-src https://www.cpuofbs.com https://cpuofbs.com https://www.cpuofbs.com:8080 https://cpuofbs.com:8080 wss://www.cpuofbs.com". 

       从而你得到的是无头响应：

        那么，如何解决呢？如下：

5.2、配置CPS后端响应头代码

       硬编码响应头：

Content-Security-Policy: connect-src https://你的站点允许的源1 [空格] https://你的站点允许的源2 [空格]

六、更多的服务后端网络安全开发

6.1、来源策略Referrer-Policy

       Referrer-Policy主要用来对当前源下的所有请求的Request URL来源进行细分监管，后端服务代码设置该响应头，告知浏览器代理，分别应当如何处理。

       它与请求头Referer并无直接联系。并非所有的请求都会被浏览器附带Referer来源头发送到服务端，但，跨源的请求，通常浏览器会发送Referer标头，并可能同时发送Origin请求头。

       对请求的任何http(s)资源，响应头Referrer-Policy，可以有以下几种方案：

#告诉浏览器代理，发送Referer请求头的规则如下————
# 移除Referer请求头,后续的请求中，访问来源信息不再随请求一起发送到服务：
Referrer-Policy: no-referrer
# 目标安全级别降级时（比如初始化器链路从https安全请求 → 转到http不安全请求、从https转到 → file协议或data:URI）不发送Referer标头：
Referrer-Policy: no-referrer-when-downgrade
# 在Referer请求标头中，只发送“源”（尾部带/）：
Referrer-Policy: origin
# 跨源请求的资源仅发送其“源”：
Referrer-Policy: origin-when-cross-origin
# 同源请求才发送Referer请求头的地址，但跨源请求不发送Referer请求头
Referrer-Policy: same-origin
# 同等安全级别时，才发送“源”作为引用地址 (https → 转到https ，或http → 转到http)，但降级时不发送：
Referrer-Policy: strict-origin
# 同源请求，发送请求资源的完整URL；同安全级别的跨源请求，仅发送“源”；目标安全级别为降级时不发送 Referer请求头：
Referrer-Policy: strict-origin-when-cross-origin
# 无论是否同源，均发送，且发送不含searchParams参数的URL的Referer请求头：
Referrer-Policy: unsafe-url

6.2、不被浏览器发送Referer的情形：

       ◆请求协议为 "file://" 或者 "data" URI；
       ◆请求源为不安全协议http，Referer是https。

6.3、前端主动在html文件中声明需要发送的发送Referer

6.3.1、在head头部的<meta>元素进行申明

       申明的策略参见5.1中的方案；用属性字段name及其数值属性字段content标识。

       例如：

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

<link rel="stylesheet;origin" crossorigin href="/nosessionhtmls/vue-ssr/my-tnext-starter/dist/assets/index-UVIbHW0Y.css">

6.3.2、在body的元素中申明

<a href="http://example.com" referrerpolicy="origin">在body的元素中申明Referer</a>
<a href="http://example.com" rel="noreferrer">在body的a、area或link元素中将rel属性设置为noreferrer</a>

6.3.3、在css中申明

6.3.3.1、外部 CSS 样式表使用默认策略 (no-referrer-when-downgrade)，除非 CSS 样式表的响应消息通过 Referrer-Policy 首部覆盖该策略；
6.3.3.2、 <style> 元素或元素的style属性,遵从文档的referrer策略。

————————————————

原创不易，析构实现更不易，需要的就联系我购买

喜欢的，就收藏并点个赞，鼓励我继续技术的原创写作及经验分享：

部署vue element-ui admin报错(vue2)

centOS部署vscode_pulledup的博客-CSDN博客

————————————————

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

​​​​​​​Sora：OpenAI的革命性AI视频模型与其对未来影像创作的影响

​​​​​​​Sora：OpenAI的革命性AI视频模型与其对未来影像创作的影响

随着深度学习技术和计算能力的进步&#xff0c;人工智能不仅在图像识别、自然语言处理等领域取得了卓越成就&#xff0c;同时也在不断突破视频处理和生成的边界。在这一背景下&#xff0c;OpenAI推出了Sora——一种新型的AI视频模型&#xff0c;标志着AI在视频内容创作领域的又…
阅读更多...
后端程序员入门react笔记（四）-综合运用，写一个小demo

后端程序员入门react笔记（四）-综合运用，写一个小demo

样式模块化 有时候我们会遇到这样的问题&#xff0c;有两个css对一个class声明了样式&#xff0c;这样的话后引入的css会覆盖前面的css样式&#xff0c;导致样式冲突&#xff0c;那么我们怎么解决这种问题呢&#xff0c;我们可以使用样式的模块化&#xff0c;我们起名一个inde…
阅读更多...
Shell好用的工具： cut

Shell好用的工具： cut

目标 使用cut可以切割提取指定列\字符\字节的数据 介绍 cut 译为“剪切, 切割” , 是一个强大文本处理工具&#xff0c;它可以将文本按列进行划分的文本处理。cut命令逐行读入文本&#xff0c;然后按列划分字段并进行提取、输出等操作。 语法 cut [options] filename opti…
阅读更多...
Vue(学习笔记)

Vue(学习笔记)

什么是Vue Vue是一套构建用户界面的渐进式框架 构建用户界面&#xff1a; 基于数据渲染出用户可以看到的界面 渐进式&#xff1a; 所谓渐进式就是循序渐进&#xff0c;不一定非得把Vue中的所有API都学完才能开发Vue&#xff0c;可以学一点开发一点 创建Vue实例 比如就上面…
阅读更多...
java面向对象上：类的结构之一

java面向对象上：类的结构之一

目录 1.相同点 2.不同点 2.1 在类中声明的位置的不同 2.2 关于权限修饰符的不同 2.3 默认初始化值的情况&#xff1a; 2.4 在内存中加载的位置 补充&#xff1a;回顾变量的分类&#xff1a; 方式一&#xff1a;按照数据类型&#xff1a; 方式二&#xff1a;按照在类中…
阅读更多...
01_02_mysql06_(视图-存储过程-函数（变量、流程控制与游标）-触发器)

01_02_mysql06_(视图-存储过程-函数（变量、流程控制与游标）-触发器)

视图 使用 视图一方面可以帮我们使用表的一部分而不是所有的表&#xff0c;另一方面也可以针对不同的用户制定不同的查询视图。比如&#xff0c;针对一个公司的销售人员&#xff0c;我们只想给他看部分数据&#xff0c;而某些特殊的数据&#xff0c;比如采购的价格&#xff0…
阅读更多...
第九节HarmonyOS 常用基础组件24-Navigation

第九节HarmonyOS 常用基础组件24-Navigation

1、描述 Navigation组件一般作为Page页面的根容器&#xff0c;通过属性设置来展示的标题栏、工具栏、导航栏等。 2、子组件 可以包含子组件&#xff0c;推荐与NavRouter组件搭配使用。 3、接口 Navigation() 4、属性 名称 参数类型 描述 title string|NavigationComm…
阅读更多...
alibabacloud学习笔记06（小滴课堂）

alibabacloud学习笔记06（小滴课堂）

讲Sentinel流量控制详细操作 基于并发线程进行限流配置实操 在浏览器打开快速刷新会报错 基于并发线程进行限流配置实操 讲解 微服务高可用利器Sentinel熔断降级规则 讲解服务调用常见的熔断状态和恢复 讲解服务调用熔断例子 我们写一个带异常的接口&#xff1a;
阅读更多...
Win32 获取EXE/DLL文件版本信息

Win32 获取EXE/DLL文件版本信息

CFileVersion.h #pragma once#include <windows.h> #include <string> #include <tchar.h>#ifdef _UNICODE using _tstring std::wstring; #else using _tstring std::string; #endif// 版本号辅助类 class CVersionNumber { public:// 无参构造CVersionN…
阅读更多...
【Pytorch深度学习开发实践学习】B站刘二大人课程笔记整理lecture06 Logistic回归

【Pytorch深度学习开发实践学习】B站刘二大人课程笔记整理lecture06 Logistic回归

【Pytorch深度学习开发实践学习】B站刘二大人课程笔记整理lecture06 Logistic回归 课程网址 Pytorch深度学习实践 部分课件内容&#xff1a; import torchx_data torch.tensor([[1.0],[2.0],[3.0]]) y_data torch.tensor([[0.0],[0.0],[1.0]])class LogisticRegressionModel(…
阅读更多...
PYTHON-使用正则表达式进行模式匹配

PYTHON-使用正则表达式进行模式匹配

目录 Python 正则表达式Finding Patterns of Text Without Regular ExpressionsFinding Patterns of Text with Regular ExpressionsCreating Regex ObjectsMatching Regex ObjectsReview of Regular Expression MatchingMore Pattern Matching with Regular ExpressionsGroupi…
阅读更多...
【数据结构】排序（2）

【数据结构】排序（2）

目录 一、快速排序&#xff1a; 1、hoare(霍尔)版本&#xff1a; 2、挖坑法&#xff1a; 3、前后指针法&#xff1a; 4、非递归实现快速排序&#xff1a; 二、归并排序&#xff1a; 1、递归实现归并排序&#xff1a; 2、非递归实现归并排序&#xff1a; 三、排序算法…
阅读更多...
白酒：陈酿过程中的氧化还原反应与酒体老化

白酒：陈酿过程中的氧化还原反应与酒体老化

在云仓酒庄豪迈白酒的陈酿过程中&#xff0c;氧化还原反应与酒体老化是影响酒品质的重要因素。陈酿是白酒生产中不可或缺的一环&#xff0c;通过陈酿可以使酒体更加协调、口感更加醇厚。而氧化还原反应作为陈酿过程中的重要化学反应&#xff0c;对酒体的老化起着关键作用。 首先…
阅读更多...
Python列表：灵活多变的数据结构

Python列表：灵活多变的数据结构

文章目录 一、列表1.创建列表2.访问列表元素3.修改列表元素4.添加元素5.删除元素 二、列表脚本操作符1.连接运算符 2.重复运算符 * 三、列表函数&方法1.函数1.1 len() 函数1.2 max() 函数1.3 min() 函数1.4 sum() 函数1.5 list() 函数 2.方法2.1 append() 方法2.2 extend()…
阅读更多...
nginx 具体介绍

nginx 具体介绍

一&#xff0c;nginx 介绍 &#xff08;一&#xff09;nginx 与apache 1&#xff0c; Apache event 模型 相对于 prefork 模式 可以同时处理更多的请求 相对于 worker 模式 解决了keepalive场景下&#xff0c;长期被占用的线程的资源浪费问题 因为有监听线程&#…
阅读更多...
江科大STM32学习笔记（上）

江科大STM32学习笔记（上）

STM32F103xx 前言外设篇GPIO输出GPIO位结构GPIO模式外设的GPIO配置查看实战1&#xff1a; 如何进行基本的GPIO输入输出 OLED显示屏及调试Keil的调试模式演示 EXTI外部中断NVIC基本结构EXTI结构代码实战2&#xff1a;如何使用中断和对射式红外传感器&#xff06;旋转编码器 TIM&…
阅读更多...
嵌入式基础准备 | 初识嵌入式AI

嵌入式基础准备 | 初识嵌入式AI

1、嵌入式设备发展 1、第一代&#xff1a;2000年开始 单片机 最简单的电子产品 遥控器&#xff0c;烟雾报警器 裸机编程 RTOS 智能音箱&#xff0c;路由器&#xff0c;摄像头 实时性要求高的操作系统&#xff08;马上请求&#xff0c;马上响应&#xff09; 2、第二代&#xf…
阅读更多...
程序媛的mac修炼手册-- 小白入门Java篇

程序媛的mac修炼手册-- 小白入门Java篇

最近因为要用CiteSpace做文献综述&#xff0c;间接接触Java了。所以&#xff0c;继Python、C之后&#xff0c;又要涉猎Java了。刺激&#xff01;&#xff01; 由于CiteSpace与Java要求版本高度匹配&#xff0c;有个匹配详情明天为大家讲解。总之&#xff0c;我的Java之旅开始于…
阅读更多...
华清远见作业第四十一天——Qt（第三天）

华清远见作业第四十一天——Qt（第三天）

思维导图&#xff1a; 编程 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如…
阅读更多...
喜报 | 通付盾再次入选“苏州市网络和数据安全技术支撑单位”

喜报 | 通付盾再次入选“苏州市网络和数据安全技术支撑单位”

近日&#xff0c;为加强苏州市网络和数据安全技术服务体系建设&#xff0c;提升网络和数据安全保障水平&#xff0c;苏州市互联网信息办公室、苏州市互联网协会发布了2024-2025年度苏州市网络和数据安全技术支撑单位名单。经过自主申报、资料审核、专家评审等环节&#xff0c;江…
阅读更多...
最新文章

Copyright @ 2022~2023