当前位置: 首页 > news >正文

nginx出现Refused to apply inline style because it violates

Content Security Policy的错误。根据错误提示,nginx拒绝应用内联样式,因为它违反了内容安全策略(Content Security Policy)。内容安全策略是一种浏览器机制,用于防止潜在的安全漏洞,通过限制从外部来源加载的资源(如脚本、样式和图像),以减少攻击面。

要解决此问题,你可以采取以下步骤:

1. 确保你的网站的配置文件中有正确的内容安全策略头部。可以在nginx的配置文件中添加以下头部:

add_header Content-Security-Policy "default-src 'self'";

2. 检查你的网页代码,确保没有内联样式。内联样式是指将CSS样式写在HTML标签的style属性中。这种情况下,你可以将内联样式移动到外部CSS文件中,并通过链接引用该文件。

3. 如果你的网站依赖于内联样式,你可以在配置文件中修改内容安全策略,允许内联样式。例如:

add_header Content-Security-Policy "default-src 'self' 'unsafe-inline'";

但需要注意的是,允许内联样式可能会降低内容安全性,因此请谨慎使用。

重启nginx服务器后,这个错误应该就会解决。

question
Nginx添加CSP响应头设置之后报错:

Refused to load the font 'data:application/x-font-woff;charset=utf-8;base64,d09G…’ because it violates the following Content Security Policy directive: “default-src ‘self’”. Note that ‘font-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

reason
嵌入在js中font-src是data-base64字符串类型,而nginx CSP配置没有相关设置,导致被浏览器阻拦

solution
CSP内容追加对font的配置 font-src ‘self’ data:;

完整配置

add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';img-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';connect-src 'self' 'unsafe-inline';font-src 'self' data:;";

表示js img js css font 支持同域名地址和行内嵌入

效果:

配置前:

配置后:

相关文章:

nginx出现Refused to apply inline style because it violates

Content Security Policy的错误。根据错误提示,nginx拒绝应用内联样式,因为它违反了内容安全策略(Content Security Policy)。内容安全策略是一种浏览器机制,用于防止潜在的安全漏洞,通过限制从外部来源加载…...

【中项第三版】系统集成项目管理工程师 | 第 11 章 规划过程组⑥ | 11.15 - 11.17

前言 第11章对应的内容选择题和案例分析都会进行考查,这一章节属于10大管理的内容,学习要以教材为准。本章上午题分值预计在15分。 目录 11.15 规划资源管理 11.15.1 主要输入 11.15.2 主要工具与技术 11.15.3 主要输出 11.16 估算活动资源 11.1…...

基础警务互联网app

智慧公安以大数据、云计算、人工智能、物联网和移动互联网技术为支撑,以“打、防、管、控”为目的,综合研判为核心,共享信息数据资源,融合业务功能,构建公安智慧大数据平台,实现公安信息数字化、网络化和智…...

为了方便写CURD代码,我在UTools写了个插件SqlConvert来生成代码!

-1. 前言 为了方便摸鱼,我之前写过一个通过sql生成代码的工具,但是服务器到期了,也就懒得重新部署了。 技术框架是 SpringBoot MybatisPlus Velocity Vue ElementUI Sql-ParseeSql-Parser-ui 0. Utools应用安装 官网地址: https://u.too…...

在国产芯片上实现YOLOv5/v8图像AI识别-【2.2】RK3588上C++开发环境准备及测试更多内容见视频

本专栏主要是提供一种国产化图像识别的解决方案,专栏中实现了YOLOv5/v8在国产化芯片上的使用部署,并可以实现网页端实时查看。根据自己的具体需求可以直接产品化部署使用。 B站配套视频:https://www.bilibili.com/video/BV1or421T74f 板子…...

2024数据资产入表财务实操手册

关注公众号《方案驿站》,并私信:2024数据资产入表财务实操手册,可获取本文pdf文件。...

react.16+

1、函数式组件 在vite脚手架中执行&#xff1a; app.jsx: import { useState } from react import reactLogo from ./assets/react.svg import viteLogo from /vite.svg import ./App.cssfunction App() {console.log(this)return <h2>我是函数式组件</h2> }exp…...

如何实现MySQL对某一张表的binlog日志进行记录

在 MySQL 中&#xff0c;使用触发器&#xff08;Triggers&#xff09;来记录表的变更是一种常见的方法。下面是具体的配置和步骤&#xff1a; 1. 创建日志表 首先&#xff0c;需要创建一个日志表&#xff0c;用于存储变更记录。 CREATE TABLE my_table_log (id INT AUTO_INC…...

使用requests库进行网络爬虫:入门指南

在数据收集与分析的广阔领域中&#xff0c;网络爬虫是一项基础而强大的技能。requests库是Python中用于发送HTTP请求的第三方库&#xff0c;它简洁易用&#xff0c;非常适合初学者学习网络爬虫。本文将带你一步步了解如何使用requests库进行基本的网络爬虫操作。 一、安装requ…...

实验5-1 使用函数计算两点间的距离

本题要求实现一个函数&#xff0c;对给定平面任意两点坐标(x1,y1)和(x2,y2)&#xff0c;求这两点之间的距离。 函数接口定义&#xff1a; double dist( double x1, double y1, double x2, double y2 );其中用户传入的参数为平面上两个点的坐标(x1, y1)和(x2, y2)&#xff0c;函…...

免费!OpenAI发布最新模型GPT-4o mini,取代GPT-3.5,GPT-3.5退出历史舞台?

有个小伙伴问我&#xff0c;GPT-4O mini是什么&#xff0c;当时我还一脸懵逼&#xff0c;便做了一波猜测&#xff1a; 我猜测哈&#xff0c;这个可能是ChatGPT4o的前提下&#xff0c;只支持文本功能的版本&#xff0c;速度更快 结果&#xff0c;大错特错。 让我们一起看看Open…...

目标检测损失计算部分(YOLO)

ComputeLoss 标准化坐标的增益张量 标准化坐标的增益张量&#xff08;gain tensor&#xff09;用于将归一化的目标转换为特定特征层的网格尺度&#xff0c;以便进行匹配和计算。 在目标检测模型中&#xff0c;输入图像被划分为多个网格&#xff0c;每个网格负责预测多个锚框…...

Swift 方法

Swift 方法 Swift 是一种强大的编程语言,用于开发 iOS 和 macOS 应用程序。在 Swift 中,方法是一段代码,它定义了执行特定任务的步骤。方法可以提高代码的可重用性和可维护性。本文将介绍 Swift 方法的基本概念、语法和用法。 1. 基本概念 1.1 方法定义 方法是一段代码,…...

哪些牌子充电宝性价比比较高?目前公认比较好用充电宝都在这儿!

在这个科技飞速发展的时代&#xff0c;充电宝已经成为我们生活中不可或缺的一部分。然而&#xff0c;在享受充电宝带来的便利时&#xff0c;我们不能忽视一个至关重要的问题——安全性。随着无线充电宝的普及&#xff0c;大家对于“无线充电宝哪个牌子更好&#xff1f;”的疑问…...

计算机网络必会面经

1.键入网址到网页显示&#xff0c;期间发生了什么 2.在TCP/IP网络模型中。TCP将数据进行分段后&#xff0c;为什么还需要IP层继续分片 3.详细说明tcp三次握手&#xff0c;为什么是三次&#xff0c;若每次握手丢了&#xff0c;解决办法是什么 4.详细说明tcp四次挥手&#xff…...

深入理解 Go 数组、切片、字符串

打个广告&#xff1a;欢迎关注我的微信公众号&#xff0c;在这里您将获取更全面、更新颖的文章&#xff01; 原文链接&#xff1a;深入理解 Go 数组、切片、字符串 欢迎点赞关注 前言 为什么在一篇文章里同时介绍数组、切片、字符串&#xff0c;了解这三个数据类型底层数据结构…...

STM32下的HAL库U盘数据读写

最近在使用FreeRTOS操作U盘数据读取&#xff0c;与裸机开发区别不大&#xff0c;只要注意默认分配的栈大小就行 FATFS简介 FATFS 是一个完全免费开源的 FAT 文件系统模块&#xff0c;专门为小型的嵌入式系统而设计。它完全用标准 C 语言编写&#xff0c;所以具有良好的硬件平…...

JavaScript(20)——事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧 优点&#xff1a;减少注册次数&#xff0c;提高程序性能 原理&#xff1a;利用事件冒泡的特点。 给父元素注册事件&#xff0c;当我们触发子元素的时候&#xff0c;会冒泡到父元素上&#xff0c;从而触发父元素事件。…...

Linux系统安装opencv

在Linux系统上安装OpenCV时&#xff0c;使用pip install opencv-python-headless是一个常见的选择。以下是安装OpenCV的步骤总结&#xff1a; 安装步骤&#xff1a; 更新系统软件包&#xff08;可选&#xff09;&#xff1a; sudo apt update sudo apt upgrade安装pip&#xf…...

nginx反向代理+nginx黑白名单+nginx负载均衡+平滑升级+配置jdk环境-7.30

一、反向代理 1.前端服务器配置 前端服务器&#xff1a;用于接收和响应客户端&#xff0c;代理另一台主机 Nginx 安装 (1).下载安装nginx [rootweb ~]# wget https://nginx.org/download/nginx-1.26.1.tar.gz (2).解压 [rootweb ~ ]# tar -zxvf nginx-1.26.1.tar.gz (3…...

从状态机视角理解程序:形式化方法如何保证复杂系统正确性

1. 从数学视角审视程序&#xff1a;为什么我们需要形式化思维在软件开发的日常里&#xff0c;我们常常埋头于代码的细节&#xff1a;这个循环边界对不对&#xff1f;那个指针会不会为空&#xff1f;这个API调用返回错误该怎么处理&#xff1f;我们依赖编译器、静态分析工具、单…...

全面实战指南:如何高效部署ChatTTS-ui语音合成系统

全面实战指南&#xff1a;如何高效部署ChatTTS-ui语音合成系统 【免费下载链接】ChatTTS-ui 一个简单的本地网页界面&#xff0c;使用ChatTTS将文字合成为语音&#xff0c;同时支持对外提供API接口。A simple native web interface that uses ChatTTS to synthesize text into …...

群晖SSH远程访问全链路打通指南

1. 为什么群晖的SSH不是“开个开关”就完事的很多人第一次在群晖DSM界面里点开“控制面板 > 终端机和SNMP > 启用SSH服务”&#xff0c;看到端口22打钩、状态显示“已启用”&#xff0c;就以为大功告成&#xff0c;兴冲冲拿Mac或Windows的终端连一下——结果ssh admin192…...

Unity ShaderGraph工程化实践:从可视化到生产级渲染

1. 为什么我劝新手别急着写第一行Shader代码——从Unity ShaderGraph的“可视化错觉”说起 刚接触Unity渲染管线的新手&#xff0c;十有八九会经历这样一个阶段&#xff1a;在B站搜“Unity Shader教程”&#xff0c;点开前三个视频&#xff0c;前两分钟听着“顶点着色器负责位置…...

终极指南:如何用WeChatLuckyMoney轻松实现微信红包自动抢

终极指南&#xff1a;如何用WeChatLuckyMoney轻松实现微信红包自动抢 【免费下载链接】WeChatLuckyMoney :money_with_wings: WeChats lucky money helper (微信抢红包插件) by Zhongyi Tong. An Android app that helps you snatch red packets in WeChat groups. 项目地址…...

UE5场景漫游跳转避坑指南:从UI交互到资源预热

1. 这不是“做个UI跳个关卡”那么简单&#xff1a;UE5场景漫游的起点陷阱 很多人拿到“UE5场景漫游——开始界面及关卡跳转”这个需求&#xff0c;第一反应是&#xff1a;“不就是加个UMG按钮&#xff0c;绑个OpenLevel节点&#xff1f;”我去年带三个实习生做文旅数字孪生项目…...

python非物质非遗文化传承与推广平台系统_h89q9jnr

目录同行可拿货,招校园代理 ,本人源头供货商项目背景核心功能技术实现应用场景项目特色项目技术支持源码获取详细视频演示 &#xff1a;同行可合作点击我获取源码->获取博主联系方式->进我个人主页-->同行可拿货,招校园代理 ,本人源头供货商 项目背景 Python非物质非…...

腾讯Marvis完整上手体验+功能测试

一、什么是Marvis&#xff1f;干什么用的&#xff1f; Marvis&#xff08;马维斯&#xff09;是腾讯2026-05-21正式发布上线的操作系统层级AI助手&#xff0c;由应用宝团队打造&#xff0c;定位系统级深度 AI 助手。 1.核心信息 发布时间&#xff1a;2026年5月21日官方官宣上…...

Adams 多体动力学:工业仿真的黄金标准与未来引擎

Adams&#xff08;Automatic Dynamic Analysis of Mechanical Systems&#xff09;是全球多体动力学仿真领域的标杆软件&#xff0c;由 MSC Software 公司开发&#xff08;现隶属于 Hexagon 集团&#xff09;&#xff0c;凭借领先的虚拟样机技术&#xff0c;成为汽车、航空航天…...

向日葵远程控制16.5发布,“免密远控”功能登场便捷又安全

人在公司&#xff0c;急需处理家里电脑上的重要文件&#xff0c;却完全想不起访问密码或者系统的帐号密码&#xff1b;出差在外&#xff0c;想远程操作办公室电脑&#xff0c;却不得不打电话让同事帮忙看一眼密码设置甚至干脆让同事点个接受......密码虽然是一种非常主流的安全…...