Day307:如果一个页面突然出现了一段广告，可能是什么原因，怎么解决?

每日一题会在下午四点在交流群集中讨论，五点小程序中更新答案欢迎大家在下方发表自己的优质见解

二维码加载失败可点击小程序二维码

扫描下方二维码，收藏关注，及时获取答案以及详细解析，同时可解锁800+道前端面试题。

一、XSS(Cross Site Scripting)跨站脚本攻击

1.1 什么是 XSS 攻击

XSS 攻击一般指攻击者通过在网页注入恶意脚本，当用户浏览网页时，恶意脚本执行，控制用户浏览器行为的一种攻击方式。

1.2 XSS 攻击分类

反射型 XSS 攻击

通过 URL 链接点击触发，是一次性行为，本质上是服务器端没有对用户恶意输入做安全处理，直接反射输入内容。如输入baidu.com/?id=<script>alert(1)</script>，弹出弹窗内容为 1。谷歌这类安全性高的浏览器基本可以自动处理这类攻击。

存储型 XSS 攻击

顾名思义，一般涉及后端数据存储，常见场景意见反馈模块，前端通过接口把用户信息传给后端，当后台管理系统展示反馈意见时，就会读取数据库中这些数据，当这些数据含有攻击的脚本，那就造成了存储型 XSS 攻击。这种攻击是持久性的。

DOM 型 XSS 攻击

客户端脚本程序可以动态地检查和修改页面内容，而不依赖于服务端的数据。可能引起 DOM 型 XSS 攻击。如：使用innerHTML、document.write等。

1.3 XSS 防御

浏览器自带的防御 X-XSS-Protection。

目前支持 IE、Chrome、Safari 浏览器，可检测到 XSS 攻击时，阻止页面加载。使用如下：

X-XSS-Protection: 0
X-XSS-Protection: 1
X-XSS-Protection: 1; mode=block
X-XSS-Protection: 1; report=<reporting-uri>

X-XSS-Protection 为 0 表示禁止使用 XSS 过滤，为 1 表示允许使用 XSS 过滤。mode=block：若检测到 XSS 攻击，阻止页面加载。report=<reporting-URI> (仅限 Chromium)：若检测到跨站点脚本攻击，浏览器将清理页面并报告违规行为。使用 CSP report-uri 指令发送报告。

防御范围：反射型 XSS 攻击

HTML 标签转义

将标签符号"<"，">"等全局转义

const escapeHtml = (str) => {
  str = str
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quto;")
    .replace(/'/g, "&#39;")
    .replace(/ /g, "&#32;");
  return str;
};

白名单过滤

大体思路将 HTML 字符串解析成实体对象，若白名单里属性存在在该实体对象中则做相应的处理。这里使用 cheerio 将 HTML 解析成实体。

const whiteList = {
  img: ["src"],
};
const xssFilter = (html) => {
  if (!html) return "";
  const $ = cheerio.load(html, {
    normalizeWhitespace: true,
    xmlMode: true,
  });
  $("*").each((index, elem) => {
    if (!whiteList[elem.name]) {
      $(elem).remove();
      return;
    }
    for (var attr in elem.attributes) {
      if (whiteList[elem.name].indexOf(attr) === -1) {
        $(elem).attr(attr, null);
      }
    }
  });
  return $.html();
};

csp(Content Security Policy)

实质就是白名单制度，开发者明确告诉客户端哪些外部资源可以加载和执行。

<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:"
/>

以上代码说明：

脚本：只信任当前域名
<object>标签：不信任任何 URL，即不加载任何资源
样式表：只信任cdn.example.org和third-party.org
框架（frame）：必须使用 HTTPS 协议加载
其他资源：没有限制

二、HTTP 挟持

2.1 什么是 HTTP 挟持

在运营商的路由器节点上，设置协议检测，一旦发现是 HTTP 请求且是 HTML 类型请求，则拦截处理。常见有两种：

返回 302 让用户浏览器跳转到另外的地址
在服务器返回的 HTML 中插入 JS 或 DOM 节点

2.2 HTTP 挟持防御

向运营商投诉
在 html 上加上 <meta http-equiv="Cache-Control" content="no-siteapp"> <meta http-equiv="Cache-Control" content="no-transform " />禁止转码
使用 HTTPS，HTTPS 增加了 SSL 协议，会对数据进行加密。
白名单过滤。大体思路是检查所有外链是否属于白名单。
监听 DOM 节点插入及 DOM 节点移除事件

el.addEventListener("DOMNodeInserted", function (e) {
  console.log(e.srcElement);
});

el.addEventListener("DOMNodeRemoved", function (e) {
  console.log(e.srcElement);
});

lgwebdream / FE-Interview