在当今的网络环境中，安全问题始终是重中之重。内容安全策略（CSP）作为一个额外的安全层，为我们抵御多种网络攻击提供了有效的手段。

一、CSP 的作用与兼容性

CSP 主要用于检测并削弱特定类型的攻击，像跨站脚本（XSS）和数据注入攻击等。这些攻击是数据盗取、网站内容污染和恶意软件分发的主要途径。

CSP 具有良好的向后兼容性。不支持 CSP 的浏览器与实现了 CSP 的服务器能正常工作，不支持的浏览器会忽略 CSP，按照标准的同源策略处理网页内容。若网站不提供 CSP 标头，浏览器同样使用标准同源策略。不过要使CSP 可用，需要配置网络服务器返回 Content-Security-Policy HTTP 标头（旧版本的 X-Content-Security -Policy 标头已无需使用），也可以使用 <meta> 元素来配置策略，但某些功能（如发送 CSP 违规报告）只有使用 HTTP 标头时才可用。

在Web开发中，实现流畅的滚动效果对于提升用户体验至关重要。为了实现这一目标，开发人员可以利用一系列的滚动方案。其中，请求动画帧（requestAnimationFrame，简称rAF）是一种常用的技术。rAF通过优化动画效果的渲染，可以避免卡顿和过度绘制的问题。此外，还有其他滚动方案如CSS动画、滚动事件监听等等，开发人员可以根据具体需求选择合适的方案。通过合理选择和应用这些滚动方案，我们可以提供更加流畅和优化的用户体验。

Window 大小与文档大小

要获取窗口大小和文档大小，我们可以使用JavaScript编程语言。通过使用window对象的innerWidth和innerHeight属性，我们可以获取窗口的宽度和高度。而要获取文档的大小，我们可以使用document对象的clientWidth和clientHeight属性。这些属性将返回以像素为单位的值，从而使我们能够准确地确定窗口和文档的尺寸。通过使用这些属性，我们可以对网页进行响应式设计，并确保其在不同设备上的显示效果良好。

在 custom element 的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用。这是 Web Components 技术中的一个重要特性，它能够让开发者更加灵活地控制元素的行为

• connectedCallback：当 custom element 首次被插入文档 DOM 时，被调用。
• disconnectedCallback：当 custom element 从文档 DOM 中删除时，被调用。
• adoptedCallback：当 custom element 被移动到新的文档时，被调用。
• attributeChangedCallback: 当 custom element 增加、删除、修改自身属性时，被调用。

随着互联网的快速发展，浏览器插件成为了许多用户提升浏览器功能和个性化体验的重要工具。Chrome浏览器作为全球最受欢迎的浏览器之一，其插件生态系统也日益壮大。为了保证插件的安全性和性能，Chrome团队推出了Manifest V3，这是一种新的插件开发规范。

A step in the direction of security, privacy, and performance.

向安全性、隐私性和性能方向迈出了一步。

Manifest V3是Chrome浏览器插件开发的一种新的规范和架构。它旨在提供更高的安全性、更好的性能和更好的隐私保护。Manifest V3引入了一些新的概念和功能，以帮助开发者更好地构建和管理插件。

跨源读取阻止 (CORB)，这是一种算法，通过该算法可以识别可疑的跨源资源加载，并在它们到达网页之前被 Web 浏览器阻止。CORB 通过使敏感数据远离跨源网页来降低泄露敏感数据的风险。在大多数浏览器中，它将此类数据排除在不受信任的脚本执行上下文之外。在具有Site Isolation的浏览器中，它可以将此类数据完全排除在不受信任的渲染器进程之外，甚至有助于抵御边信道攻击。

CORB 对图像的影响

CORB 对标签应该没有明显的影响<img>，除非图像资源 1) 被错误地标记为不正确的、非图像的、受 CORB 保护的 Content-Type 和 2) 与响应标头一起提供X-Content-Type-Options: nosniff。

例子：

• 正确标记的 HTML 文档
  • 标签中使用的资源<img>：
    • 正文：一个 HTML 文档
    • Content-Type: text/html
    • 没有X-Content-Type-Options标题
  • 预期行为：无明显差异。当 1) 尝试将 html 文档呈现为图像（没有 CORB）和 2) 尝试将空响应呈现为图像（当 CORB 阻止响应时）时，呈现的图像应该是相同的损坏图像。
  • WPT测试：fetch/corb/img-html-correctly-labeled.sub.html
• 错误标记的图像（嗅探）
  • 标签中使用的资源<img> ：
    • 正文：图像
    • Content-Type: text/html
    • 没有X-Content-Type-Options标题
  • 预期行为：无差异。CORB 将嗅探到响应主体实际上不是受 CORB 保护的类型，因此将允许响应。
  • WPT测试：fetch/corb/img-png-mislabeled-as-html.sub.html
• 错误标记的图像（nosniff）
  • 标签中使用的资源<img>：
    • 正文：图像
    • Content-Type: text/html
    • X-Content-Type-Options: nosniff
  • 预期行为：可观察到的差异。由于nosniff标头，CORB 将不得不依赖Content-Type标头。因为此响应被错误标记（正文是图像，但标题Content-Type说它是 html 文档），CORB 将错误地将响应分类为需要 CORB 保护。
  • WPT测试：fetch/corb/img-png-mislabeled-as-html-nosniff.tentative.sub.html