CORS & CSP

cors-csp.md

CORS & CSP

https://gist.github.com/xgqfrms-GitHub/0d36bd446ecb639d5b3b3c7e2e64cf81

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

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

CSP

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

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

TL;DR

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

Fetch API get json data

https://cdn.xgqfrms.xyz/

OK

https://gist.github.com/

Error

---

ok

fetch('https://cdn.xgqfrms.xyz/json/cats.json', {
    method: 'get'
}).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});

error

fetch('https://cdn.xgqfrms.xyz/json/cats.json', {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        "Access-Control-Allow-Origin": "*",
        'Content-Type': 'application/json'
    }
}).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} VM130:1 OPTIONS https://cdn.xgqfrms.xyz/json/cats.json 405 ()

index.html#/blog?_k=9bbmwk:1 Fetch API cannot load https://cdn.xgqfrms.xyz/json/cats.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

对预检要求的响应不通过访问控制检查：请求资源上不存在“Access-Control-Allow-Origin”头。 Origin'null'因此不被允许访问。 该响应具有HTTP状态代码405。 如果一个不透明的响应满足您的需要，请将该请求的模式设置为“no-cors”，以禁用CORS来获取资源。

---

ok

fetch('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=0987b00e542141369049e647701b65d9', {
    method: 'get'
}).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});

error

fetch('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest', {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        "Access-Control-Allow-Origin": "*",
        'Content-Type': 'application/json',
        'X-Api-Key': `0987b00e542141369049e647701b65d9`
    }
}).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});

JSONP callback

https://api.map.baidu.com/telematics/v3/weather?location=shanghai&output=json&ak=1jtCldI4kOO8oGjHItv3F7UVbVjYS7NC&callback=jQuery321043655384464807945_1496941806245&_=1496941806246

let city = `shanghai`;
fetch(`https://api.map.baidu.com/telematics/v3/weather?location=${city}&output=json&ak=1jtCldI4kOO8oGjHItv3F7UVbVjYS7NC`,
{ 
    method: "GET", 
    mode: "no-cors",
    headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        'Access-Control-Request-Method': 'GET',
        "Accept": "application/json"
    }
})
.then(data => {
    console.log(data);
    console.log(data.results);
    return data;
})
.then(data => this.setState(
    {
        weatherInfo: data.results
    }
))
.catch((e) => {
    console.log("Oops, error");
});

get data json , but throw error ???

let city = `shanghai`;
fetch(`https://api.map.baidu.com/telematics/v3/weather?location=${city}&output=json&ak=1jtCldI4kOO8oGjHItv3F7UVbVjYS7NC`,
{ 
    method: "GET", 
    mode: "no-cors",
    headers: {
        "Content-Type": "application/javascript",
        "Access-Control-Allow-Origin": "*",
        'Access-Control-Request-Method': 'GET',
        "Accept": "application/json"
    }
})
.then(data => {
    console.log(data);
    console.log(data.results);
    return data;
})
.then(data => this.setState(
    {
        weatherInfo: data.results
    }
))
.catch((e) => {
    console.log("Oops, error");
});

HTTP Headers

https://gist.github.com/xgqfrms-GitHub/636260e8332f0fe4f530fe040ffd3741

// https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR
const url = `https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR`;

fetch(url, {
    method: "PUT",
    body: JSON.stringify({}),
    headers: {
        'Accept': 'application/json',
        'Access-Control-Request-Method': 'PUT',
        'Content-Type': 'application/json'
    },
    credentials: "same-origin"
}).then(function(response) {
    response.status; //=> number 100–599
    response.statusText; //=> String
    response.headers; //=> Headers
    response.url; //=> String

    return response.text()
}, function(error) {
    error.message; //=> String
})

fetch(url, {
    method: "GET",
    headers: {
        'Accept': 'application/json',
        'Access-Control-Request-Method': 'GET',
        'Content-Type': 'application/json'
    },
    credentials: "same-origin"
}).then(function(response) {
    response.status; //=> number 100–599
    response.statusText; //=> String
    response.headers; //=> Headers
    response.url; //=> String
    response;
    return response.text()
}, function(error) {
    error.message; //=> String
})

fetch(url, {
    method: "GET",
    headers: {
        'Accept': 'application/json',
        'Access-Control-Request-Method': 'GET',
        'Content-Type': 'application/json'
    },
    credentials: "same-origin"
}).then(function(response) {
    response.status; //=> number 100–599
    response.statusText; //=> String
    response.headers; //=> Headers
    response.url; //=> String
    console.log(response);
    console.log(response.text());
    return response.text()
}, function(error) {
    error.message; //=> String
})

https://ide.c9.io/xgqfrms/reactjs

JSONP

fetch

http://louiszhai.github.io/2016/11/02/fetch/

https://github.com/camsong/fetch-jsonp

http://www.voidcn.com/blog/sunkobe2494/article/p-5778247.html

http://hao.jser.com/archive/14678/

https://github.com/xgqfrms-GitHub/weather-app/tree/gh-pages/static/js

JSONP fetch

??? fetch 不支持JSONP ???

JSONP & jquery

https://github.com/camsong/fetch-jsonp

chrome

chrome://chrome-urls/

chrome://flags/

https://www.cnblogs.com/laden666666/p/5544572.html