我们要挑战的是最长的山路，我们不会轻言放弃。
91 |但是命是自己的！行程中要注意安全，紧跟团队。如有身体不适请立即联系医护人员。没有命，就没有挑战。以下列出本次活动规范，请大家仔细阅读并相互传播。
92 | 93 |参团的游客，应听从领队、导游人员的安全提醒，切莫擅自行动。 18 | 自身的人身、财物安全要注意，购买人身意外险，贵重物品要随身携带， 19 | 不要留在车内或者交由他人保管。参加漂流、摩天轮等高风险项目的时候， 20 | 要认真听从工作人员的安排，切莫求刺激而发生意外。
21 |以下是本次参团出行需要遵守的规范要求：
22 |一、跟刺激相比，命更重要，没有命就什么都没了。
23 |二、旅行中会遇到很多你从未见过的植物和动物，不要轻易打扰它们，有可能有毒。
24 |三、身体感觉不适，尤其是发烧、乏力和呕吐等情况必须报告随队医护人员。
25 |四、出发前请跟家人沟通好，避免造成失联错觉。
26 |五、出发前请按照队长的要求准备好必备衣物和干粮，最重要的是水。
27 |六、旅行途中必须紧跟队伍，不许在无人知晓的情况下行动。
28 |七、如不慎走失，请先释放信号弹，半小时后无人联系再想办法报警。
29 |八、如果不同意以上几条，请在出发前告知队长。
30 |九、最重要的是：没有命，就什么都没了。
31 | """ 32 | @staticmethod 33 | def deltas(tp): 34 | # 将前端传递的时间戳与当前时间戳对比并返回差值秒数 35 | tamp = int(tp) 36 | now = round(time()) 37 | delta = datetime.fromtimestamp(now) - datetime.fromtimestamp(tamp) 38 | return delta.total_seconds() 39 | 40 | @staticmethod 41 | def hex5(value): 42 | # 使用 md5 加密值并返回加密后的字符串 43 | manipulator = hashlib.md5() 44 | manipulator.update(value.encode('utf-8')) 45 | return manipulator.hexdigest() 46 | 47 | def comparison(self, actions, tim, randstr, sign): 48 | # 根据传递的参数计算md5值，并与客户端提交的md5值进行比对 49 | value = actions+tim+randstr 50 | hexs = self.hex5(value) 51 | if sign == hexs: 52 | return True 53 | return False 54 | 55 | def get(self): 56 | # 返回数据的视图 57 | params = self.request.arguments # 获取请求正文 58 | actions = params.get('actions')[0].decode('utf-8') 59 | tim = params.get('tim')[0].decode('utf-8') 60 | randstr = params.get('randstr')[0].decode('utf-8') 61 | sign = params.get('sign')[0].decode('utf-8') 62 | seconds = self.deltas(tim) # 取双端时间差值 63 | if self.comparison(actions, tim, randstr, sign) and seconds < 5: 64 | # 如果双端 MD5 值和时间戳差值都符合要求则返回正常内容 65 | self.write(self.content) 66 | else: 67 | self.set_status(403) 68 | 69 | 70 | def make_app(): 71 | # 路由和静态文件路径设置 72 | return tornado.web.Application( 73 | [(r"/", MainHandler), (r"/fet", FetHandler)], 74 | template_path=os.path.join(os.path.dirname(__file__), 'template'), 75 | static_path=os.path.join(os.path.dirname(__file__), 'static') 76 | ) 77 | 78 | 79 | if __name__ == "__main__": 80 | # 绑定端口并启动 81 | app = make_app() 82 | app.listen(8206) 83 | tornado.ioloop.IOLoop.current().start() -------------------------------------------------------------------------------- /04/4-5/server.py: -------------------------------------------------------------------------------- 1 | import socket 2 | import json 3 | 4 | 5 | def verify(data): 6 | """验证客户端握手信息""" 7 | data = data[:-4].split('\r\n') 8 | method = data.pop(0) # 取出请求方式和协议 9 | header = {} 10 | # 将列表转为字典 11 | for key, val in enumerate(data): 12 | try: 13 | name, value = val.split(':') 14 | except Exception as exc: 15 | name, host, port = val.split(':') 16 | value = '{}:{}'.format(host, port) 17 | header[name] = value 18 | 19 | # 不满足条件则False 20 | if any(['GET' not in method, 'HTTP/1.1' not in method, 21 | header.get('Connection') != 'Upgrade', 22 | header.get('Upgrade') != 'websocket', 23 | header.get('Sec-WebSocket-Version') != '13', 24 | not header.get('Sec-WebSocket-Key'), 25 | not header.get('Origin')]): 26 | return False 27 | return True 28 | 29 | 30 | def set_response(status): 31 | """设置响应头""" 32 | head = {'Status Code': '101 Web Socket Protocol Handshake', 'Connection': 'Upgrade', 'Upgrade': 'websocket', 33 | 'Sec-WebSocket-Accept': 'T5ar3gbl3rZJcRmEmBT8vxKjdDo='} 34 | if not status: 35 | head = {'Status Code': '403'} 36 | headers = ['{}:{}'.format(k, item) for k, item in head.items()] 37 | headers.append('\r\n') 38 | res = '\r\n'.join(headers) 39 | return res.encode('utf8') 40 | 41 | 42 | def verify_sting(conn): 43 | """读取客户端发送的消息并进行简单验证""" 44 | methods = ['GET', 'POST'] 45 | while True: 46 | message = conn.recv(1024) 47 | if message: 48 | break 49 | message = json.loads(message) 50 | method = message.get('method') 51 | content = message.get('content') 52 | if method in methods: 53 | return content 54 | shake_hands_status = False # 设置握手成功的状态，默认False 55 | 56 | 57 | def get_data(content): 58 | data = {'huawei': '{"title": "Huawei latest flagship mobile P30 Pro", "price": 3999, "RAM": "8G", "ROM": "256G", "pixel": "4000W"}', 59 | 'iphone': 'iOS'} 60 | return data.get(content) 61 | 62 | 63 | with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s: 64 | # 使用Python底层接口创建socket 65 | s.bind(('localhost', 50007)) # 绑定地址和端口 66 | s.listen(1) # 只允许同时1个客户端连接 67 | conn, addr = s.accept() # 客户端对象和客户端地址 68 | shake_hands_status = False # 设置握手成功的状态，默认False 69 | with conn: 70 | # 读取客户端发送的消息 71 | data = conn.recv(1024).decode('utf8') 72 | if not shake_hands_status: 73 | # 避免重复握手 74 | status = verify(data) # 校验握手信息 75 | resp = set_response(status) # 根据握手校验结果返回响应头 76 | conn.send(resp) 77 | shake_hands_status = True # 握手成功后对应状态 78 | 79 | # 以下为客户端消息校验和数据推送 80 | content = verify_sting(conn) 81 | if content: 82 | # 如果客户端消息通过校验则从数据从库中取出对应数据并推送给客户端 83 | data = get_data(content) 84 | conn.send(data.encode('utf8')) -------------------------------------------------------------------------------- /09/captcha/js/jigsaw.js: -------------------------------------------------------------------------------- 1 | /* 拼图验证码 2 | 验证逻辑： 3 | 1、记录缺口位置 4 | 2、在鼠标按下和松开时记录鼠标的相对位置 5 | 3、鼠标松开时的位置与按下时的位置差值与缺口位置比较，在范围内则认为通过 6 | */ 7 | 8 | 9 | var jigsaw = $('.jigsaw'), jigsawTrack = $('.jigsawTrack'), 10 | jigsawCircle = $('.jigsawCircle'), jigsawTips = $('.jigsawTips'), 11 | missblock = $('.missblock'), targetblock = $('.targetblock') 12 | 13 | $(function() { 14 | var imageback = $('.imageback') // 背景图所在标签 15 | imageback.attr('src', `images/1.jpg`) // 背景图 16 | missblock.css('background-image', `url('images/0.jpg')`) // 对应的滑块 17 | var imageback = document.getElementById('imageback'); 18 | imageback.onload = function() { 19 | // 获取图片高度 20 | var imageHeight = this.clientHeight 21 | // 生成缺口坐标 22 | var CoordinateX = 150/2 * (1 + Math.random()), CoordinateY = Math.random() * imageHeight / 2 23 | // 鼠标按下 24 | fnDown(CoordinateX , CoordinateY) 25 | 26 | } 27 | }) 28 | 29 | function fnDown(CoordinateX, CoordinateY) { 30 | jigsawCircle.mousedown(function(e) { 31 | e.stopPropagation() 32 | // 鼠标按下时，显示圆角矩形的位置 33 | var missblockFirst = 10; 34 | missblock.css('left', `${missblockFirst}px`) 35 | // 鼠标按下时，滑块的位置 36 | var circleMousedown = jigsawCircle.offset().left 37 | var missblockWidth = missblock.width(); 38 | var missblockWidthHalf = missblockWidth/2; 39 | // 缺块显示 40 | missblock.css({ 41 | display: 'block', 42 | top: `${CoordinateY}px`, 43 | 'background-position': `-${CoordinateX - missblockWidth/3}px -${CoordinateY - missblockWidth/2}px` 44 | }) 45 | // 缺口位置显示 46 | targetblock.css({ display: 'block', left: `${CoordinateX}px`, top: `${CoordinateY}px` }) 47 | var distanceX = e.clientX - $(this).offset().left; 48 | // 提示文字设为透明 49 | jigsawTips.css('opacity', '0') 50 | 51 | // 监听鼠标移动事件 52 | jigsaw.bind('mousemove', function(e) { 53 | fnMove(e, distanceX) 54 | }) 55 | 56 | // 监听mouseup，根据滑块位置判断结果 57 | jigsaw.bind('mouseup', function() { 58 | var circleMouseup = jigsawCircle.offset().left; 59 | var verifyPosition = circleMouseup - circleMousedown 60 | console.log('缺口位置：' + CoordinateX) 61 | console.log('circle Mouseup:' + circleMouseup + '-减去-' + 'circle Mousedown:' + circleMousedown) 62 | // 误差在2px以内则算成功 63 | if (Math.abs(verifyPosition - CoordinateX + 10) > 2) { 64 | console.log('验证失败') 65 | // 缺块和滑块归位 66 | jigsawCircle.css('left', '0px'); 67 | missblock.css('left', '10px'); 68 | // 显示提示文字 69 | jigsawTips.css('opacity', '1'); 70 | 71 | } else { 72 | alert('您已完成拼图，通过验证'); 73 | } 74 | // 移除鼠标事件监听 75 | jigsaw.unbind('mousemove') 76 | jigsaw.unbind('mouseup') 77 | }) 78 | }) 79 | } 80 | 81 | function fnMove(e, distanceX) { 82 | // 滑块移动范围控制在滑轨中，不可超出 83 | var l = e.clientX - distanceX - $(jigsawTrack).offset().left, winW = $(jigsawTrack).width() + 29 84 | if (l < 0) {l = 0} else if (l > winW) {l = winW} 85 | jigsawCircle.css('left', `${l}px`) 86 | missblock.css('left', `${l + 10}px`) 87 | } -------------------------------------------------------------------------------- /09/captcha/js/jigsawCanvas.js: -------------------------------------------------------------------------------- 1 | /* Canvas 拼图 */ 2 | 3 | var jigsaw = $('.jigsaw'), jigsawTrack = $('.jigsawTrack'), 4 | jigsawCircle = $('.jigsawCircle'), jigsawTips = $('.jigsawTips'), 5 | missblock = $('.missblock'), targetblock = $('.targetblock') 6 | 7 | var missblockFirst = 10; 8 | 9 | $(function() { 10 | var jigsawCanvas = document.getElementById('jigsawCanvas'); 11 | var cvas = jigsawCanvas.getContext('2d'); 12 | var jigsawImages = new Image(); 13 | jigsawImages.src = 'images/2.jpg' 14 | 15 | jigsawImages.onload = function start() { 16 | // 图片加载后将图片绘制到Canvas画布 17 | var imageHeight = jigsawCanvas.height; 18 | var imageWidth = jigsawCanvas.width; 19 | cvas.drawImage(jigsawImages, 0, 0, imageWidth, imageHeight); 20 | cvas.save(); 21 | // 根据背景图标签的宽高生成缺口坐标 22 | var CoordinateX = imageWidth/5 + imageWidth/2 * Math.random(), CoordinateY = imageHeight / 2 * Math.random() 23 | mouseDowns(CoordinateX , CoordinateY) 24 | } 25 | 26 | function mouseDowns(CoordinateX, CoordinateY) { 27 | var targetblockTimes = 0; 28 | jigsawCircle.mousedown(function(e) { 29 | e.stopPropagation() 30 | // 鼠标按下时，滑块的位置 31 | var circleMousedown = jigsawCircle.offset().left; 32 | // 圆角矩形显示 33 | missblock.css({ 34 | display: 'block', 35 | top: `${CoordinateY}px`, 36 | 'background-position': `-${missblockFirst}px -${CoordinateY}px` 37 | }) 38 | // 绘制缺口，计数避免重复绘制 39 | if(targetblockTimes<1){ 40 | var targetImage = new Image(); 41 | targetImage.src = 'images/1.jpg'; 42 | cvas.fillStyle = "rgba(0,0,0,0.6)"; 43 | // 在指定位置绘制38x38大小的矩形 44 | cvas.fillRect(CoordinateX, CoordinateY, 38, 38); 45 | targetblockTimes += 1; 46 | }else{ 47 | console.log('missblock alredy in canvas') 48 | } 49 | // 获取鼠标到按钮的距离 50 | var disX = e.clientX - $(this).offset().left; 51 | // 提示文字设为透明 52 | jigsawTips.css('opacity', '0') 53 | // 监听鼠标移动事件 54 | jigsaw.bind('mousemove', function(e) { 55 | mouseMoves(e, disX) 56 | }) 57 | 58 | // 监听mouseup，根据滑块位置判断结果 59 | jigsaw.bind('mouseup', function() { 60 | // 滑块移动距离等于鼠标松开时的X坐标减去鼠标按下时的X坐标 61 | var circleMouseup = jigsawCircle.offset().left; 62 | var endPosition = circleMouseup - circleMousedown; 63 | // 误差在2px以内则算成功 64 | if (Math.abs(endPosition - CoordinateX + missblockFirst) > 2) { 65 | console.log('验证失败') 66 | // 缺块和滑块归位 67 | jigsawCircle.css('left', '0px'); 68 | missblock.css('left', '10px'); 69 | // 显示提示文字 70 | jigsawTips.css('opacity', '1'); 71 | } else { 72 | alert('您已完成拼图，通过验证'); 73 | } 74 | // 移除鼠标事件监听 75 | jigsaw.unbind('mousemove') 76 | jigsaw.unbind('mouseup') 77 | }) 78 | }) 79 | } 80 | }) 81 | 82 | function mouseMoves(e, distanceX) { 83 | // 滑块移动范围控制在滑轨中，不可超出 84 | var jigsawCirclePosition = e.clientX - distanceX - $(jigsawTrack).offset().left; 85 | var jigsawTrackWidth = jigsawTrack.width(); // 滑轨长度 86 | if (jigsawCirclePosition < 0) { 87 | jigsawCirclePosition = 0 88 | }else if (jigsawCirclePosition > jigsawTrackWidth) { 89 | jigsawCirclePosition = jigsawTrackWidth 90 | } 91 | //实时显示滑块和圆角矩形的位置 92 | jigsawCircle.css('left', `${jigsawCirclePosition}px`) 93 | missblock.css('left', `${jigsawCirclePosition + missblockFirst}px`) 94 | } -------------------------------------------------------------------------------- /09/captcha/jigsawCanvas.js: -------------------------------------------------------------------------------- 1 | /* Canvas 拼图 */ 2 | 3 | var jigsaw = $('.jigsaw'), jigsawTrack = $('.jigsawTrack'), 4 | jigsawCircle = $('.jigsawCircle'), jigsawTips = $('.jigsawTips'), 5 | missblock = $('.missblock'), targetblock = $('.targetblock') 6 | 7 | var missblockFirst = 10; 8 | 9 | $(function() { 10 | var jigsawCanvas = document.getElementById('jigsawCanvas'); 11 | var cvas = jigsawCanvas.getContext('2d'); 12 | var jigsawImages = new Image(); 13 | jigsawImages.src = 'images/2.jpg' 14 | 15 | jigsawImages.onload = function start() { 16 | // 图片加载后将图片绘制到Canvas画布 17 | var imageHeight = jigsawCanvas.height; 18 | var imageWidth = jigsawCanvas.width; 19 | cvas.drawImage(jigsawImages, 0, 0, imageWidth, imageHeight); 20 | cvas.save(); 21 | // 根据背景图标签的宽高生成缺口坐标 22 | var CoordinateX = imageWidth/5 + imageWidth/2 * Math.random(), CoordinateY = imageHeight / 2 * Math.random() 23 | mouseDowns(CoordinateX , CoordinateY) 24 | } 25 | 26 | function mouseDowns(CoordinateX, CoordinateY) { 27 | var targetblockTimes = 0; 28 | jigsawCircle.mousedown(function(e) { 29 | e.stopPropagation() 30 | // 鼠标按下时，滑块的位置 31 | var circleMousedown = jigsawCircle.offset().left; 32 | // 圆角矩形显示 33 | missblock.css({ 34 | display: 'block', 35 | top: `${CoordinateY}px`, 36 | 'background-position': `-${missblockFirst}px -${CoordinateY}px` 37 | }) 38 | // 绘制缺口，计数避免重复绘制 39 | if(targetblockTimes<1){ 40 | var missblockImage = new Image(); 41 | missblockImage.src = 'images/1.jpg'; 42 | cvas.fillStyle = "rgba(0,0,0,0.6)"; 43 | // 在指定位置绘制38x38大小的矩形 44 | cvas.fillRect(CoordinateX, CoordinateY, 38, 38); 45 | targetblockTimes += 1; 46 | }else{ 47 | console.log('missblock alredy in canvas') 48 | } 49 | // 获取鼠标到按钮的距离 50 | var disX = e.clientX - $(this).offset().left; 51 | // 提示文字设为透明 52 | jigsawTips.css('opacity', '0') 53 | // 监听鼠标移动事件 54 | jigsaw.bind('mousemove', function(e) { 55 | mouseMoves(e, disX) 56 | }) 57 | 58 | // 监听mouseup，根据滑块位置判断结果 59 | jigsaw.bind('mouseup', function() { 60 | // 滑块移动距离等于鼠标松开时的X坐标减去鼠标按下时的X坐标 61 | var circleMouseup = jigsawCircle.offset().left; 62 | var endPosition = circleMouseup - circleMousedown; 63 | // 误差在2px以内则算成功 64 | if (Math.abs(endPosition - CoordinateX + missblockFirst) > 2) { 65 | console.log('验证失败') 66 | // 缺块和滑块归位 67 | jigsawCircle.css('left', '0px'); 68 | missblock.css('left', '10px'); 69 | // 显示提示文字 70 | jigsawTips.css('opacity', '1'); 71 | } else { 72 | alert('您已完成拼图，通过验证'); 73 | } 74 | // 移除鼠标事件监听 75 | jigsaw.unbind('mousemove') 76 | jigsaw.unbind('mouseup') 77 | }) 78 | }) 79 | } 80 | }) 81 | 82 | function mouseMoves(e, distanceX) { 83 | // 滑块移动范围控制在滑轨中，不可超出 84 | var jigsawCirclePosition = e.clientX - distanceX - $(jigsawTrack).offset().left; 85 | var jigsawTrackWidth = jigsawTrack.width(); // 滑轨长度 86 | if (jigsawCirclePosition < 0) { 87 | jigsawCirclePosition = 0 88 | }else if (jigsawCirclePosition > jigsawTrackWidth) { 89 | jigsawCirclePosition = jigsawTrackWidth 90 | } 91 | //实时显示滑块和圆角矩形的位置 92 | jigsawCircle.css('left', `${jigsawCirclePosition}px`) 93 | missblock.css('left', `${jigsawCirclePosition + missblockFirst}px`) 94 | } -------------------------------------------------------------------------------- /09/captcha/mousemove.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
100 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/10/10-1/custom64.py:
--------------------------------------------------------------------------------
1 | class Custom64:
2 | comparison = {'0': 'A', '1': 'B', '2': 'C', '3': 'D', '4': 'E',
3 | '5': 'F', '6': 'G', '7': 'H', '8': 'I', '9': 'J',
4 | '10': 'K', '11': 'L', '12': 'M', '13': 'N', '14': 'O',
5 | '15': 'P', '16': 'Q', '17': 'R', '18': 'S', '19': 'T',
6 | '20': 'U', '21': 'V', '22': 'W', '23': 'X', '24': 'Y',
7 | '25': 'Z', '26': 'a', '27': 'b', '28': 'c', '29': 'd',
8 | '30': 'e', '31': 'f', '32': 'g', '33': 'h', '34': 'i',
9 | '35': 'j', '36': 'k', '37': 'l', '38': 'm', '39': 'n',
10 | '40': 'o', '41': 'p', '42': 'q', '43': 'r', '44': 's',
11 | '45': 't', '46': 'u', '47': 'v', '48': 'w', '49': 'x',
12 | '50': 'y', '51': 'z', '52': '0', '53': '1', '54': '2',
13 | '55': '3', '56': '4', '57': '5', '58': '6', '59': '7',
14 | '60': '8', '61': '9', '62': '+', '63': '/', '65': '=',
15 | }
16 |
17 | def encode(self, value: str, threshold: int = 4) -> str:
18 | # 对传入的字符进行编码，并返回编码结果
19 | value = ''.join(['0' + bin(ord(t))[2:] for t in value])
20 | inputs = self.shift(value, threshold)
21 | result = ''
22 | for i in inputs:
23 | if i == '0' * threshold:
24 | # 全为0则视为补位
25 | encoding = 65
26 | else:
27 | encoding = 0
28 | for key, v in enumerate(i):
29 | # 二进制数按权相加得到十进制数
30 | val = int(v) * pow(2, len(i) - 1 - key)
31 | encoding += val
32 | # 从对照表中取值
33 | after = self.comparison.get(str(encoding))
34 | result += after
35 | return result
36 |
37 | def decode(self, value: str, threshold: int, group: int = 8) -> str:
38 | """对传入的字符串解码，得到原字符"""
39 | result = []
40 | coder = self.str2binary(value, threshold=threshold)
41 | bins = self.shift(''.join(coder), group)
42 | for i in range(len(bins)):
43 | binary = ''.join(bins)[i * group: (i + 1) * group]
44 | if binary != '0' * group:
45 | # 如果全为0则视为补位，无需处理
46 | result.append(''.join([chr(i) for i in [int(b, 2) for b in binary.split(' ')]]))
47 | return ''.join(result)
48 |
49 | def str2binary(self, value: str, threshold: int = 6) -> list:
50 | """字符串转十进制再转二进制"""
51 | result = []
52 | values = self.str2decimal(value)
53 | for i in values:
54 | # 判断是否为补位
55 | if i == '65':
56 | val = '0' * threshold
57 | else:
58 | val = '{:0{threshold}b}'.format(int(i), threshold=threshold)
59 | result.append(val)
60 | return result
61 |
62 | @staticmethod
63 | def shift(value: str, threshold: int, group: int = 24) -> list:
64 | """位数转换"""
65 | remainder = len(value) % group
66 | if remainder:
67 | # 如果有余数，则说明需要用0补位
68 | padding = '0' * (group - remainder)
69 | value += padding
70 | # 按照threshold值切割字符
71 | result = [value[i:i + threshold] for i in range(0, len(value), threshold)]
72 | return result
73 |
74 | def str2decimal(self, value: str) -> list:
75 | """使用Base64编码表做对照，取出字符串对应的十进制数"""
76 | keys = []
77 | for t in value:
78 | for k, v in self.comparison.items():
79 | if v == t:
80 | keys.append(k)
81 | return keys
82 |
83 |
84 | if __name__ == '__main__':
85 | # threshold 的值建议为 4/5/6
86 | cus = Custom64()
87 | encode_res = cus.encode('async', threshold=5)
88 | decode_res = cus.decode(encode_res, threshold=5)
89 | print(encode_res)
90 | print(decode_res)
--------------------------------------------------------------------------------
/09/captcha/clicks.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
101 |
108 |
109 |
102 |
103 |
104 |
105 |
106 |
107 | 提示：页面记录绿幕中的鼠标轨迹，并在下方显示
110 |
111 |
112 |
49 |
53 | 点选验证码(Canvas)
50 |点选验证码在图片显示4-5个字，要求用户依次点击2-3个字
51 |文字可以用其他图形代替，也可以在此基础上将文字进行变形、模糊处理
52 |
54 |
55 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/04/4-3/4-3-2/template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
56 |
77 |
78 |
88 |
96 | “挑战者”徒步旅行活动安全公告
89 |
90 |
94 |
95 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/09/captcha/nomal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
49 |
53 | 字符验证码
50 |字符验证码主要以数字和英文字母为主，辅以部分干扰线和彩色噪点
51 |并且对字符元素使用随机颜色，甚至是角度倾斜
52 |
54 |
55 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
--------------------------------------------------------------------------------
/09/captcha/words.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
56 |
87 |
88 |
49 |
53 | 字符验证码
50 |字符验证码主要以数字和英文字母为主，辅以部分干扰线和彩色噪点
51 |并且对字符元素使用随机颜色，甚至是角度倾斜
52 |
54 |
55 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
--------------------------------------------------------------------------------
/09/captcha/mathes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
56 |
87 |
88 |
49 |
53 | 计算型验证码
50 |计算型验证码主要通过主观的数学计算区分人类和机器
51 |通常只有加、减、乘，而没有除，因为除法的结果不适合用来验证。
52 |
54 |
55 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/09/captcha/sliders.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
56 |
87 |
88 |
50 |
54 | 滑动验证码
51 |滑动验证码属于行为验证码，需要通过人为滑动指定的滑块才能通过验证
52 |滑块会有起点与终点，相比“眼睛”来说，手动的耗时更长
53 |
55 |
56 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/09/captcha/jigsawCanvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
57 |
89 |
90 |
50 |
54 | 滑动拼图验证码(Canvas)
51 |Canvas 将背景和缺口合并
52 |要将指定的缺块滑到缺口处，才能通过验证
53 |
55 |
56 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/09/captcha/js/jigsawCanvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
57 |
87 |
88 |
50 |
54 | 滑动拼图验证码(Canvas)
51 |Canvas 将背景和缺口合并
52 |要将指定的缺块滑到缺口处，才能通过验证
53 |
55 |
56 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/09/captcha/js/clicks.js:
--------------------------------------------------------------------------------
1 | /* 点选验证码 */
2 |
3 | getChinese=function(){
4 | // 随机汉字
5 | eval( "var singleStr=" + '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"');
6 | return singleStr;
7 | }
8 |
9 | $(function(){
10 | var clickCanvas = document.getElementById('clickCanvas');
11 | var cvas = clickCanvas.getContext('2d')
12 | var divTips = document.getElementById('divTips');
13 | var images = new Image();
14 | var fontSizes = 26; // 字体大小
15 | images.src = 'images/3.jpg';
16 |
17 | images.onload = function doCanvas(){
18 | cvas.drawImage(images, 0, 0, clickCanvas.width, clickCanvas.height);
19 | cvas.save();
20 | cvas.font = `${fontSizes}px Arial`;
21 | cvas.fillStyle = '#ffffff';
22 | var positions = []
23 | var chineseStr = [];
24 | var shifted = [];
25 | var targets = [];
26 | var randTimes = 0;
27 | var userClick = [];
28 | var clickTimes = 0;
29 |
30 | function getPosition(){
31 | // X 需要按文字顺序安排
32 | var positionX_1 = randNumber(20, 50);
33 | var positionX_2 = randNumber(70, 170);
34 | var positionX_3 = randNumber(190, 250);
35 | var positionX_4 = randNumber(270, 370);
36 | positions = [positionX_1, positionX_2, positionX_3, positionX_4]
37 | } getPosition();
38 |
39 | function chineseArray(){
40 | for(var i=0;i<4;i++){
41 | // 获取汉字并生成一定规律的随机座标
42 | var positionCommonY = randNumber(50, 220); // Y 随机
43 | var positionX = positions[i];
44 | var chinese = getChinese();
45 | var chineseStrPosition = {chinese, positionX, positionCommonY}
46 | chineseStr.push(chineseStrPosition)
47 | }
48 | console.log(chineseStr)
49 | }chineseArray();
50 |
51 | function canvasChinese(){
52 | // 绘制文字
53 | for(var i=0;i<4;i++){
54 | data = chineseStr[i]
55 | cvas.fillText(data.chinese, data.positionX, data.positionCommonY)
56 | }
57 | }canvasChinese();
58 |
59 | function chinessCopyShow(){
60 | // 汉字坐标数组拷贝
61 | var chineseStrCopy = []
62 | for(var i=0;i
57 |
87 |
88 |
50 |
54 | 滑动拼图验证码
51 |滑动拼图验证码中，目标位置是随机的
52 |要将指定的缺块滑到缺口处，才能通过验证
53 |
55 |
56 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/07/7-4/template/details.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
57 |
88 |
89 |
76 |
79 | 华为 P30 发布会在上海举行
77 |华为P30系列新机国行版发布会，同时EMUI9.1操作系统或许也将同步面向国内消费者。
78 |
80 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
--------------------------------------------------------------------------------
/04/4-3/4-3-2/static/md5.js:
--------------------------------------------------------------------------------
1 | /*
2 | * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
3 | * Digest Algorithm, as defined in RFC 1321.
4 | * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
5 | * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
6 | * Distributed under the BSD License
7 | * See http://pajhome.org.uk/crypt/md5 for more info.
8 | */
9 |
10 | /*
11 | * Configurable variables. You may need to tweak these to be compatible with
12 | * the server-side, but the defaults work in most cases.
13 | */
14 | var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
15 | var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */
16 | var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */
17 |
18 | /*
19 | * These are the functions you'll usually want to call
20 | * They take string arguments and return either hex or base-64 encoded strings
21 | */
22 | function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
23 | function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
24 | function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
25 | function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
26 | function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
27 | function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
28 |
29 | /*
30 | * Perform a simple self-test to see if the VM is working
31 | */
32 | function md5_vm_test()
33 | {
34 | return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
35 | }
36 |
37 | /*
38 | * Calculate the MD5 of an array of little-endian words, and a bit length
39 | */
40 | function core_md5(x, len)
41 | {
42 | /* append padding */
43 | x[len >> 5] |= 0x80 << ((len) % 32);
44 | x[(((len + 64) >>> 9) << 4) + 14] = len;
45 |
46 | var a = 1732584193;
47 | var b = -271733879;
48 | var c = -1732584194;
49 | var d = 271733878;
50 |
51 | for(var i = 0; i < x.length; i += 16)
52 | {
53 | var olda = a;
54 | var oldb = b;
55 | var oldc = c;
56 | var oldd = d;
57 |
58 | a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
59 | d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
60 | c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819);
61 | b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
62 | a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
63 | d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426);
64 | c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
65 | b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
66 | a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416);
67 | d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
68 | c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
69 | b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
70 | a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682);
71 | d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
72 | c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
73 | b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329);
74 |
75 | a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
76 | d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
77 | c = md5_gg(c, d, a, b, x[i+11], 14, 643717713);
78 | b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
79 | a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
80 | d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083);
81 | c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
82 | b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
83 | a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438);
84 | d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
85 | c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
86 | b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501);
87 | a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
88 | d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
89 | c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473);
90 | b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
91 |
92 | a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
93 | d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
94 | c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562);
95 | b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
96 | a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
97 | d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353);
98 | c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
99 | b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
100 | a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174);
101 | d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
102 | c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
103 | b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189);
104 | a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
105 | d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
106 | c = md5_hh(c, d, a, b, x[i+15], 16, 530742520);
107 | b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
108 |
109 | a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
110 | d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415);
111 | c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
112 | b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
113 | a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571);
114 | d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
115 | c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
116 | b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
117 | a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359);
118 | d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
119 | c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
120 | b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649);
121 | a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
122 | d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
123 | c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259);
124 | b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
125 |
126 | a = safe_add(a, olda);
127 | b = safe_add(b, oldb);
128 | c = safe_add(c, oldc);
129 | d = safe_add(d, oldd);
130 | }
131 | return Array(a, b, c, d);
132 |
133 | }
134 |
135 | /*
136 | * These functions implement the four basic operations the algorithm uses.
137 | */
138 | function md5_cmn(q, a, b, x, s, t)
139 | {
140 | return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
141 | }
142 | function md5_ff(a, b, c, d, x, s, t)
143 | {
144 | return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
145 | }
146 | function md5_gg(a, b, c, d, x, s, t)
147 | {
148 | return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
149 | }
150 | function md5_hh(a, b, c, d, x, s, t)
151 | {
152 | return md5_cmn(b ^ c ^ d, a, b, x, s, t);
153 | }
154 | function md5_ii(a, b, c, d, x, s, t)
155 | {
156 | return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
157 | }
158 |
159 | /*
160 | * Calculate the HMAC-MD5, of a key and some data
161 | */
162 | function core_hmac_md5(key, data)
163 | {
164 | var bkey = str2binl(key);
165 | if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
166 |
167 | var ipad = Array(16), opad = Array(16);
168 | for(var i = 0; i < 16; i++)
169 | {
170 | ipad[i] = bkey[i] ^ 0x36363636;
171 | opad[i] = bkey[i] ^ 0x5C5C5C5C;
172 | }
173 |
174 | var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
175 | return core_md5(opad.concat(hash), 512 + 128);
176 | }
177 |
178 | /*
179 | * Add integers, wrapping at 2^32. This uses 16-bit operations internally
180 | * to work around bugs in some JS interpreters.
181 | */
182 | function safe_add(x, y)
183 | {
184 | var lsw = (x & 0xFFFF) + (y & 0xFFFF);
185 | var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
186 | return (msw << 16) | (lsw & 0xFFFF);
187 | }
188 |
189 | /*
190 | * Bitwise rotate a 32-bit number to the left.
191 | */
192 | function bit_rol(num, cnt)
193 | {
194 | return (num << cnt) | (num >>> (32 - cnt));
195 | }
196 |
197 | /*
198 | * Convert a string to an array of little-endian words
199 | * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
200 | */
201 | function str2binl(str)
202 | {
203 | var bin = Array();
204 | var mask = (1 << chrsz) - 1;
205 | for(var i = 0; i < str.length * chrsz; i += chrsz)
206 | bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
207 | return bin;
208 | }
209 |
210 | /*
211 | * Convert an array of little-endian words to a string
212 | */
213 | function binl2str(bin)
214 | {
215 | var str = "";
216 | var mask = (1 << chrsz) - 1;
217 | for(var i = 0; i < bin.length * 32; i += chrsz)
218 | str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
219 | return str;
220 | }
221 |
222 | /*
223 | * Convert an array of little-endian words to a hex string.
224 | */
225 | function binl2hex(binarray)
226 | {
227 | var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
228 | var str = "";
229 | for(var i = 0; i < binarray.length * 4; i++)
230 | {
231 | str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
232 | hex_tab.charAt((binarray[i>>2] >> ((i%4)*8 )) & 0xF);
233 | }
234 | return str;
235 | }
236 |
237 | /*
238 | * Convert an array of little-endian words to a base-64 string
239 | */
240 | function binl2b64(binarray)
241 | {
242 | var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
243 | var str = "";
244 | for(var i = 0; i < binarray.length * 4; i += 3)
245 | {
246 | var triplet = (((binarray[i >> 2] >> 8 * ( i %4)) & 0xFF) << 16)
247 | | (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
248 | | ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
249 | for(var j = 0; j < 4; j++)
250 | {
251 | if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
252 | else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
253 | }
254 | }
255 | return str;
256 | }
257 |
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
1 |
2 |
81 |
90 |
82 | 
83 |
88 |
89 |
83 |
88 |
91 |
100 |
92 | 
93 |
98 |
99 |
93 |
98 |
101 |
110 |
102 |
103 |
108 |
109 |
103 |
108 |
111 |
120 |
121 |
112 | 
113 |
118 |
119 |
113 |
118 |
122 |
131 |
123 | 
124 |
129 |
130 |
124 |
129 |
132 |
141 |
133 | 
134 |
139 |
140 |
134 |
139 |
142 |
151 |
143 | 
144 |
149 |
150 |
144 |
149 |
152 |
161 |
153 |
154 |
159 |
160 |
154 |
159 | -
5 |
-
481 |
- 482 |
- 483 |
- 484 |
- 485 |
- 486 |