Slash · Young
Slash · Young

Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树

文章目录

  • Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树
    • 一、CSP安全策略：
      • 1、CSP的部分命令：
      • 2、策略控制：
        • （1）首先我们先把meta标签注释掉，如下：
        • （2）我们这次只注释掉header：
        • （3）两段CSP代码都不注释：
      • 3、CSP完整命令：
    • 二、Cookie安全：
      • 1、服务端如何在响应的消息头中告诉浏览器设置一个cookie：
      • 2、修改cookie：
    • 三、Session：
    • 四、同源策略：
    • 五、HTML DOM树：
      • 1、节点：
      • 2、浏览器的渲染机制：

Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树

一、CSP安全策略：

浏览器是XSS等前端攻击的战场，有些浏览器附带一些安全策略，包含自带的XSS过滤、同源策略等。

W3C组织还针对XSS攻击制定了一个叫做CSP的安全层，也就是内容安全策略(Content Security Policy)。它的出现是为了帮助检测和缓解某些类型的攻击，比如跨站脚本(XSS)和数据注入等攻击，从而引入的浏览器策略。开发者可以根据CSP的规范，去创建一些很严格的规则，比如说白名单策略，管理网站允许加载的内容。当网站加载了非预期的内容，浏览器会及时阻止并且上报，减少出现安全风险时的损失。

1、CSP的部分命令：

CSP有两种指令方式：
（1）HTTPheader：比如在HTTP的响应头中设置Content-Security-Policy的值。
（2）HTML：比如在html里插入meta标签来实现。
如果都设置的话，以HTTP响应头里的为准

2、策略控制：

这里使用PHPstudy搭建一个简易的网站，网站的代码如下：

<meta charset="utf-8">
<?php
//只允许加载本地源图片：
header("Content-Security-Policy:img-src 'self' ");
?>

//允许加载所有源下的图片
<meta http-equiv="Content-Security-Policy" content="img-src*;">

//加载的是一张我随意百度的图片
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=464542646,4082158470&fm=27&gp=0.jpg"/>
（1）首先我们先把meta标签注释掉，如下：

Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树_第1张图片
接着我们打开火狐浏览器，然后进行访问：
我们发现底下的红色字迹提示内容的安全政策，表明header生效了，只允许加载本地源图片。
Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树_第2张图片
除此之外，我们在网络模块中，可以看到响应头中的确出现了安全政策。
Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树_第3张图片

（2）我们这次只注释掉header：

Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树_第4张图片
然后我们发现加载出了图片，哈哈。
Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树_第5张图片

（3）两段CSP代码都不注释：

阿哦！我们的图片找不到了，说明HTTP头起作用了。
Web安全2.3：CSP安全策略、Cookie、Session、同源策略、HTML DOM树_第6张图片

3、CSP完整命令：

指令 说明
base-url 文档的基准URL
child-src web workers 以及嵌套的浏览上下文（如和