您现在的位置是:主页 > news > 如何创建广告网站/营销工具

如何创建广告网站/营销工具

admin2025/5/20 9:32:19news

简介如何创建广告网站,营销工具,微信网站什么做,新手制作网页的方法75CDN 是一个由奇舞团维护的静态资源托管平台,创立至今已经稳定运行了一年多的时间。近期我们增加了 SRI 的支持,作为国内首个提供 SRI 服务的静态资源库了,也算是为 75CDN 一周年庆生吧。 SRI 全称是 Subresource Integrity,是用…

如何创建广告网站,营销工具,微信网站什么做,新手制作网页的方法75CDN 是一个由奇舞团维护的静态资源托管平台,创立至今已经稳定运行了一年多的时间。近期我们增加了 SRI 的支持,作为国内首个提供 SRI 服务的静态资源库了,也算是为 75CDN 一周年庆生吧。 SRI 全称是 Subresource Integrity,是用…

75cdn.png

75CDN 是一个由奇舞团维护的静态资源托管平台,创立至今已经稳定运行了一年多的时间。近期我们增加了 SRI 的支持,作为国内首个提供 SRI 服务的静态资源库了,也算是为 75CDN 一周年庆生吧。

SRI 全称是 Subresource Integrity,是用来解决由于 CDN 资源被污染而导致的 XSS 漏洞的方案。当浏览器检测加载脚本签名与给定的签名不一致时,会拒绝执行该脚本。目前浏览器的支持情况如下:

浏览器支持版本
Chrome 以及 Chrome for Android45+
Firefox 以及 Firefox Mobile43+
Safari 以及 iOS Safari11+
IE 以及 Edge不支持
UC 浏览器不支持

注: 数据来源于 CanIUse 和 MDN

<!--more-->

开启 SRI 功能

SRI 开启需要有两个条件:首先需要资源为同域或者开启 CORS 设置,然后需要在<script>中提供签名以供校验。由于 SRI 在不匹配的时候就不执行脚本,考虑到这个比较“强力”,75CDN 目前需要手动开启 SRI 格式的显示。75CDN 支持两种方式开启显示:

  • 在 url 上增加 ?sri=1 临时开启当前模块的 SRI 支持,例如:https://cdn.baomitu.com/jquer...。

  • 在控制台中执行 cdn.sri = true 永久开启全站模块的 SRI 支持,设置为 false 则可以关闭。

开启后直接在具体资源地址右侧选择“复制<script>标签”或者“复制<link>标签”按钮即可获得带有 SRI 支持的 HTML 代码,例如:

<script crossorigin="anonymous" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" src="http://lib.baomitu.com/jquery/3.2.1/jquery.min.js"
><script>

对于没有提供 SRI 服务的 CDN 也可以自己计算,其中 SRI Hash Generator 就是一个帮助开发者计算资源签名的平台。

SRI 的使用

刚才也说到了,当资源不匹配的时候浏览器是会拒绝执行脚本的。这虽然保障了网页的安全性,但是这样让页面变的不可用对用户来说其实是极不友好的。考虑到这种情况我们最好在资源加载失败后提供一个 fallback 方案,例如请求本站资源。同时一般网络劫持具有区域性特征,我们也可以打点上报case,可以统计查看被劫持情况。下面是个简单的例子:

var s = document.createElement('script');
s.crossOrigin = 'anonymous';
s.integrity="sha384-qu2J8HSjv8EaYlbzBdbVeJncuCmfBqnZ4h3UIBZ9WTZ/5Wrqt0/9hofL0046NCkc";
s.onerror = function() {// 打点上报劫持数据var img = document.createElement('img');img.src = 'http://xxx.com?url='+s.src;document.body.appendChild(img);// 更换其他域名下载地址s.src = 'http://zeptojs.com/zepto.min.js';  
};
s.onload = function() {console.log($);
}
s.src = 'http://lib.baomitu.com/zepto/1.2.0/zepto.min.js';
document.head.appendChild(s);

CSP 3

除了 SRI 能够保障网站安全的引入 CDN 资源之外,其实 CSP 也能帮助我们防止 XSS 攻击。CSP 全称是 Content Security Policy,目前协议已经发展到 Level 3 版本了。它是一个用来定义页面可以加载或执行哪些资源的协议,通过限制可能不安全资源的加载来达到安全的目的。

它的一个特色是向后兼容,不支持的浏览器设置了也没什么问题。可以在请求头中配置不同的加载策略,同时还天然支持对不安全资源加载进行上报。在 CSP2 中协议支持了可以使用白名单的形式配置安全资源,例如:

Content-Security-Policy: script-src 'sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f'

可以看到 CSP 的资源白名单配置的签名和 SRI 的签名是一致的,而且由于向后兼容不影响不支持的版本,所以我们也可以利用起来。关于 CSP 的更多内容可以查看文末的参考资料。

总结

75CDN 已经一周年了,除了给大家带来了 SRI 保障大家的资源加载安全之外,我们还会为大家带来更稳定的服务以及更多使用的功能,请大家多多支持!

参考资料:

  • Subresource Integrity 介绍

  • Content Security Policy 介绍

  • Content Security Policy Level 2 介绍

  • CSP3策略简介