前言
今天主要讲讲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:26CSP内容安全策略
为了缓解很大一部分潜在的跨脚本问题，浏览器的扩展程序系统引入了内容安全策略（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 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。