Content Security Policy (CSP) 介绍

当我不经意间在 Twitter 页面 view source 后，发现了惊喜。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Twitter</title>
  <style>
  body {
    background-color: #ffffff;
    font-family: sans-serif;
  }
  a {
    color: #1da1f2;
  }
  svg {
    color: #1da1f2;
    display: block;
    fill: currentcolor;
    height: 21px;
    margin: 13px auto;
    width: 24px;
  }
  </style>
</head>
<body>
    <noscript>
  &lt;<span class="pl-ent"><span class="pl-bu">center</span></span>&gt;If you’re not redirected soon, please &lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>/<span class="pl-pds">"</span></span>&gt;use this link&lt;/<span class="pl-ent">a</span>&gt;.&lt;/<span class="pl-ent"><span class="pl-bu">center</span></span>&gt;
&lt;/<span class="pl-ent">noscript</span>&gt;
&lt;<span class="pl-ent">script</span> <span class="pl-e">nonce</span>=<span class="pl-s"><span class="pl-pds">"</span>SG0bV9rOanQfzG0ccU8WQw==<span class="pl-pds">"</span></span>&gt;<span class="pl-s1"></span>

      

      document.cookie = "app_shell_visited=1;path=/;max-age=5";

      

      location.replace(location.href.split("#")[0]);

    </script>

</body>

</html>

相比平时看到的其他站点的源码，可以说是很清爽了。没有乱七八糟的标签，功能却一样不少。特别有迷惑性，以为这便是页面所有的源码，但查看 DevTools 的 Source 面板后很容易知道这并不是真实的 HTML 代码。但为何页面源码给出的是如此清爽的版本，这里先不研究。

把目光移向 script 标签时，发现一个不认识的 nonce 属性。它以及它后面的神秘字符串成功引起了我的好奇。再去看 Google 首页的源码，也有好些 nonce 的运用。是时候去了解一下这里的 nonce 是什么了。

  document.cookie = "app_shell_visited=1;path=/;max-age=5";
  
  location.replace(location.href.split("#")[0]);
&lt;/script&gt;</pre></div>
nonce
https://a.com
https://b.com
Content-Security-Policy
<meta>
Content-Security-Policy
<meta>
<meta>
Content-Security-Policy
<meta>
Content-Security-Policy: <policy-directive>; <policy-directive>…
script-src
img-src
base-uri
<base>
child-src
child-src https://youtube.com
connect-src
font-src
font-src https://themes.googleusercontent.com
form-action
<form>
frame-ancestors
child-src
<frame>
<iframe>
<embed>
<applet>
<meta>
frame-src
tochild-src
img-src
media-src
object-src
plugin-types
report-uri
<meta>
style-src
upgrade-insecure-requests
worker-src
child-src
frame-ancestors
frame-ancestors
child-src
*
img-src
default-src
img-src
*
default-src
default-src
default-src ‘self’
Content-Security-Policy: default-src ‘self’; img-src https://cdn.example.com
<meta>
script-src 'self' https://unpkg.com
self
none
https://unpkg.com
none
csp_test.html
test.js
alert(‘来自 test.js 的问候！’)
none
self
example.com
api.example.com
unsafe-inline
unsafe-eval
eval
setTimeout
script-src
style-src
default-src 'self' ‘unsave-inline’
unsafe-inline
unsafe-eval
onclick=“myHandler”
href=“javascript:;”
Content-Security-Policy
Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
nonce-
<style>
noce
nonce
Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='
setTimeout/setInterval
setTimout(‘alert(1)’,1000)
eval
eval(‘alert(1)’)
Function
new Function(‘alert(1)’)
unsafe-eval
eval
Function
setTimeout/setInterval
*
*://*.example.com:*
example.com
example.com
http://example.com
http://www.example.com
http://example.com:80
http://example.com
URI = scheme:[//authority]path[?query][#fragment]
authority
authority = [userinfo@]host[:port]
*.example.com
example.com
self
self
Content-Security-Policy
connect-src
http://example.com/
connect-src
none
none
Content-Security-Policy: default-src 'self' http://example.com;
                         connect-src 'none';
Content-Security-Policy: connect-src http://example.com/;
                         script-src http://example.com/
default-src
default-src
*
Content-Security-Policy
report-uri
Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
report-uri
Content-Security-Policy-Report-Only
Content-Security-Policy
Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
Content-Security-Policy: img-src *;
Content-Security-Policy-Report-Only: img-src ‘none’; report-uri http://reportcollector.example.com/collector.cgi
img-src ‘none’

blog11

公告

阅读排行榜

Bingo!!