公告:携程集团2022年秋季校园招聘会内推!!

JSONP及内容安全策略CSP

2458次浏览

前言

今天主要讲讲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

二、通过网页的标签

例如如下:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Security-Policy"  content="script-src 'self'"/>
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

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

CSP的意义

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

相关文章: