CSP & CORS

csp-cors.md

CSP & CORS

CSP 基于白名单来源，因为此方法可明确指示浏览器将特定的资源集视为可接受的资源，并拒绝其余资源。

https://developers.google.com/web/fundamentals/security/csp/

TL;DR

• 使用白名单告诉客户端允许加载和不允许加载的内容。
• 了解可使用哪些指令。
• 了解这些指令接受哪些关键字。
• 内联代码和 eval() 被视为是有害的。
• 向服务器举报政策违规行为，以免执行这些行为。

https://content-security-policy.com/

Content-Security-Policy

https://www.w3.org/TR/CSP2/

https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP/Using_Content_Security_Policy

内容安全策略 (CSP) 是一个额外的安全层，有助于检测和减轻某些类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击。

这些攻击用于从数据窃取到现场污染或恶意软件分发的一切。

    
script-src *
img-src *




script-src 'self';

script-src 'self' www.google-analytics.com ajax.googleapis.com;

default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';

https://developers.google.com/web/fundamentals/security/csp/

    
Content-Security-Policy: default-src https://cdn.example.net; child-src 'none'; object-src 'none'

Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='

Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;


Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;


Content-Security-Policy: default-src https:; script-src https: 'unsafe-inline'; style-src https: 'unsafe-inline'

    
<meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">

<meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src *">

https://github.com/xgqfrms/learning/edit/gh-pages/index.html

snow.js

https://learning.xgqfrms.xyz/CSS3/Canvas/snow.js

(function() {
    function ready(fn) {
        if(document.readyState != 'loading') {
            fn();
        }else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }

    function makeSnow(el) {
        var ctx = el.getContext('2d');
        var width = 0;
        var height = 0;
        var particles = [];
        var Particle = function() {
            this.x = this.y = this.dx = this.dy = 0;
            this.reset();
        }
        Particle.prototype.reset = function() {
            this.y = Math.random() * height;
            this.x = Math.random() * width;
            this.dx = (Math.random() * 1) - 0.5;
            this.dy = (Math.random() * 0.5) + 0.5;
        }
        function createParticles(count) {
            if (count != particles.length) {
                particles = [];
                for (var i = 0; i < count; i++) {
                    particles.push(new Particle());
                }
            }
        }
        function onResize() {
            width = window.innerWidth;
            height = window.innerHeight;
            el.width = width;
            el.height = height;
            createParticles((width * height) / 10000);
        }
        function updateParticles() {
            ctx.clearRect(0, 0, width, height);
            ctx.fillStyle = '#f6f9fa';
            particles.forEach(function(particle) {
                particle.y += particle.dy;
                particle.x += particle.dx;
                if (particle.y > height) {
                    particle.y = 0;
                }
                if (particle.x > width) {
                    particle.reset();
                    particle.y = 0;
                }
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
                ctx.fill();
            });
            window.requestAnimationFrame(updateParticles);
        }
        onResize();
        updateParticles();
        window.addEventListener('resize', onResize);
    }
    ready(function() {
        var canvas = document.getElementById('snow');
        makeSnow(canvas);
    });
})();

document.readyState

document.readyState
// "complete"

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState

一个document 的 Document.readyState 属性描述了文档的加载状态。

一个文档的 readyState 可以是以下之一：

1. loading / 加载

document 仍在加载。

2. interactive / 互动
文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

3. complete / 完成
文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

当这个属性的值在 document 对象上更改一个readystatechange 事件时触发。

当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。

https://developer.mozilla.org/en-US/docs/Web/Events/readystatechange

https://developer.mozilla.org/zh-CN/docs/Web/Events/readystatechange

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/readyState

DOMContentLoaded

https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded

图解

https://varvy.com/performance/document-ready-state.html

MDN 样式指南

https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Content/Style_guide

选择标题与缩略名(slug)

https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Content/Style_guide#选择标题与缩略名(slug)

readystatechange

https://developer.mozilla.org/zh-CN/docs/Web/Events/readystatechange

准备状态更变

https://developer.mozilla.org/zh-CN/docs/preview-wiki-content

document.readyState == "complete"

// 模拟 DOMContentLoaded 事件
document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
        initApplication();
    }
}

DOMContentLoaded

https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded

当初始HTML文档被完全加载和解析时，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。
另一个不同的事件 load 应该仅用于检测一个完全加载的页面。
在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个非常流行的错误，所以要谨慎。

typeof document.readyState;
// "string"
document.readyState;
// "complete"
document.readyState === "complete";
// true



// 模拟 DOMContentLoaded 事件
document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
        initApplication();
    }
}

interactive / 互动

文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState

CSP 内容安全策略

https://gist.github.com/xgqfrms-GitHub/ecf7733d066d56723b00de41a849037a

Content-Security-Policy: 
default-src 'none'; 
script-src https://cdn.mybank.net; style-src https://cdn.mybank.net;
img-src https://cdn.mybank.net; 
connect-src https://api.mybank.com; child-src 'self'
Content-Security-Policy: 
default-src https:; 
script-src https: 'unsafe-inline';
style-src https: 'unsafe-inline'

CORS & CSP

Fetch API get json data

https://gist.github.com/xgqfrms-GitHub/840fe27cecb9e7217fb4f0b09db19406

CSP & CORS

document.readyState & DOMContentLoaded

https://gist.github.com/xgqfrms-GitHub/b0da64ef34e0ba8072de09599aeb4cbf