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

网页禁止移除水印

一般的话水印分为明水印和暗水印两种

明水印的话就是在视频canvas上面蒙上一个div(如我上篇文章) ,暗水印的话就是把文字通过技术嵌入到图像里。

具体实现的话可以使用MutationObserver API 来监视 DOM 的变化,特别是针对目标节点(这里是document.body)的子节点是否被删除。如果检测到有子节点被删除,它计划(但示例中未完全实现)重新插入一个水印元素。

  1. 目标节点定义:

    const targetNode = document.body;

    这行代码将document.body(即网页的主体部分)赋值给targetNode变量,表示MutationObserver将观察这个节点的变化。

  2. 创建MutationObserver实例:

    const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
    if (mutation.removedNodes.length > 0) {
    // 在此处判断是否有水印被删除
    // 如果水印被删除,则重新插入水印的 DOM 元素到目标节点
    // 例如:targetNode.appendChild(watermarkElement);
    }
    }
    });

    这里创建了一个MutationObserver实例,它接受一个回调函数作为参数。当监测到DOM变化时,会调用这个回调函数,并传入一个mutationsList(一个包含所有变化的MutationRecord对象的数组)。对于列表中的每个变化(mutation),如果它包含了被删除的节点(removedNodes.length > 0),则计划执行某些操作(在注释中提到的重新插入水印元素)。但请注意,示例中并没有定义watermarkElement变量,所以实际执行时需要先定义并准备好这个元素。

  3. 配置MutationObserver:

    const config = { childList: true, subtree: true };

    设置MutationObserver的配置对象。childList: true表示观察目标节点的子节点的增减,subtree: true表示不仅观察目标节点的直接子节点,还观察其所有后代节点的变化。

  4. 开始观察目标节点:

    observer.observe(targetNode, config);

    通过调用observe方法,将MutationObserver实例与targetNodedocument.body)关联起来,并使用config对象作为参数来指定观察哪些类型的DOM变化。

  • 在实际应用中,需要在回调函数内部定义或获取watermarkElement(水印元素),然后才能将其重新插入到DOM中。
  • MutationObserver的回调函数可能会在DOM变化后立即执行,这意味着如果DOM变化非常频繁,可能会导致性能问题。因此,在设计时需要注意这一点,可能需要引入防抖(debounce)或节流(throttle)机制。
  • 没有展示如何定义watermarkElement或如何具体地将其添加到DOM中,这些都是在实际应用中需要完成的步骤。
  • 如果⽔印被删除后⽴即加回去,你可以在检测到⽔印被删除时,⽴即执⾏插⼊⽔印的代码,以
    确保⽔印能够迅速地重新出现在页⾯上

相关文章:

网页禁止移除水印

一般的话水印分为明水印和暗水印两种 明水印的话就是在视频canvas上面蒙上一个div(如我上篇文章) ,暗水印的话就是把文字通过技术嵌入到图像里。 具体实现的话可以使用MutationObserver API 来监视 DOM 的变化,特别是针对目标节…...

Node Red 与axios简易测试环境的搭建

为了学习在vue3中如何使用axios,我借Sider Fusion的帮助搭建了基于node的简易测试环境。 Axios 是一个基于 Promise 的 HTTP 客户端,通常用于浏览器环境,但它也可以在 Node.js 环境中使用。因此,可以在 Ubuntu 的 Bash 环境下通过…...

测试面试宝典(四十三)—— 接口测试流程

回答一: 接口测试一般遵循以下流程: 需求分析 仔细研究接口的需求文档,包括接口的功能、输入输出参数、业务逻辑、性能要求等。与开发人员、产品经理等沟通,确保对需求的理解准确无误。 测试计划制定 确定测试的目标、范围和策略。…...

arkhamintelligence 请求头加密 X-Payload 完整逆向分析+自动化解决方案

大家好!我是爱摸鱼的小鸿,关注我,收看每期的编程干货。 逆向是爬虫工程师进阶必备技能,当我们遇到一个问题时可能会有多种解决途径,而如何做出最高效的抉择又需要经验的积累。本期文章将以实战的方式,带你详细地逆向分析 arkhamintelligence 请求头加密字段 X-Payload 的…...

Vue Router哈希模式和历史模式

Vue官方文档 哈希模式(hash mode) 特点 URL 格式:使用 # 符号分隔路径,哈希值之后的部分由客户端解析。 https://example.com/#/about无需服务器配置:哈希值部分不会被发送到服务器,因此不需要额外的服…...

Springboot实战:AI大模型+亮数据代理助力短视频时代

目录 前言1.如何入门亮数据1.1、注册登录1.2、注册账号1.3、登录1.4、购买静态住宅代理1.5、展示购买的代理 2. 使用Springboot、AI大模型构建系统2.1 使用Springboot、AI大模型构建爬虫2.2、在Springboot项目添加工具 3、编写代码,爬取视频素材3.1、代码里使用代理…...

Postman请求问题 connect ECONNREFUSED 127.0.0.1:80解决方法

问题描述: 解决方法: (1)点击file-settings (2)点击Proxy,并将右边的Use the system proxy 取消选中 (3)勾选use custom proxy configuration 这个8080是默认的&#xf…...

维护SQL Server数据库索引:保持性能的黄金法则

维护SQL Server数据库索引:保持性能的黄金法则 在SQL Server中,数据库索引是优化查询性能的关键工具。然而,随着数据的不断变化,索引可能会变得碎片化或过时,从而降低数据库性能。因此,定期维护索引是确保…...

nvm管理node版本问题处理集合

windows上通过nvm管理node版本,通过nvm安装node,报错了,信息: > Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt. Get > https://nodejs.org/dist/latest/SHASUMS256.txt: dial tcp 104.20.23.46:443: …...

word打印---doc转html后进行打印,window.print、print-js、vue-print-nb

提示&#xff1a;word预览方式—插件 文章目录 [TOC](文章目录) 前言一、vue-office-docx把docx转换html二、调取window.print三、print-js四、vue-print-nb总结 前言 word预览 一、vue-office-docx把docx转换html npm install vue-office-docx -S-DofficeDocx.vue <templ…...

CTF学习笔记汇总(非常详细)零基础入门到精通,收藏这一篇就够了

CTF学习笔记汇总 Part.01 Web 01 SSRF 主要攻击方式如下&#xff1a; 01 对外网、服务器所在内网、本地进行端口扫描&#xff0c;获取一些服务的banner信息。 02 攻击运行在内网或本地的应用程序。 03 对内网Web应用进行指纹识别&#xff0c;识别企业内部的资产信息。 …...

如果想不明白,那就读书吧

人生起伏是常态&#xff0c;平平淡淡的日子亦是常态&#xff0c;但是在常态中的普通人往往面对着各种各样的风险和挑战&#xff0c;稍有不慎&#xff0c;生活天翻地覆。 回到现在这家公司是一次吃回头草的过程&#xff0c;其中亦是一次生活的坎坷&#xff0c;祸福相伴。来公司…...

Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签

本教程主要实现【Golang处理Word文档模板实现标签填充|表格插入|图标绘制和插入|删除段落|删除标签】。 本文源码&#xff1a;https://gitee.com/songfayuan/go-zero-demo 教程源码分支&#xff1a;master 分支&#xff08;_examples/word-template/fill-word-template.go&…...

PHP学习:PHP基础

以.php作为后缀结尾的文件&#xff0c;由服务器解析和运行的语言。 一、语法 PHP 脚本可以放在文档中的任何位置。 PHP 脚本以 <?php 开始&#xff0c;以 ?> 结束。 <!DOCTYPE html> <html> <body><h1>My first PHP page</h1><?php …...

Xinstall新玩法:Web直接打开App,用户体验再升级!

在移动互联网时代&#xff0c;App已成为我们日常生活中不可或缺的一部分。然而&#xff0c;在App推广和运营过程中&#xff0c;许多开发者面临着从Web端引流到App的难题。这时&#xff0c;Xinstall作为国内专业的App全渠道统计服务商&#xff0c;提供了一种创新的解决方案——通…...

perf 排查高延迟

高延迟的 2 个场景&#xff0c;触发 perf 录包思路 当前 perf 没有常驻内存&#xff0c;后续提供 perf 常驻内存功能。且 perf 启动需要 0.5~1s&#xff0c;所以&#xff0c;存在 2 个场景 1.频繁连续高延迟&#xff08;复现后的几秒内&#xff0c;继续频繁复现&#xff09;&a…...

配置8188eu无线网卡的热点模式

下载驱动 github:8188eu的最新驱动&#xff0c;注意下载5.2.2.4分支 关于这一驱动&#xff0c;不要下载master分支&#xff0c;master分支代码较早&#xff0c;会导致以下两点问题&#xff1a; 1.STA模式下连接wifi信号较差时会卡死 2.无法启动AP模式 所以请务必下载5.2.2.4分…...

为什么 DDoS 攻击偏爱使用 TCP 和 UDP 包?

Distributed Denial of Service (DDoS) 攻击是指攻击者利用多个计算机系统或网络设备&#xff08;通常是被恶意软件感染的计算机&#xff0c;被称为“僵尸网络”&#xff09;来淹没目标服务器的资源&#xff0c;导致合法用户无法访问服务。TCP 和 UDP 是两种最常见的用于 DDoS …...

多址技术(FDMA,TDMA,CDMA,帧,时隙)(通俗易懂)

多址技术是一种区分用户的技术。 举个例子&#xff0c;一个基站发出信息&#xff0c;如何确定是发给谁的&#xff1f; 这个技术就是解决这个问题的。 多址技术常见的有三种&#xff1a; 频分多址&#xff08;FDMA&#xff09;、时分多址&#xff08;TDMA&#xff09;、码分…...

基于 KubeSphere 的 Kubernetes 生产环境部署架构设计及成本分析

转载&#xff1a;基于 KubeSphere 的 Kubernetes 生产环境部署架构设计及成本分析 前言 导图 1. 简介 1.1 架构概要说明 今天分享一个实际小规模生产环境部署架构设计的案例&#xff0c;该架构设计概要说明如下&#xff1a; 本架构设计适用于中小规模(<50)的 Kubernetes …...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...