CSP入门

  1. 引入
  2. 开始
    1. CSP简介
    2. CSP使用

// 资料来源: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP

引入

CSP

面试的时候无数次挂在这个点上-_-

闻者伤心,听者落泪

开始

CSP简介

CSP,Content Security Policy,也就是内容安全策略。

通俗点来说,这玩意就是用来控制用户浏览器能加载哪些地方的东西,例如图片、视频、js、css等。

CSP使用

可以在响应头(Response header)中添加Content-Security-Policy来对CSP进行设置。

以php为例,可以通过如下的语句限制网页只能加载指定域名下的图片:

<?php
header("Content-Security-Policy: img-src https://www.baidu.com");
?>
<html>
    <body>
        <img src='https://www.baidu.com/img/bd_logo1.png' onerror='javascript:alert(2)'>
        <img src='http://localhost/aaa.jpg'>
    </body>
</html>

其中img-src https://www.baidu.com就限制了网页只能从https://www.baidu.com加载图片,最终效果如下:

请求和响应头如下:

如果去掉header("Content-Security-Policy: img-src https://www.baidu.com");,则效果如下:

可以看到,去掉CSP之后可以成功加载localhost中的图片。

当然,CSP作用当然不止阻止图片加载,它还可以阻止其他资源的加载。关于对其他资源的设置(来源:Seebug):


如果我的文章能帮到您的话我会很开心.如需转载记得注明出处:)
目录