JSONP及内容安全策略CSP

前言

今天主要讲讲 JSONP 的实现及内容安全策略 CSP,JSONP 跨域方案是很老的一种形式，我们用封装好的 ajax 基本都提供了这个功能，例如 jquery 的 jsonp，请看之前文章：https://www.haorooms.com/post/jquery_ajax_wg，及 跨域解决方案之 JSONP, 都有提及，但是究竟怎么实现的，没有写，今天主要写一下 JSONP 的简单实现，及内容安全策略 CSP，就是一个网站，可以设置运行访问的域名安全策略。

JSONP 实现

JSONP 的原理非常简单，就是 HTML 标签中，很多带 src 属性的标签都可以跨域请求内容，比如我们熟悉的 img 图片标签。同理，script 标签也可以，利用 script 标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的，来执行跨域的 javascript 代码。

function jsonp(url, data = {}, cb = 'HaoroomsJsonCallback') {data[cb] = cb;
  // 拼装参数
  const params = [];
  for (let key in data) {params.push(`${key}=${data[key]}`);
  }
  const script = document.createElement('script');
  script.src = url + '?' + params.join('&');
  script.defer = true;
  document.body.appendChild(script);
  return new Promise((resole, reject) => {
    try {window[cb] = function (data) {resole(data);
      };
    } catch (error) {reject(error);
    } finally {
      // 每次删除
      script.parentNode.removeChild(script);
    }
  });
}
jsonp('https://www.haorooms.com/download/jsonptest.js', { format: 'jsonp'}).then((res) => {console.log(res);
  }
);

上面就是 jsonP 的简单实现，但是有时候我们用 JSONP 在某写网站请求也是限制了，会提示如下

Refused to load the script 'https://www.haorooms.com/download/jsonptest.js?format=jsonp&HaoroomsJsonCallback=HaoroomsJsonCallback' because it violates the following Content Security Policy directive

jsonp @ VM87:12
(anonymous) @ VM87:26

CSP 内容安全策略

为了缓解很大一部分潜在的跨脚本问题，浏览器的扩展程序系统引入了内容安全策略（CSP）的一般概念；简单来说这一技术就是：

开发者明确告诉客户端（制定比较严格的策略和规则），哪些外部资源是可以加载和执行的，即使攻击者发现漏洞，但是它是没办法注入脚本。

开发人员可以使用这种工具以各种方式锁定其应用程序，降低内容注入漏洞（如跨站点脚本）的风险，并降低其应用程序执行的权限

怎么启用 CSP

一种是通过 HTTP 头信息的 Content-Security-Policy 的字段。

即，请求头里面设置 Content-Security-Policy，例如如下：

cache-control: private, must-revalidate, no-cache, no-store, max-age=0
content-encoding: gzip
content-security-policy: default-src * blob:; img-src * data: blob: resource: t.captcha.qq.com cstaticdun.126.net necaptcha.nosdn.127.net; connect-src * wss: blob: resource:; frame-src 'self' *.zhihu.com mailto: tel: weixin: *.vzuu.com mo.m.taobao.com getpocket.com note.youdao.com safari-extension://com.evernote.safari.clipper-Q79WDW8YH9 zhihujs: captcha.guard.qcloud.com pos.baidu.com dup.baidustatic.com openapi.baidu.com wappass.baidu.com passport.baidu.com *.cme.qcloud.com vs-cdn.tencent-cloud.com t.captcha.qq.com c.dun.163.com; script-src 'self' blob: *.zhihu.com g.alicdn.com qzonestyle.gtimg.cn res.wx.qq.com open.mobile.qq.com 'unsafe-eval' unpkg.zhimg.com unicom.zhimg.com resource: captcha.gtimg.com captcha.guard.qcloud.com pagead2.googlesyndication.com cpro.baidustatic.com pos.baidu.com dup.baidustatic.com i.hao61.net 'nonce-ecc767c2-89be-4f35-8d93-68033f709c9d' hm.baidu.com zz.bdstatic.com b.bdstatic.com imgcache.qq.com vs-cdn.tencent-cloud.com gw.alipayobjects.com ssl.captcha.qq.com t.captcha.qq.com cstaticdun.126.net c.dun.163.com ac.dun.163.com/ acstatic-dun.126.net; style-src 'self' 'unsafe-inline' *.zhihu.com unicom.zhimg.com resource: captcha.gtimg.com ssl.captcha.qq.com t.captcha.qq.com cstaticdun.126.net c.dun.163.com ac.dun.163.com/ acstatic-dun.126.net
content-type: text/html; charset=utf-8

二、通过网页的 标签

例如如下：

这样，这个 cdn 会报错，提示违反了安全策略。

CSP 的意义

防 XSS 等攻击的利器。CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。