可能是东半球最详解的web前端安全相关知识

sarva 发布于2019-08-20 17:26 / 2552人阅读

摘要：攻击能获取页面数据劫持前端逻辑发送请求，偷取网站任意数据用户资料欺骗用户，所以是我们特别需要注意的前端安全问题。攻击可能来源可以通过动态节点内容属性富文本来对页面进行攻击。内容安全策略，用于指定哪些内容可以执行。

XSS

XSS全称是跨站脚本攻击(Cross Site Scripting)，所以我们可以缩写成CSS，下面我们开始介绍CSS，先讲选择器。听着是不是很奇怪，为了与层叠样式表区分开来，我们选择XSS做为其缩写。 XSS攻击能获取页面数据、cookie、劫持前端逻辑、发送请求，偷取网站任意数据、用户资料、欺骗用户，所以是我们特别需要注意的前端安全问题。我在腾讯云上架了一个网站，专门用来承接各种攻击，欢迎来玩。 XSS攻击能获取页面数据、cookie、劫持前端逻辑、发送请求，偷取网站任意数据、用户资料、欺骗用户，所以是我们特别需要注意的前端安全问题。

XSS攻击分为反射型XSS攻击，直接通过URL注入、存储型XSS攻击 存储到DB后读取时注入。

XSS攻击可能来源

可以通过 动态HTML节点内容、 HTML属性、Javascript、 富文本来对页面进行攻击。

浏览器自带防御措施

X-XSS-Protection, 0

http://123.207.46.233/?from=



http://123.207.46.233/?from=111";alert(1);"

发出请求时，XSS代码出现在URL里，作为输入提交到服务器端，服务器端解析后响应，XSS代码随浏览器一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，故叫反射性XSS。

localhost:3000/?xss=

浏览器防御功能很有线，只能访问反射型攻击且不能防御来自富文本的攻击。

HTML内容和属性转译

function html_encode(str) {
    if (!str) {
        return str;
    }
     return str.replace(/[<>&""]/g, (all) => {
         return {
             "<": "<",
             ">": ">",
             "&": "&",
             """: """
             """: "'"
         }[all]
     });
}

但是用以上的方法并不能解决所有的问题，如果将用于的输入当成一个js变量，我们

var escapeForJs = function(str) {
    if (!str) {
        return ""
    }
    str = str.replace(//g, "");
    str = str.replace(/"/g, """);
    return str;
}

富文本防御

使用黑名单风险特别大，我们只能使用白名单来过滤。我们首先要知道这个标签是否合法，其次看标签上的
属性是否合法。

var cheerio = require("cheerio");
var xssFilter = function (html) {
    if (!html) {
        return "";
    }

    var $ = cheerio.load(html);
    var whiteList = {
        "img": ["src"],
        "font": ["color", "size"],
        "a": ["href"]
    }


    $("*").each(function (index, elem) {
        let name = elem.name;
        if(!whiteList[name]) {
            $(elem).remove();
            return;
        }
        for (var attr in elem.attribs) {
            if (whiteList[name].indexOf("attr") === -1) {
                $(elem).attr(attr, null);
            }
        }
    })
}

下面给大家介绍一个神器xss模块，var xss = require("xss")，满足你对XSS的一切幻想。

CSP

Content Security Policy内容安全策略，用于指定哪些内容可以执行。
例如：

Content-Security-Policy: default-src "self" // 只允许同域的脚本执行

Cookie特性

cookie是用于前端数据存储，后端通过http头设置，请求时通过http头传给后端，前端可以读写，遵守同源策略（协议、域名、端口全部一致）。

域名  有效期  路径  http-only  secure(https)  

存储个性化设置
存储未登陆时用户的唯一标识符
存储已登陆用户的凭证
存储其他业务数据

用户ID + 签名

sessionId

cookieID

签名防串改
私有变化
http-only

CSRF攻击

cross site request forgy，跨站请求伪造

用户登陆A网站、A网站确认身份、B网站向A网站发起请求（带A网站身份）

利用用户登陆态
用户并不知情
完成业务请求

禁用第三方的cookie，same-site

通过referer

云服务器 GPU云服务器 web前端是做什么的 web前端工程师是干什么的 web前端工程师是做什么的 web前端开发工程师是做什么的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83583.html

可能是东半球最详解的web前端安全相关知识

摘要：攻击能获取页面数据劫持前端逻辑发送请求，偷取网站任意数据用户资料欺骗用户，所以是我们特别需要注意的前端安全问题。攻击可能来源可以通过动态节点内容属性富文本来对页面进行攻击。内容安全策略，用于指定哪些内容可以执行。 XSS XSS全称是跨站脚本攻击(Cross Site Scripting)，所以我们可以缩写成CSS，下面我们开始介绍CSS，先讲选择器。听着是不是很奇怪，为了与层叠样式表...

oysun 2019-08-01 17:02 评论0 收藏0
网络与安全

摘要：面试网络了解及网络基础对端传输详解与攻防实战本文从属于笔者的信息安全实战中渗透测试实战系列文章。建议先阅读下的网络安全基础。然而，该攻击方式并不为大家所熟知，很多网站都有的安全漏洞。面试 -- 网络 HTTP 现在面试门槛越来越高，很多开发者对于网络知识这块了解的不是很多，遇到这些面试题会手足无措。本篇文章知识主要集中在 HTTP 这块。文中知识来自《图解 HTTP》与维基百科，若...

Integ 2019-06-21 16:40 评论0 收藏0
学习Python的建议

摘要：如果初学者接触的第一门语言是，学习曲线则会平滑得多，掌握一些基本语法和内置的数据结构，已经可以上手写一些小工具或者小型应用。如果你的学习时间充足，我的建议是一定要学数据结构和算法。前言 Python是最容易入门的编程语言，没有之一。如果初学者接触的第一门语言是C或者C++，对他们来说最难的不是语法，而是容易出现内存泄漏、指针等问题。有时候排查这些问题对初学者的打击很大，尤其是没掌握排...

eechen 2019-07-30 17:39 评论0 收藏0
详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
基础 - 收藏集 - 掘金

摘要：的语言的动态性意味着我们可以使用以上种数据类型表示变换过渡动画实现案例前端掘金以下所有效果的实现方式均为个人见解，如有不对的地方还请一一指出。读 zepto 源码之工具函数 - 掘金Zepto 提供了丰富的工具函数，下面来一一解读。源码版本本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性。目标对象的同名属性会被源对象的属性...

wuaiqiu 2019-08-15 10:49 评论0 收藏0